A few days ago, I encountered a problem at work. The requirement was to jump directly to the applet from the H5 page of the HTTP protocol. Because the applets were all related to HTTPS, they could not jump. In the end, our solution was to make an HTTPS protocol. Intermediate page, and then jump to the specified applet. Here we need a wx-open-launch-weapp tag, put a button in it, and then perform related configurations, which can easily jump to the specified applet. The HTML part of the implementation code is as follows
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxxxxx"
path="pages/index/index.html">
<template>
<div> <button class="wx-btn">跳转小程序</button> </div>
</template>
</wx-open-launch-weapp>
The JS part of the code is as follows
window.onload=function () {
initWeixin(function(){
console.log("666")
});
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
};
Here we will get a button with a default style, which is really ugly. We will not put a button with a default style in the actual project. Let’s show you our design drawing for reference, so we need to give the 
default Change the style of the button. I have tried to change the style in the imported css code and in the js code. The reason is that the button in wx-open-launch-weapp is automatically displayed outside after the template transfer. An extra div is added, the style of this div cannot be adjusted and can only be supported by the content, so I use the inline style to use the flex layout in wx-open-launch-weapp to center the content inside, and then use the inline style to adjust the style of the button , to achieve the effect, the HTML code is as follows
<div id="jump_tab">
<span class="jump_btn" id="btn1">
<!-- 这里填写小程序的原始ID -->
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxxxxx"
path="/pages/index/page1.html"
style="display: flex;width:100%;height:100%;
justify-content: center;align-items: center;">
<template>
<button
style="width: 100%;height: 100%;color:#ff974f;
background-color: rgba(0,0,0,0);
border: none;font-size: 18px"
class="btn">装修设计
</button>
</template>
</wx-open-launch-weapp>
</span>
<span class="jump_btn" id="btn2">
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxxxxx"
path="/pages/index/page2.html"
style="display: flex;width:100%;height:100%;
justify-content: center;align-items: center;">
<template>
<button
style="width: 100%;height: 100%;color:#ff974f;
background-color: rgba(0,0,0,0);
border: none;font-size:18px"
class="btn">建材家居
</button>
</template>
</wx-open-launch-weapp>
</span>
</div>
The corresponding picture is as shown in the figure below
. In this way, the problem of H5 jumping applets and button styles is solved. There is still a small problem here. The text size in the button cannot be written in rem, but can only be written in px. If there is a large If you find a more perfect solution, please correct me.
Please like the first post of a newcomer, thank you~