一些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中碰到的一些問題，如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。