H5跳小程序实现以及按钮样式问题解决方案

前几天工作中遇到了一个问题，需求是从HTTP协议的H5页面点广告直接跳到小程序，因为小程序都是HTTPS相关的所以无法跳转，最终我们的解决方案是做一个HTTPS协议的中间页，然后跳往指定小程序。这里我们需要一个wx-open-launch-weapp标签，里面放上一个按钮，然后进行相关配置，可以很简单的实现跳转到指定小程序，实现代码HTML部分如下

<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>

代码JS部分如下

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);
    });
};

到这里我们会得到一个默认样式的的按钮，讲真很丑，实际项目中我们不会放入一个默认样式的按钮，给大家看一下我们的设计图吧，以作参考
所以我们需要给默认的button换一个样式，这里尝试过在引入的css代码中以及在js代码中更改样式都无功而返，分析原因是在wx-open-launch-weapp 中的按钮，在经过template转移后在外面自动多加了一个div，这个div的样式无法被调节只能由内容撑起，于是我使用行内样式在wx-open-launch-weapp 中使用flex布局使里边的内容居中，然后使用行内样式调节button的样式，使之达到效果，HTML代码如下

  <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>

对应的图片如下图

这样一来，H5跳小程序以及按钮样式的问题就解决了，这里还存在一个小问题，按钮中的文字大小无法使用rem来写，只能使用px写死，如果有大佬发现更完美的解决方案欢迎指正。
新人第一帖求点赞，谢谢~