The WeChat public account correctly uses the open label wx-open-launch-weapp

1. Bind a secure domain name

Log in to the WeChat public platform, enter the "Function Settings" of the "Official Account Settings" and fill in the "JS interface security domain name";

2. Import JS files

Engineering projects can be downloaded through npm: weixin-js-sdk, version 1.6.0 or higher is required

npm install [email protected]

Introduce on current page

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

3. Apply for an open label through the config interface

created() {
    wx.config({
      debug: false, // 开启调试模式
      appId: '', // 必填，公众号的唯一标识
      timestamp: '', // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: ['chooseImage'], // 必填，需要使用的JS接口列表，填写一个当前公众号有权限的接口
      openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表
    });
}

4. Register components

Direct use in vue will report an error of unregistered components, which needs to be registered in the main.js file

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

5. Get started

wx-open-launch-weapp tag css style ideas:

　　1) Add a label at the same level as wx-open-launch-weapp, the style is written on the label, the wx-open-launch-weapp label is absolutely positioned, and the transparency is 0;

　　2) The outer label is relatively positioned, and the width and height are set to fill the box with 100% width and height of the wx-open-launch-weapp label;

　　3) Write inline styles on wx-open-launch-weapp;

<view class="wxbtn">
    <view class="ct" :style="动态样式">小程序领劵</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目标小程序跳转地址"
        >
            <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. Rendering

7. IOS compatibility issues

　　7.1. On the ios model, if you can’t load it for the first time, you can perform a default refresh operation on the current page (there is no better solution for the time being);

　　7.2. If you dynamically add some parameters to the browser url, the signature failure problem may occur on ios. You can solve this problem by adding parameters and then jumping in the method you jump to (this problem The reason is that when you jump to the current page, your parameters may be added asynchronously. When the parameters have not been added, the current address is sent to WeChat. After you add parameters asynchronously, the address at this time is the same as the one sent to WeChat. If the address is inconsistent, a signature error will occur. "This situation will not occur in the Android system");

8. Test

Finally, when you need to test, you must visit your online address on the real machine to test successfully . You can’t test it on WeChat developer tools and browsers, and you can’t test the local address on the real machine.