1. 程式人生 > 實用技巧 >記錄一下uniapp 商城專案完成微信分享功能的過程

記錄一下uniapp 商城專案完成微信分享功能的過程

專案需求: 使用者分享商品至微信或朋友圈, 點選了分享的其他使用者如果安裝了客戶端就喚起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
		},