前几天工作中遇到了一个问题,需求是从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写死,如果有大佬发现更完美的解决方案欢迎指正。
新人第一帖求点赞,谢谢~