微信小程序开发避坑
1.wx.showModal 未报错，也未执行。
title 必须为string类型
wx.showModal({
title: res.statusCode,
content: '错误码：' + res.statusCode,
showCancel: false,
complete() {
isShow = false
}
})
2.map组件 移动marker 闪烁
不能直接更改marker中的坐标点，否则移动时会出现图标闪烁
解决办法 ：
onReady() {
mapContext = wx.createMapContext('map');
},
// 在合适的事件中调用移动 marker 的方法
moveMarker() {
mapContext.translateMarker({
markerId: 1, // marker 的唯一标识符
destination: {
latitude: 39.908823, // 目标位置的纬度
longitude: 116.397470, // 目标位置的经度
},
autoRotate: true, // 是否自动旋转 marker
rotate: 90, // 旋转角度
duration: 2000, // 移动到目标位置的过程时间，单位为毫秒
animationEnd() {
console.log('Marker moved!');
},
});
},
3.同一个视频链接，在手机上可以正常播放，电脑微信小程序无法播放，即使加上白名单也不行
原因：域名的证书过期了，申请新的证书需要重新绑定才能生效
4.同一接口和参数，获取回参id和数据库不一致
原因：id为数字类型，js精度原因，导致id不一致，回参改为字符串类型就好了
5.marker平移api translateMarker 不生效
更新坐标 需要及时获取map 上下文 MapContext 对象
let mapCtx = wx.createMapContext("map")
//更新坐标
mapCtx.translateMarker({
markerId: 1, // marker 的唯一标识符
destination: {
latitude:bMapTransqqMap.latitude, // 目标位置的纬度
longitude:bMapTransqqMap.longitude, // 目标位置的经度
},
duration: 100, // 移动到目标位置的过程时间，单位为毫秒
animationEnd() {
console.log('Marker moved!');
},
});
6.npm 后 报错
以下步骤解决
1.初始化 npm
npm init
2.安装依赖
npm i xxxx
3.修改 project.config.json 配置文件
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],
...
}
7.vant组件样式失效
1.清除缓存
2.构建npm包后重新加载，样式也会出现
8.js文件中所有跳转都失效
解决：路径去点 .. , 路径改为 /pages/login/login
9.真机调试和打开调试面板的情况下接口才能正常响应
问题原因：没有配置request合法域名
微信如何在移动端调试 Network
使用 WeConsole 工具，
1.打开终端 安装依赖
npm i weconsole -S
2.在app.js文件中引用核心
// NPM方式引用
import 'weconsole/init';
3.在组件json或者 app.json 注册组件
"usingComponents": {
"weconsole": "weconsole/components/main/index"
}
4.在所需要的页面中使用
<!-- page/component .wxml -->
<weconsole />
10.审核失败问题
解决：再次提交就好了
11.文件流 form-data上传
下载
formdata.js
mimeMap.js
使用
import FormData from '../../utils/formdata.js'
//图片上传前
afterRead(event) {
const {
file
} = event.detail;
let formData = new FormData();
formData.appendFile("file", file.url);
const data = formData.getData();
request({
url: '/lh/oss/upload/xxxx',
method: 'post',
data: data.buffer,
header: {
'content-type': data.contentType
}
})
12.H5拉起小程序并给小程序页面传参
获取 URL Link 的方式
通过服务端接口可以获取打开小程序任意页面的 URL Link
文档地址：
https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-link/generateUrlLink.html
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html
这种短链在微信环境中打开只会跳【正式版】，即使你的 env_version 设定了【体验版】或【开发版】，需要在外部浏览器打开才能跳转指定的版本。
//判断当前页面是否为微信小程序 嵌入
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
this.Iswx = true;
}
});
let baseUrl = 'https://developers.weixin.qq.com?type=1'
if (this.Iswx) {
wx.miniProgram.navigateTo({
url: '/pages/H5/H5?url='+baseUrl,
});
}else{
//getWXgoUrl 为后端接口 后端处理生成短链
getWXgoUrl({
page: "/pages/H5/H5",
env: "develop", //。正式版为 "release"，体验版为 "trial"，开发版为 "develop"
scene: "url=" + encodeURIComponent(baseUrl), //小程序跳转页面接收的参数，如果包含？= &等 则需要encodeURIComponent转一下
})
.then((res) => {
if (res.code == 200) {
//后台生成短链
//ios打不开 window.open(res.data.openlink);
location.href = res.data.openlink
}
});
}
13.H5使用微信小程序api，并获取定位权限(必须真机调试）
需要在开发管理-开发设置中 配置业务域名
async weixinMap() {
let that = this;
//此处为后端接口返回相关需要的配置参数
let data = {
url: location.href.split("#")[0],
};
let res = await getHome.Config(data);
if (res.code == 200) {
res = res.data;
wx.config({
debug: false,
appId: res.appid,
timestamp: Number(res.timestamp),
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: ["checkJsApi", "getLocation"],
});
}
wx.ready(() => {
wx.checkJsApi({
//校验
jsApiList: ["getLocation"],
success: (data) => {
wx.getLocation({
type: "wgs84",
success: function (res) {
console.log("wxGetLocation", res.longitude, res.latitude);
},
fail: function (err) {
console.log("wxGetLocation fail", err);
},
cancel: function (canRes) {
console.log("用户拒绝授权获取地理位置");
},
});
},
fail: function (err) {
console.log("checkJsApi:fail:", err);
},
});
});
},
在开发者工具中 ，查看内嵌的H5页面，没有调用获取定位的授权弹框，在移动端设备中查看是可以正常调用
14.H5使用微信小程序api，扫一扫ios无法唤起
代码：
sanQrCode(e) {
return new Promise((reslove, reject) => {
wx.config({
debug: false,
appId: e.appid, //公众号appID
timestamp: Number(e.timestamp), //生成签名时间戳
nonceStr: e.nonceStr, //小程序签名
signature: e.signature, //小程序签名生成的随机字符串
jsApiList: ["scanQRCode", "checkJsApi"], //需要使用的API
});
wx.ready(function () {
//小程序回调（如果进入页面就需要调用API需要将调用方法写入回调中）
//小程序回调
wx.checkJsApi({
//校验使用的API在当前环境是否可用
//校验
jsApiList: ["scanQRCode"], //需要校验的API
success: function (res) {
wx.scanQRCode({
//调用的API 此处为扫码
//二维码
needResult: 1, //参数1返回小程序处理 0直接返回结果
success(res) {
if (res.resultStr) {
reslove(res.resultStr);
}
reject(res);
},
fail(res) {
reject(res);
},
complete() {
reslove(false);
},
});
},
});
});
});
},
原因： 1. wx.config在页面中使用了两次，只能使用一次才生效
2. 使用 setTimeout 将 wx.scanQRCode 包起来，500ms后调用wx.scanQRCode
//小程序扫码
sanQrCode(e) {
return new Promise((reslove, reject) => {
setTimeout(() => {
wx.scanQRCode({
//调用的API 此处为扫码
//二维码
needResult: 1, //参数1返回小程序处理 0直接返回结果
success(res) {
if (res.resultStr) {
reslove(res.resultStr);
}
reject(res);
},
fail(res) {
reject(res);
},
complete() {
reslove(false);
},
});
}, 500)
});
},
15.腾讯地图插件 路线规划页面一直往下拖动的问题处理
app.wxss:
/* 腾讯地图插件路线规划避免一直往下拖动的处理 */
#routeMap{
flex:auto !important
}
