一、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}`">