這里給大家分享我在實(shí)際生活中總結(jié)出來(lái)的一些知識(shí),希望對(duì)大家有所幫助
一.SDK引入
這里提供兩套引入流程,一套是vue2.0及其他h5項(xiàng)目,一套是vue3.0的引入流程
不懂的也可以看我之前的一篇詳細(xì)流程
記錄--微信調(diào)用jssdk全流程詳解
1.js引入
直接在你的頁(yè)面里引入js文件就行
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
2.weixin-js-sdk引入
先調(diào)用全局命令
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 } }
之后在調(diào)用的頁(yè)面直接$wx引入就行了
二.代碼引用流程
基礎(chǔ)代碼引用邏輯如下,需要我們?cè)趈sApiList中添加我們要的權(quán)限,然后調(diào)用對(duì)應(yīng)的wx接口,這里以定位權(quán)限為例
var wxNavigation = (data) => { return new Promise((resolve, reject) => { wx.config({ debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。 appId: data.appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: data.timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr: data.nonceStr, // 必填,生成簽名的隨機(jī)串 signature: data.signature, // 必填,簽名 jsApiList: ["getLocation"],// 必填,需要使用的JS接口列表 }); wx.ready(() => { wx.getLocation({ type: "gcj02", // 默認(rèn)為wgs84的gps坐標(biāo),如果要返回直接給openLocation用的火星坐標(biāo),可傳入'gcj02' success: function(res) { resolve({ bor: true, data: res, }); }, }); }); }); };
?三,報(bào)錯(cuò)處理
這里分享三個(gè)我經(jīng)常遇到的報(bào)錯(cuò)
1.xxxx: the permission value is offline verifying
這個(gè)報(bào)錯(cuò)是最常見(jiàn)的,是因?yàn)?config 沒(méi)有正確執(zhí)行,或者是調(diào)用的?JSAPI
?沒(méi)有傳入 config 的jsApiList
參數(shù)中。建議按如下順序檢查:
確認(rèn) config 正確通過(guò)。 如果是在頁(yè)面加載好時(shí)就調(diào)用了JSAPI,則必須寫(xiě)在wx.ready的回調(diào)中。 確認(rèn) config 的jsApiList參數(shù)包含了這個(gè)JSAPI。
2.開(kāi)發(fā)者工具config:ok 手機(jī)getLocation:invalid signature?
這個(gè)是在調(diào)用getLocation,wxOpenLocation等定位,打開(kāi)導(dǎo)航類(lèi)型的接口時(shí)會(huì)出現(xiàn)的問(wèn)題,原因就是接口權(quán)限比較高,如果換頁(yè)面調(diào)用了,沒(méi)有請(qǐng)求當(dāng)前頁(yè)面的url,就會(huì)導(dǎo)致invalid signature,一般是要重新請(qǐng)求一次jsSDK就沒(méi)問(wèn)題了,這里提供我的兩套思路
getLocation
問(wèn)題描述和解析
ios使用微信自帶方法wx.getLocation調(diào)取用戶地理位置,會(huì)直接走err,輸出報(bào)錯(cuò)是“‘getLocation:invalid signature’” 但是安卓機(jī)就沒(méi)這個(gè)問(wèn)題。 我看有人說(shuō) 調(diào)接口獲取wx.config配置所需參數(shù)的入?yún)ⅲ?yè)面路徑),ios沒(méi)有獲取到最新的 于是我在app.vue里進(jìn)入頁(yè)面時(shí),將當(dāng)前的路徑緩存起來(lái),在自己掉位置的頁(yè)面里使用。 但是解決不了我的問(wèn)題 后來(lái)我看到了網(wǎng)上說(shuō)ios刷新就能成功,我就測(cè)試了一下 ,果然是可以調(diào)用成功了!??! 然后也百度了好多,說(shuō)是這個(gè)是ios本身就有這個(gè)問(wèn)題。 最后在wx.ready里加了一個(gè)刷新一次頁(yè)面的方法,就沒(méi)問(wèn)題了
代碼思路:
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, // 默認(rèn)為wgs84的gps坐標(biāo),如果要返回直接給openLocation用的火星坐標(biāo),可傳入'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('返回默認(rèn)地址') }, }); });
?wxOpenLocation
問(wèn)題描述
在調(diào)用了wxopenlocation時(shí),調(diào)試返回結(jié)果正常,但是就是打不開(kāi)地圖,一般是經(jīng)緯度沒(méi)有使用浮點(diǎn)類(lèi)型,如果使用了后還出現(xiàn)這個(gè)問(wèn)題,就需要我們?cè)谡{(diào)用時(shí)用延時(shí)調(diào)用,來(lái)防止我們的代碼在內(nèi)存運(yùn)行的時(shí)候反應(yīng)不過(guò)來(lái)
?代碼思路
var wxOpenLocation = (data, locationObj) => { wx.config({ debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。 appId: data.appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: data.timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr: data.nonceStr, // 必填,生成簽名的隨機(jī)串 signature: data.signature, // 必填,簽名 jsApiList: ['openLocation'], // 必填,需要使用的JS接口列表 }); wx.ready(() => { setTimeout(() => { wx.openLocation(locationObj); }, 500) }); };
?3.禁止分享代碼失效
問(wèn)題描述
在我們需要讓全局的所有頁(yè)面禁止微信復(fù)制,分享朋友圈等功能時(shí),莫名奇妙刷新后就又可以分享了,這里提供我的解決方案,在main.js或所有頁(yè)面的初始化文件中調(diào)用以下代碼,直接去除微信分享類(lèi)目的所有功能
?代碼思路文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-709983.html
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({// 要隱藏的菜單項(xiàng),只能隱藏“傳播類(lèi)”和“保護(hù)類(lèi)”按鈕,所有menu項(xiàng)見(jiàn)附錄3 menuList: [ 'menuItem:share:appMessage', //發(fā)送給朋友 'menuItem:share:timeline', //分享到朋友圈 'menuItem:copyUrl' //復(fù)制鏈接 ] }) }); }); }
以上就是我在對(duì)接微信JSSDK中碰到的一些問(wèn)題,如果對(duì)您有所幫助,歡迎您點(diǎn)個(gè)關(guān)注,我會(huì)定時(shí)更新技術(shù)文檔,大家一起討論學(xué)習(xí),一起進(jìn)步。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-709983.html
到了這里,關(guān)于一些H5對(duì)接微信JSSDK的問(wèn)題記錄的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!