微信h5跳轉小程序wx-open-launch-weapp開放標籤不顯示(已解決)

前言: 

  前幾天成功對接了跳轉第三方小程序的功能,今天有個頁面有需要對接。但是奇怪的是用的和上次一模一樣的配置,但就是死活不顯示wx-open-launch-weapp這個開放標籤的按鈕,看不到任何效果(這個問題真的是讓人慾哭無淚,相同的代碼不同的頁面就不顯示了),下面就說說我的排查解決過程。

開啓wx.config的debug模式:

首先我們在wx.config的配置中開啓debug。

wx.config({
                    debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時纔會打印
                    appId: 'ccccxxxx4354353453', // 必填,公衆號的唯一標識
                    timestamp: 0123456, // 必填,生成簽名的時間戳
                    nonceStr: 'nonceStr', // 必填,填任意非空字符串即可
                    signature: 'signature', // 必填,填任意非空字符串即可
                    jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], // 必填,隨意一個接口即可   
                    openTagList: ['wx-open-launch-weapp'], // 填入打開小程序的開放標籤名  
                })

然後把修改的代碼發佈到服務其中,在手機上看出調試效果(注意只能夠在真機上纔看到效果,瀏覽器和微信開發工具中都看不到效果

輸出結果爲:"errMsg":"config:ok"

這就奇怪了,這裏提示配置成功也就說明了,簽名什麼的都是生成成功了的。排除簽名生成錯誤和後端參數傳遞異常問題。

使用微信開發工具查看wx.config是否獲取到OpenTag

查看之前的一個配置成功的頁面微信開發工具控制檯輸出是:

獲取到了wx-open-launch-weapp的開發標籤權限

而我新加的這個頁面是沒有獲取到開發標籤的權限的,如下圖所示:

分析解決問題

  到這裏我們基本上可以看出來是沒有獲取到微信開放標籤(OpenTag)的權限,而開放標籤也是jweixin-1.6.0.js開始支持,於是我到瀏覽器頁面查看了js的加載資源,果然發現了問題所在,原來在之前的母版頁中有一個jweixin-1.3.0.js的SDK先加載了,所以導致了這個開發標籤獲取不到的問題,於是我將jweixin-1.3.0.js替換成jweixin-1.6.0.js就成功了!!!

invalid signature簽名錯誤排查:

假如你遇到簽名錯誤的情況,建議你按照以下順序進行排查。

  1. 確認簽名算法正確,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。

  2. 確認config中nonceStr(js中駝峯標準大寫S), timestamp與用以簽名中的對應noncestr, timestamp一致。

  3. 確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認),包括'http(s)://'部分,以及'?'後面的GET參數部分,但不包括'#'hash後面的部分。

  4. 確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。

  5. 確保一定緩存access_token和jsapi_ticket。

  6. 確保你獲取用來簽名的url是動態獲取的,動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到後臺簽名,前端需要用js獲取當前頁面除去'#'hash部分的鏈接(可用location.href.split('#')[0]獲取,而且需要encodeURIComponent),因爲頁面一旦分享,微信客戶端會在你的鏈接末尾加入其它參數,如果不是動態獲取當前鏈接,將導致分享後的頁面簽名失敗。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章