这里给大家分享我在实际生活中总结出来的一些知识,希望对大家有所帮助
一.SDK引入
这里提供两套引入流程,一套是vue2.0及其他h5项目,一套是vue3.0的引入流程
不懂的也可以看我之前的一篇详细流程
记录--微信调用jssdk全流程详解
1.js引入
直接在你的页面里引入js文件就行
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
2.weixin-js-sdk引入
先调用全局命令
npm install weixin-js-sdk
然后修改main.js,加上以上代码
import wx from "weixin-js-sdk"
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.config.globalProperties.$wx=wx;
return {
app
}
}
之后在调用的页面直接$wx引入就行了
二.代码引用流程
基础代码引用逻辑如下,需要我们在jsApiList中添加我们要的权限,然后调用对应的wx接口,这里以定位权限为例
var wxNavigation = (data) => {
return new Promise((resolve, reject) => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ["getLocation"],// 必填,需要使用的JS接口列表
});
wx.ready(() => {
wx.getLocation({
type: "gcj02", // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function(res) {
resolve({
bor: true,
data: res,
});
},
});
});
});
};
三,报错处理
这里分享三个我经常遇到的报错
1.xxxx: the permission value is offline verifying
这个报错是最常见的,是因为 config 没有正确执行,或者是调用的 JSAPI
没有传入 config 的jsApiList
参数中。建议按如下顺序检查:
确认 config 正确通过。
如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。
确认 config 的jsApiList参数包含了这个JSAPI。
2.开发者工具config:ok 手机getLocation:invalid signature?
这个是在调用getLocation,wxOpenLocation等定位,打开导航类型的接口时会出现的问题,原因就是接口权限比较高,如果换页面调用了,没有请求当前页面的url,就会导致invalid signature,一般是要重新请求一次jsSDK就没问题了,这里提供我的两套思路
getLocation
问题描述和解析
ios使用微信自带方法wx.getLocation调取用户地理位置,会直接走err,输出报错是“‘getLocation:invalid signature’”
但是安卓机就没这个问题。
我看有人说
调接口获取wx.config配置所需参数的入参(页面路径),ios没有获取到最新的
于是我在app.vue里进入页面时,将当前的路径缓存起来,在自己掉位置的页面里使用。
但是解决不了我的问题
后来我看到了网上说ios刷新就能成功,我就测试了一下 ,果然是可以调用成功了!!!
然后也百度了好多,说是这个是ios本身就有这个问题。
最后在wx.ready里加了一个刷新一次页面的方法,就没问题了
代码思路:
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ["getLocation", "openLocation"],
});
wx.ready(() => {
wx.getLocation({
type: type, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function(res) {
},
fail: function(err) {
const u = navigator.userAgent;
const iOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (iOS) {
window.location.reload();
}
console.log('返回默认地址')
},
});
});
wxOpenLocation
问题描述
在调用了wxopenlocation时,调试返回结果正常,但是就是打不开地图,一般是经纬度没有使用浮点类型,如果使用了后还出现这个问题,就需要我们在调用时用延时调用,来防止我们的代码在内存运行的时候反应不过来
代码思路
var wxOpenLocation = (data, locationObj) => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ['openLocation'], // 必填,需要使用的JS接口列表
});
wx.ready(() => {
setTimeout(() => {
wx.openLocation(locationObj);
}, 500)
});
};
3.禁止分享代码失效
问题描述
在我们需要让全局的所有页面禁止微信复制,分享朋友圈等功能时,莫名奇妙刷新后就又可以分享了,这里提供我的解决方案,在main.js或所有页面的初始化文件中调用以下代码,直接去除微信分享类目的所有功能
代码思路
const hideShare = (data)=>{
return new Promise((resolve, reject) => {
wx.config({
// debug: true,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['hideOptionMenu','hideAllNonBaseMenuItem','hideMenuItems'],
});
wx.ready(() => {
wx.hideOptionMenu();
wx.hideAllNonBaseMenuItem();
wx.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
menuList: [
'menuItem:share:appMessage', //发送给朋友
'menuItem:share:timeline', //分享到朋友圈
'menuItem:copyUrl' //复制链接
]
})
});
});
}