從微信瀏覽器打開APP 【uni-app】

一、引入配置文件  

1.引入微信js文件，可下載后引入

 

 

 

 

 

當報錯信息是 cannot read title of undefined 時 解決方法

 

2.引入 sha1 文件  （如果時后端處理 可以不用引入）

二、 通過config接口注入權限驗證配置並申請所需開放標簽

如果是后端直接返回wx.config的參數可不需要(1、2、3 步驟)

1.生成簽名的時間戳

let timestamp = Math.round(new Date() / 1000)
this.time = timestamp.toString()

2. 生成簽名的隨機串

getNum(){
var chars = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
var nums="";
for(var i=0;i<16;i++){
var id = parseInt(Math.random()*35);
nums+=chars[id];
}
this.nums = nums
}

3. 處理簽名

//這里的axios需要引入 ，需要用的話自行引入。
//這里請求的兩個接口都做好了服務器代理，代理的具體做法網上有很多，在配置中加一段代碼即可
//需要注意的是：我建議使用localStorage來存儲token

axios.get('/prefix/cgi-bin/token?grant_type=client_credential&appid=wxcdbe7983be8fb746&secret=a61fc54202debafefd04e37d7399b39e').then(res => {

localStorage.setItem('tokent', res.data.access_token)
axios.get('/prefix/cgi-bin/ticket/getticket?access_token='+localStorage.getItem('tokent')+'&type=jsapi').then(ret => {
localStorage.setItem('ticket', ret.data.ticket)
})
})


// 處理 簽名
let dataBeforeSign = {
"noncestr": this.nums,
"jsapi_ticket": ticket,
"timestamp": this.time,
// "url": encodeURIComponent(urls[0]) // 傳給后端 才需要 encodeURIComponent
"url": urls[0]
}
console.log('dataBeforeSign',dataBeforeSign)
let arr = [];
for (var key in dataBeforeSign) {
arr.push(key)
}
arr.sort();
let str = '';
for (var i in arr) {
str += arr[i] + "=" + dataBeforeSign[arr[i]] + "&"
}
let stringA = str.substr(0, str.length - 1)
// 轉成 sha1編碼
this.signature = sha1(stringA)

4.wx.con    wx.config({

 　　　
　　　　　　wx.config({
　　　　　　　　　　　　debug: false, 　　　　appId: '1111111111',  // 公眾號id 不是開放平台的appid
             　　　　timestamp: this.time,  // 時間戳
             　　　　nonceStr: this.nums,  // 隨機數
             　　　　signature: this.signature, jsApiList: ['wx-open-launch-app'], // 微信瀏覽器跳轉APP
             　　　　openTagList: ['wx-open-launch-app'] 　　});  wx.ready(function (res) { console.log(res) }); // 打開調試時報錯信息
 wx.error(function (res) { console.log(res) }); var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); // 當打開APP失敗時 跳轉騰訊的微鏈接 其他下載鏈接不能跳轉
              btn.addEventListener('error', function (e) { if(model === 'iPhone'){ // 蘋果微鏈接 }else{ // app下載微鏈接 } });

三、通過開放標簽跳轉App

  <view class="bar-content-button" v-if="isWeixin">
        //這的appid是開放平台的appid
        <wx-open-launch-app
         id="launch-btn"
         appid="1111111111" 
         :extinfo="extinfo"
        >
        
        <script type="text/wxtag-template">
            <style>
          .btn { line-height: 40px; font-size:16px; color:#333; background:#fff; border: none;  width: 180px; height: 40px; border-radius: 10px; font-weight: 600;display:block;margin:0 auto}
          </style>
            <button id="btn1" class="btn">打開/下載App</button>
            </script>
        </wx-open-launch-app>
    </view>

四、在APP 中接收參數 - 在APP.vue

plus.runtime.arguments 獲取H5傳遞的參數