What I've been doing recently is a function of the H5 page Jump applet. What I'm talking about below is the problems and solutions I encountered in the project. I don't know whether it will help you. If there is a better way, we can put forward to discuss and learn from each other. In this way, we can make rapid progress

Official open label documents – read the documents several times and pay attention to the details
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E5%BC%80%E6%94%BE%E6%A0%87%E7%AD%BE

H5 page - html related questions and answers

• username="gh_xxxxxxxx" this is the original id of the applet
• path="/pages/index/index.html" this is the page address to jump to the applet
• < script type = "text / wxtag template" > < / script > I use script. I don't know if it's in vue. Using template doesn't display buttons in developer tools
• < style > < / style > this is the writing style
• There may be small icons in the layout. The local pictures can't come out. I use the online url. Just convert the picture address into url directly. Website: https://riyugo.com/

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="/pages/index/index.html" @launch="handleLaunchFn" @error="handleErrorFn">
    <script type="text/wxtag-template">
        <style>
        	This is the following style
        </style>
        <li class="main-item">
    		<img src="https://riyugo.com/o/210510/s7smlv.png" alt="">
    		<p>Jump applet button</p>
		</li>
    </script>
</wx-open-launch-weapp>

H5 page -js related questions and answers

First, file is introduced: jump sdk, jump by official account.

// Introducing js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
// sdk file
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

Judge whether it is wechat environment

isMiniPage() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
        // Under wechat environment
    } else {
        // Non wechat environment logic
    }
}

Configure config information, which is configured with official account config information.

wx.config({
    debug: false, // Turn on debugging mode
    appId: result.AppId, // Required, the only sign of official account.
    timestamp: result.TimeStamp, // Required, time stamp to generate signature
    nonceStr: result.NonceStr, // Required, generate random string of signature
    signature: result.Signature, // Required, signature
    jsApiList: ["openLocation"], // Required, list of JS interfaces to be used
    openTagList: ['wx-open-launch-weapp'] // Optional, the list of open tags that need to be used. What is written here is the name of the jump applet
});
// The verification is processed successfully through the ready interface
wx.ready(function () {
    console.log('success')
});
// Failed to process validation through the error interface
wx.error(function (res) {
    console.log('error', res)
});

// Triggered after the user clicks the jump button and operates the confirmation pop-up window
handleLaunchFn(e) {
    console.log(e, 'handleLaunchFn')
},
// An error occurred after the user clicked the jump button
handleErrorFn(e) {
    console.log('handleErrorFn', e.detail);
}

WeChat small program and official account background configuration

These are some of the parameters I configured. I still have to read the error report and check the document slowly to modify it

JS SDK version
config information is official account.
What is the official account is related to the project.

Set js security domain name
In the background of public number settings, the corresponding domain name is the official account of the official account. See the detailed instructions above, do not carry http/https, and download the files to the root directory.

Applet original id viewing location
Background of login applet - Settings - basic settings - account information at the bottom - original ID

IP whitelist
The configuration is local IP. You can search the local IP directly
Debugging on the server requires putting the domain name in the IP white list. The specific settings are on the official account. Note that it will not jump out of the 40048 error code.

Summary

The above is the problem I encountered. Because there are many changes, I forgot. Welcome to ask questions and solve them together~
If there is something wrong, please inform me to correct it quickly~
Only by learning from each other can we make continuous progress~
I hope I can help you~