WeChat applet learning record 8: H5 web page jump applet (WeChat open label, wx-open-launch-weapp button not displayed, noPermissionJsApi)

Wechat mini program learning practice series catalog

1. WeChat applet learning record 7 (H5 embedded in applet, get WeChat delivery address, array object url pass value, js get url parameter)
2. WeChat applet learning record 6 (Baidu longitude and latitude collection, manual adjustment of accuracy, H5 embedded applet, Baidu map jsAPI, real-time positioning, H5 update and automatic refresh)
3. WeChat applet learning record 5 (H5 embedded applet, map component, map calling function, Tencent Baidu Gaode navigation page, return to web-view page)
4. Wechat mini program learning record 4 (pre-development preparation, necessary certification materials, official account associated mini program, mini program release, development configuration, server domain name, business domain name, location interface setting)
5. WeChat applet learning record 3 (environmental deployment, Baidu map WeChat applet, click to replace icon, pop-up window information, navigation, support Tencent Baidu Gaode map call)
6. WeChat applet learning record 2 (pull down to refresh, pull down to load more, applet events, PHP backend code, refresh without data solution)
7. WeChat applet learning record 1 (wxml document, introduction of weui, two-way data binding, submission of form to backend)

Jump applet: wx-open-launch-weapp

It is used to provide a button on the page that can jump to the specified applet. After using this tag, users need to click the tag button in the webpage to jump to the applet.

Official document portal

1. Environment deployment

In the browser environment, calling the WeChat applet needs to be realized through the open capabilities provided by WeChat. The following is a common method of invoking a WeChat Mini Program:

1. First, make sure that your web page has introduced the JavaScript SDK provided by WeChat, usually https://res.wx.qq.com/open/js/jweixin-1.6.0.js.

    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. In your web page, write JavaScript code to initialize WeChat JS-SDK and check whether WeChat JS-SDK can be used:

wx.config({
    
    
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']
});

wx.ready(function () {
    
    
  // 在微信JS-SDK准备就绪后，可以调用微信相关的功能
});

wx.error(function (res) {
    
    
  // 如果初始化失败，可以在这里处理错误
});

3. Configure the authorized domain name of the web page of the WeChat platform. In the Mini Program settings of the WeChat public platform, find "Development-Development Settings", add your website domain name to "Webpage Authorized Domain Name", and save the settings.

2. Open the applet

To jump to the applet by clicking a link or button, you can add a link or button element to the HTML, and use an event listener (such as a click event) to trigger the logic of opening the applet. Here is sample code:

JavaScript：

<wx-open-launch-weapp
        id="launch-btn"
        username="gh_****"
        path="pages/index/index">
    <script type="text/wxtag-template">
        <button style="display: inline-block;padding: 12px;width: 200px;height: 40px;">打开小程序</button>
    </script>
</wx-open-launch-weapp>

    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
    
    
        console.log('success');
    });
    btn.addEventListener('error', function (e) {
    
    
        console.log('fail', e.detail);
    });

3. Pit avoidance guide

1.noPermissionJsApi

Debugging found that the ios pop-up prompt { “noPermissionJsApi”: [], “errMsg”: “config:ok” } means the configuration is successful.

• PC-side WeChat browser environment
  
• IOS WeChat browser environment
  
  Common situations:
• Enter a url directly in the WeChat chat, and there will be noPermissionJsApi problem when clicking the link.
• There is no problem when you scan to enter or directly click on the official WeChat share link to enter or click on the menu at the bottom of the official account to enter.
• The official did not make a clear statement, guessing it should be a protection mechanism for WeChat's uncertain links to external links.

2. The imported version of the JS file

http://res.wx.qq.com/open/js/jweixin-1.6.0.js (supports https) If you need to further improve service stability, when the above resources are not accessible, you can change to visit: http:// res2.wx.qq.com/open/js/jweixin-1.6.0.js (support https);
WeChat open label version must be 1.6.0

3. jsApiList[]

Mandatory, the list of JS interfaces that need to be used, at least one must be written here, even if you don't want to use any of them.

4. The wx-open-launch-weapp button is not displayed

There are various solutions for the wx-open-launch-weapp button not showing up. In this case, because the port was wrongly written, the wx-open-launch-app of the official document was directly copied.

 openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']

---

@ Leak sometimes