【H5 jump applet 】

Recently made a requirement to jump from H5 applet. Wechat abuse me thousands of times, I treat wechat as my first love.

Make a note of it when you’re done

WeChat official documentation: developers.weixin.qq.com/doc/offiacc…

It is mainly realized through wechat open tag WX-open-launch-appactivip

Open to:

• Authenticated service number, service number binding “JS interface security domain name” under the web page can use this label jump to any legal compliance small program.
• Authenticated non-individual subject applets, using applets cloud developed static web hosting bound under the domain name of the web page, can use this label jump to any legal compliance applets.

Concrete implementation, take React as an example

1. Binding domain

Log in to the wechat public platform, enter the “Public Account Setting”, and fill in the “JS Interface security Domain name” in the “Function Setting”.

2. Import JS files

Need to call in JS interface pages to introduce the following JS file: res.wx.qq.com/open/js/jwe… (Support HTTPS); For further improve service stability, when the resource is inaccessible, can change access: res2.wx.qq.com/open/js/jwe… (HTTPS is supported)

This example is in the <%document.ejs file

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

3. The config interface injection permission is used to verify the configuration and apply for open labels. The ready interface succeeds in the verification, and the error interface fails in the verification

In ComponentDidMount code is as follows

$.ajax({
        type: 'POST'.data: {url: window.location.href},
        url: 'https://**.**.cn/api/backend-seller/wechat/open/sign'.// Specify the data to be sent to the server along with the request;
        dataType: "json".success: function (data) {
            const config = {
                appId: "wx********".// Mandatory, the unique identifier of the official number
                timestamp: data.data.timestamp, // Required to generate a timestamp for the signature
                onceStr: data.data.nonceStr, // Mandatory to generate a random string of signatures
                signature: data.data.signature, // Required, signature
            }
            window.wx.config({ ... config,jsApiList: ['chooseImage'].// Android must fill in one, random can be
                openTagList: ['wx-open-launch-weapp'].// Fill in the name of the open TAB of the open applet
            })
            window.wx.ready(function () {
                var btn = document.getElementById('lottery-btn');
                 btn.addEventListener('success'.function (e) {
                    console.log('success', e.detail);
                 });
                btn.addEventListener('error'.function (e) {
                    console.log('fail', e.detail); }); })}})Copy the code

4. Use tags in JSX

<wx-open-launch-weapp
    id="lottery-btn"
    username="gh_******"// Required to jump to the small program originalID, on the wechat public platform-Set up the-Basic setup-Account information)path="pages/home/index? user=123&action=abc"// Optional, page path and parameters in the applet to jump to >
    <script type="text/wxtag-template">
        <img style={{width:'48px',height:'66px',marginRight:'25px'}} src='https://onebillion-cloud-prod.oss-cn-shanghai.aliyuncs.com/1625897988309.png' alt=' ' />
    </script>
</wx-open-launch-weapp>
Copy the code

Pay attention to the point

1. The appId in config is the official number rather than the appId of the jump small program
2. A page can have multiple jump buttons at the same time, but the config is bound to the label ID
3. wx-open-launch-weappThe style of the template in the slot is isolated from the page, and the label style cannot be resolvedrem, want to usepxSaid size
4. The label itself can be styled, so set itabsolute, the outside is written in the normal way, but one more stylerelativeCan be
5. Percentages cannot be used for the internal height and the true height needs to be passed in, so the scenario where the external height is not known is not suitable