一些H5对接微信JSSDK的问题记录

这里给大家分享我在实际生活中总结出来的一些知识，希望对大家有所帮助

一.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' //复制链接
				]
			})
		});
	});
}

以上就是我在对接微信JSSDK中碰到的一些问题，如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。