記錄一下uniapp 商城專案完成微信分享功能的過程
阿新 • • 發佈:2020-12-15
專案需求: 使用者分享商品至微信或朋友圈, 點選了分享的其他使用者如果安裝了客戶端就喚起APP開啟商品詳情,沒有安裝APP的使用者則使用分享人的邀請碼進行註冊。
需求分析:使用APi(uni.share)進行分享至微信或朋友圈,詳情見uni.share(OBJECT);,再引導使用者使用瀏覽器開啟外部H5頁面(微信內部瀏覽器過濾掉了跳轉至第三方的UrlSchemes),APP內判斷引數跳轉具體商品詳情頁。
技術難點:(自己技術不好,所以才是難點)因為我們專案是IOS和安卓的,所以統一使用UrlSchemes方式喚醒APP。詳情見UrlSchemes教程。
遇到問題:
1.喚起APP時發現只有IOS和安卓原生瀏覽器能成功喚起,部分瀏覽器(QQ瀏覽器和UC瀏覽器)無響應 。
2.喚起APP開啟商品詳情頁後,最小化APP,從後臺再切入APP後會重複開啟商品詳情頁。
解決辦法:
1.最開始思路是進入H5頁面就執行喚起APP方法,結果發現只有原生瀏覽器才有響應。經過反覆試驗,加了個500毫秒的定時器解決問題(6s的QQ瀏覽器還是過不去的檻),原理我也不太清楚。上程式碼,僅供參考(如果有大佬看見問題,能指點一下是最好的)。
onLoad() { this.isWX(); //判斷是否微信瀏覽器 this.inviteCode = this.getQueryString('invite_code') //獲取邀請碼 setTimeout(() => {this.openApp(); }, 500) //喚起APP },
openApp() { let appName = '*****' //自定義的APP scheme名稱 let url = appName + window.location.href.slice(window.location.href.indexOf('://')) this.scheme = url; window.location.href = this.scheme; },
2.APP接受引數的方法是根據官方文件走的,因為是寫在APP.vue的onshow函式裡邊 所以導致每次開啟APP都會執行一次跳轉方法。所以我加了一個變數,如果接參成功、跳轉之前將這個引數賦值給新定義的變數。每次進入跳轉方法之前,先判斷這個變數是否與接收引數是否一致。不一致就跳轉,一致就不執行跳轉。初步解決問題(自測了兩次,感覺不踏實)上程式碼
onShow: function() { //#ifdef APP-PLUS var args = plus.runtime.arguments; if (args!==isCome) { if (args) { isCome = args let productId = this.getQueryVariable(args, 'productId') //取值 productId = productId.replace('#/', '')//去除url末尾字元 if (productId) { let params = { productId: productId }; this.$mRouter.push({ route: this.$mRoutesConfig.product, query: params }); } } } //#endif },