1.綁定安全域名

登錄微信公眾平臺，進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”；

2.引入JS文件

工程化項目可通過npm下載：weixin-js-sdk，需要1.6.0以上版本

npm install weixin-js-sdk@1.6.0

在當(dāng)前頁面引入

const wx = require('weixin-js-sdk');

3.通過config接口申請開放標(biāo)簽

created() {
    wx.config({
      debug: false, // 開啟調(diào)試模式
      appId: '', // 必填，公眾號的唯一標(biāo)識
      timestamp: '', // 必填，生成簽名的時間戳
      nonceStr: '', // 必填，生成簽名的隨機串
      signature: '',// 必填，簽名
      jsApiList: ['chooseImage'], // 必填，需要使用的JS接口列表，填寫一個當(dāng)前公眾號有權(quán)限的接口
      openTagList: ['wx-open-launch-weapp'] // 可選，需要使用的開放標(biāo)簽列表
    });
}

4.注冊組件

在vue中直接使用會報未注冊組件的錯誤，需要在main.js文件中注冊該組件

Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']

5.開始使用

wx-open-launch-weapp標(biāo)簽css樣式思路：

　　1）在wx-open-launch-weapp同級添加一個標(biāo)簽，樣式寫在該標(biāo)簽上，wx-open-launch-weapp標(biāo)簽絕對定位，透明度為0；

　　2）外層標(biāo)簽相對定位，設(shè)置寬高是為了wx-open-launch-weapp標(biāo)簽的100%寬高撐滿該盒子；

　　3）在wx-open-launch-weapp上寫行內(nèi)樣式；

<view class="wxbtn">
    <view class="ct" :style="動態(tài)樣式">小程序領(lǐng)劵</view>
    <view>
        <wx-open-launch-weapp
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: inline-block; border: none;"
            username="gh_xxxxxxx原始ID"
            path="pages/index/index目標(biāo)小程序跳轉(zhuǎn)地址"
        >
            <script type="text/wxtag-template">
                <style>
                    .btn {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                    }
                </style>
                <button class="btn"></button>
            </script>
        </wx-open-launch-weapp>
    </view>
</view>

.wxbtn{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    text-align: center;
    color: #FFFFFF;
    font-weight: 500;
    position: relative;
    background-color: #f60;
    .ct{
        width: 100%;
        height: 100%;
        border-radius: 40rpx;
        font-size: 28rpx;
    }
}

6.效果圖

7.IOS兼容性問題

　　7.1、在ios機型上，首次進(jìn)入加載不出來，可在當(dāng)前頁面執(zhí)行一次默認(rèn)刷新操作（暫時沒有更好的解決方案）;

　　7.2、如果你動態(tài)向瀏覽器url上添加了一些參數(shù)，在ios上面可能會出現(xiàn)簽名失敗的問題，可以在你跳轉(zhuǎn)的方法上，添加參數(shù)之后再進(jìn)行跳轉(zhuǎn)，可解決這個問題（這個問題的原因是，跳轉(zhuǎn)到當(dāng)前頁時，你的參數(shù)可能是異步添加的，參數(shù)還未添加時，發(fā)送給微信的是當(dāng)前地址，等你異步添加參數(shù)后，這時候的地址與發(fā)送給微信的地址不一致，就會出現(xiàn)簽名錯誤情況?！鞍沧肯到y(tǒng)不會出現(xiàn)該情況”）；

8.測試

最后，需要測試時，必須在真機上訪問你線上地址才可以測試成功，微信開發(fā)者工具與瀏覽器上測試不了，真機測試本地地址也是不可以的。文章來源地址http://www.zghlxwxcb.cn/news/detail-472964.html