uniapp - 微信小程序

一、background-image 大图不显示的问题

解决方法:

1、使用网络地址;2、使用 base64

urlTobase64(filePath) {// #ifdef MP-WEIXINlet img = `${filePath}`,imgBase64 = wx.getFileSystemManager().readFileSync(img, "base64"),base64Url = `data:image/png;base64,${imgBase64}`;console.log("data:image/png;base64", "图片转换成功");return base64Url// #endif
},
<!-- #ifdef MP-WEIXIN -->
<view class="inner-box" :style="{backgroundImage:`url(${$utils.urlTobase64('/static/image/top.png')})`}">
<!-- #endif --><!-- #ifdef APP --><view class="inner-box"><!-- #endif --></view>.inner-box {background-image: url('/static/image/top.png');}

二、uni.$ emit() uni.$on() 不生效

解决方法:

放到 onReady() 方法里 ,onLoad() 方法 监听不到

三、高德定位

解决方法:

高德微信小程序SDK amap-wx.130.js下载地址

import amapWX from '../utils/amap-wx.130.js'
let utils = {getAmapWXLocation() {// #ifdef MP-WEIXINreturn new Promise((resolve, reject) => {const amapPlugin = new amapWX.AMapWX({key: '9a000f67903479b1f49cc05c59057108'});amapPlugin.getRegeo({success: (res) => {let data = res[0]console.log('定位成功', data)let position = {longitude: data.longitude,latitude: data.latitude,address: data.regeocodeData.formatted_address,}console.log('position: ', position);resolve(position)},fail(err) {reject(err)console.log('定位失败', err)}});})// #endif}
}
export default utils;

调用

getLocationInfo() {// #ifdef MP-WEIXINthis.$utils.getAmapWXLocation().then(loc => {this.sLatitude = loc.latitude;this.sLongitude = loc.longitude;this.sLocation = loc.address;console.log('loc: ', loc);})// #endif
}

四、image 无法加载
在这里插入图片描述
分析问题所在:/pages/template/undefined/,路径有问题;
因为 $imgBaseUrl 这个路径 是写在 main.js 里边的

 <image :src="`${$imgBaseUrl}${img}`">

解决方法

export default {data() {return {imgBaseUrl: this.$imgBaseUrl,}}
}<image :src="`${imgBaseUrl}`">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/62927.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DETR: End-to-End Object Detection with Transformers论文学习

论文地址&#xff1a;https://arxiv.org/pdf/2005.12872 代码地址&#xff1a;https://github.com/facebookresearch/detr 相关学习视频&#xff1a;https://space.bilibili.com/94779326/lists?sid1531941 标题前言&#xff1a; DETR 是 Facebook 团队于 2020 年提出的基于…

LeetCode 24反转链表

单链表反转&#xff1a;详细解析与代码实现 在数据结构的学习过程中&#xff0c;链表是一个非常重要且有趣的部分&#xff0c;而单链表的反转操作更是常考的基础知识点。今天就来和大家详细讲讲如何实现单链表的反转&#xff0c;并通过代码示例来加深理解呀。 题目 给定单链…

Redis学习笔记之——学习计划

Redis——Remote Dictionary Server&#xff0c;开源、基于内存、速度快、key-value... Redis做为一个高性能的键值存储系统&#xff0c;广泛应用于缓存、会话存储、分布式锁以及其他需要快速访问的数据场景中。熟悉掌握redis&#xff0c;似乎已成为广大码农们必备的一项技能。…

网络安全教学博客(二):常见网络安全威胁剖析

在上一篇博客中&#xff0c;我们了解了网络安全的基础概念和重要性。今天&#xff0c;让我们深入探讨一下常见的网络安全威胁&#xff0c;以便我们能够更好地识别和防范它们。 恶意软件&#xff08;Malware&#xff09; 病毒&#xff08;Virus&#xff09;&#xff1a;病毒是一…

Vue3状态管理:Pinia架构设计分析

Vue3状态管理:Pinia架构设计分析 介绍 在Vue.js开发中&#xff0c;状态管理是一个非常重要的部分。随着Vue3的发布&#xff0c;Pinia作为一种新的状态管理架构也相继问世。本文将对Pinia架构进行深入分析&#xff0c;帮助读者了解其设计原理、特点以及在实际项目中的应用。 架构…

【IDEA】启动报错

今天启动IDEA报错 报错信息&#xff1a; Cannot connect to already running IDE instance. Exception: Process 5,444 is still running 打开任务管理器&#xff0c;关掉进程ID5444的任务

socket编程UDP-实现停等机制(接收确认、超时重传)

在下面博客中&#xff0c;我介绍了利用UDP模拟TCP连接、按数据包发送文件的过程&#xff0c;并附上完整源码。 socket编程UDP-文件传输&模拟TCP建立连接脱离连接&#xff08;进阶篇&#xff09;_udp socket发送-CSDN博客 下面博客实现的是滑动窗口机制&#xff1a; sock…

uniapp小程序的锚点定位(将页面滚动到目标位置)

小程序中&#xff0c;a页面跳转到b页面&#xff0c;跳转后滚动定位到b页面的特定位置。 1.uni.pageScrollTo传递一个scrollTop参数可以滚动到特定位置。2.可以通过 uni.createSelectorQuery()等获取定位元素的位置信息。3.uni.getSystemInfoSync()获取设备的导航栏和状态栏高度…

php基础:命名空间

1.PHP 命名空间可以解决以下两类问题&#xff1a; 1.用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/常量之间的名字冲突。 2.为很长的标识符名称(通常是为了缓解第一类问题而定义的)创建一个别名&#xff08;或简短&#xff09;的名称&#xff0c;以提高源代码的可读…

分布式 CAP理论 总结

前言 相关系列 《分布式 & 目录》《分布式 & CAP理论 & 总结》《分布式 & CAP理论 & 问题》 分布式 分布式的核心是将大型业务拆解成多个子业务以使之在不同的机器上执行。分布式是用于解决单个物理机容量&性能瓶颈问题而采用的优化手段&#xf…

python xpath解析笔记

与bs4的区别 bs4有很多属性和方法&#xff0c;而xpath只有一个方法&#xff0c;是通过不同的xpath表达式实现很多功能的。 html例子 定位 tree.xpath(‘/html/head/title’) 返回列表。 开头的斜杠表示从根节点遍历。 中间的斜杠表示层级。&#xff08;相当于bs4中的>…

Q学习(Q-Learning)详解

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

树状数组详解

概述 树状数组&#xff08;Binary Indexed Tree&#xff0c;简称BIT&#xff09;&#xff0c;是一种数据结构&#xff0c;用于处理区间查询和更新问题。它是一种可以高效地在对数级别时间复杂度内进行单点更新和区间查询的数据结构。树状数组通常用于解决以下两类问题&#xf…

freeswitch(开启支持MCU视频会议,使用mod_av模块)

亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径(根据自己的路径进入) /usr/local/freeswitch/etc/freeswitch场景说明: 有些场景想使用视频会议MCU融合画面进行开会使用方法: 第一步:下载插件 yum install -y epel-release yum install

【大数据技术基础】【记录Ubuntu 16.04升级到18.04】Ubuntu的一个版本升级到另一个版本

在 Ubuntu 操作系统中进行软件更新和系统升级 Ubuntu Kylin 16.04 LTS 系统进行系统升级到 Ubuntu 18.04.6 LTS 版本 升级提示&#xff1a;系统弹出提示框&#xff0c;告知用户有新版本的 Ubuntu 可用&#xff0c;询问用户是否想要升级。 认证窗口&#xff1a;显示了一个认证…

这是一个vue3 + scss的数字滚动效果

介绍: 当数字变化时&#xff0c;只改变变化的数字位&#xff0c;其余的不变&#xff0c;可以递增、递减、骤变、负数也可以&#xff0c;但是样式要根据具体的项目需求去改&#xff1b; 效果1、增加数字&#xff1a; 效果2、减少数字&#xff1a; 使用方法&#xff1a; <te…

TortoiseGit的下载、安装和配置

一、TortoiseGit的简介 tortoiseGit是一个开放的git版本控制系统的源客户端&#xff0c;支持Winxp/vista/win7.该软件功能和git一样 不同的是&#xff1a;git是命令行操作模式&#xff0c;tortoiseGit界面化操作模式&#xff0c;不用记git相关命令就可以直接操作&#xff0c;读…

最新版Chrome浏览器加载ActiveX控件之Adobe PDF阅读器控件

背景 Adobe PDF阅读器控件是一个ActiveX控件&#xff0c;用于在Windows平台上显示和操作PDF文件。它提供了一系列方法和属性&#xff0c;可以实现对PDF文件的加载、显示、搜索、打印、保存等操作。 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件…

linux在没网的情况下如何校验时间 超详细拿来即用

一、没有校时服务器的话 1、手动修改 sudo date --set"2024-06-17 13:44:00"二、有校时服务器的话 1、手动校时 ntpdate 14.193.73.22、自动校时 写一个校时服务脚本 14.193.73.2 是校验时间服务器 #!/bin/sh while true dontpdate 14.193.73.2sleep 5;hwclock…

源码分析之Openlayers中的控件篇Control基类介绍

概述 Openlayers 中内置了9类控件&#xff0c;这9类控件都是基于Control类&#xff0c;而Control类则是继承于BaseObject类&#xff0c;如下图所示&#xff1a; 如上&#xff0c;这9类控件分别是&#xff1a; Attribution&#xff1a;属性控件FullScreen:全屏控件MousePositi…