微信H5頁面喚醒APP並傳參跳轉uniapp

主要實現是利用微信內置瀏覽器支持的<wx-open-launch-app>開放標簽可以讓你的H5網頁拉起APP

 

在鏈接https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html中要看

1. 使用說明
2. 關聯說明
3. 設置入口
4. 綁定域名和移動應用
5. 接入微信開放標簽

 

 在鏈接https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html中要看

1. 綁定域名
2. 引入JS文件
3. 通過config接口注入權限驗證配置並申請所需開放標簽
4. 通過ready接口處理成功驗證
5. 通過error接口處理失敗驗證

 

代碼示例 :

 

在H5頁面中添加點擊跳轉的元素　

<wx-open-launch-app id="launch-btn" appid="appid" extinfo="goods/1234"> 　　//appid是在微信中綁定的APPId , extinfo為打開APP時傳給APP的值,比如我傳的是商品這個單詞和商品id,用"/"隔開方便截取 <template>
         <p style="color:#fff;background-color: #0095FF;padding:5px 15px;"> APP內打開 </p>
     </template>
</wx-open-launch-app

 

在JS中

<script>
  var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { //如果打開失敗可以跳轉到提醒下載APP的頁面(展示二維碼,長按識別公眾號下載)
    console.log('fail', e.detail); }); </script>

注意:

如果所使用的標簽允許提供插槽，由於插槽中模版的樣式是和頁面隔離的，因此需要注意在插槽中定義模版的樣式。插槽模版及樣式均需要通過<template></template>進行包裹。對於Vue等視圖框架，為了避免template標簽沖突的問題，可使用<script type="text/wxtag-template"><script>進行代替，來包裹插槽模版和樣式。另外，對於具名插槽還需要通過slot屬性聲明插槽名稱，下文標簽插槽中的default插槽為默認插槽，可不聲明插槽名稱

詳見https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

 

在uniapp的app.vue的onLaunch里寫

this.checkArguments(); plus.globalEvent.addEventListener('newintent', e => { 　　this.checkArguments(); // 檢測啟動參數

　});

 

 

在app.vue的methods中添加方法

checkArguments() { console.log('runtime.launcher: ' + plus.runtime.launcher); // 判斷APP打開方式 miniProgram為微信小程序打開
            if (plus.runtime.launcher == 'miniProgram') { // plus.runtime.argumrnts為打開時APP傳的值(<wx-open-launch-app>中的extinfo),可以傳字符串通過符號截取判斷類型
 console.log(plus.runtime.arguments); if (plus.runtime.arguments) { 　　　　　　　　　　　　//我截取了字符串,判斷是商品並且根據ID跳轉到商品詳情頁
                    var str = plus.runtime.arguments; var arr = str.split('/'); var id = arr[1]; if (arr[0] == 'goods') { 　　　　　　　　　　　　　　//跳轉到商品詳情頁,注意pages前面的"/"不要忘記,否則會造成無法跳轉。使用navigateTo跳轉到頁面會有返回按鈕,點擊返回到首頁
 uni.navigateTo({ url: '/pages/goods/goods?id=' + id }); } } } }