微信公眾號H5之微信分享常見錯誤和問題(小結(jié))
url轉(zhuǎn)碼
官方文檔描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
確認(rèn)url是頁面完整的url(請?jiān)诋?dāng)前頁面alert(location.href.split('#')[0])確認(rèn))，包括'http(s)😕/'部分，以及'？'后面的GET參數(shù)部分,但不包括'#'hash后面的部分
即獲取url完成地址的方法為
let url = window.location.href.split('#')[0];
如果鏈接帶有中文字符或者特殊符號,前端需要使用encodeURIComponent編碼,同時(shí)后端需要配合解碼
let url = encodeURIComponent(window.location.href.split('#')[0]);
config注入
官網(wǎng)文檔描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4
同一個(gè)url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,
注意,每次使用jssdk方法前都要先注入配置信息,并且,每使用一次,就要注入config一次.
在vue里,可以寫在每次路由變化時(shí)
router.beforeEach((to, from, next) => {
// 獲取權(quán)限驗(yàn)證配置(簽名) 后端返回 getConfig, 注意返回字段的大小寫!
let res
// 注入配置信息
wx.config({
debug: false, // 調(diào)試開關(guān)
appId: res.appId, // 必填，公眾號的唯一標(biāo)識
timestamp:res.timestamp , // 必填，生成簽名的時(shí)間戳
nonceStr: res.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: res.signature,// 必填，簽名
jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] // 必填，需要使用的JS接口列表
});
wx.ready(() => {
// doSoming
});
})
安全域名
一定要再三確認(rèn)安全域名等微信公眾號配置信息,如分享鏈接link字段
很多時(shí)候的錯誤并不是前端方法或者sdk等問題,而是后臺有沒有設(shè)置正確的安全域名和白名單等.
wx.updateAppMessageShareData({
title: '', // 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: '', // 分享圖標(biāo)
success: function () {
// 設(shè)置成功
}
})
常見錯誤
參考微信官網(wǎng)文檔-附錄5
地址: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
在開發(fā)過程遇到
- invalid signature
- the permission value is offline verifying
- permission denied
先參考文檔,排除基本因素,還是不行,再查找搜索引擎的答案.
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
值得學(xué)習(xí)的JavaScript調(diào)試技巧分享
這篇文章主要給大家介紹了一些JavaScript調(diào)試技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)
小程序獲取用戶信息這部分其實(shí)不難,但是,他有點(diǎn)麻煩,下面這篇文章主要給大家介紹了關(guān)于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫這兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了三種帶箭頭提示框總結(jié)實(shí)例 的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
微信小程序動態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序動態(tài)顯示項(xiàng)目倒計(jì)時(shí)，格式如4天7小時(shí)58分鐘39秒，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
js open() 與showModalDialog()方法使用介紹
項(xiàng)目開發(fā)中經(jīng)常要用到j(luò)s open() 與showModalDialog()方法，下面有個(gè)不錯的示例，喜歡的朋友可以研究下2013-09-09
Layui實(shí)現(xiàn)主窗口和Iframe層參數(shù)傳遞
今天小編就為大家分享一篇Layui實(shí)現(xiàn)主窗口和Iframe層參數(shù)傳遞，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等。可視化圖表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應(yīng)用和項(xiàng)目的可靠性?，F(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實(shí)現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
javascript與jquery動態(tài)創(chuàng)建html元素示例
這篇文章主要介紹了javascript與jquery動態(tài)創(chuàng)建html元素的方法,結(jié)合實(shí)例形式分析了javascript與jQuery動態(tài)創(chuàng)建頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了javascript跨域原因以及解決方案分享，十分的細(xì)致全面，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了JavaScript三元運(yùn)算符的多種使用技巧,本文講解了普通用法、稍微聰明點(diǎn)的用法、甚至更變態(tài)些的用法等,需要的朋友可以參考下2015-04-04