在 react 項(xiàng)目中使用微信 JS-SDK 填坑筆記


UPDATE

現(xiàn)在 android 的微信(6.3.31)已經(jīng)修好了,需要按照文檔說(shuō)的傳入當(dāng)前頁(yè)面的url,也就是沒(méi)吃豆重新 config 一次,但是蘋(píng)果的微信只要在進(jìn)入頁(yè)面的時(shí)候 config 一次就可以了,微信管接口的估計(jì)是個(gè)錘子。


在做圖片上傳的時(shí)候,圖片太大老是上傳失敗,在產(chǎn)品汪(??)的建議下用了微信的 JS-SDK,微信會(huì)處理壓縮,而且還有順帶連預(yù)覽也解決了,好開(kāi)心。

后來(lái)一發(fā)布,整組人感覺(jué)不好了。主要問(wèn)題出現(xiàn)在 url 的配置上。

微信的官方文檔是這樣說(shuō)的:

同一個(gè)url僅需調(diào)用一次,對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶(hù)端不支持pushState的H5新特性,所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗,此問(wèn)題會(huì)在Android6.2中修復(fù)

實(shí)際測(cè)試中發(fā)現(xiàn),配置的 url 并不是調(diào)用微信 js 的時(shí)候所在頁(yè)面的地址(也就是通過(guò) location.href 獲得的地址),而是在進(jìn)入到網(wǎng)站的第一個(gè)頁(yè)面的地址,這是第一個(gè)問(wèn)題

第二問(wèn)題是在蘋(píng)果手機(jī)的微信上面,只要調(diào)用 wx.config 一次就可以了,但是在 android 的手機(jī),在頁(yè)面跳轉(zhuǎn)之后,要重新調(diào)用 wx.config(url 依然是進(jìn)入網(wǎng)站的第一個(gè)頁(yè)面的地址,要保存在一個(gè)變量里面),"X5 瀏覽器", 我他媽就呵呵了。如果用了 react-router 的話(huà),直接在 Route 組件上綁定一個(gè) onChange 方法就可以了

function routeChange(pre, next) {  wx.config(getWxConfig());}

<Route path="/react" onChange={routeChange}>
  <YourRouteConfig/>
</Route>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容