前言
需求场景:通过微信官方提供的开放标签,开发者可以使用此标签进行h5网页跳转到微信小程序页面。
步骤
1、绑定域名
登录微信公众平台,设置
JS接口安全域名
。
2、引入JS文件(1.6.0版本)
3、通过config接口注入权限验证配置并申请所需开放标签
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
复制代码
4、开放标签
官方demo
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
复制代码
注意
path
路径必须带.html(官方没有说明)- 官方解释,对于
Vue
等视图框架,为了避免template
标签冲突的问题,可使用<script type="text/wxtag-template"><script>
进行代替,来包裹插槽模版和样式。
改写demo
<wx-open-launch-weapp id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc">
<script type="text/wxtag-template">
<div class="btn">
打开小程序
</div>
</script>
</wx-open-launch-weapp>
})
复制代码
自定义样式问题
在开放标签里引入样式,发现不生效,于是想到了定位的方式,透明度设为0。
#launch-btn{
width: 8.9333rem;
height: 4.56rem;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity: 0;
}
复制代码
即使用了定位的方式,发现样式无法撑开,最后用了最老土的方式,用文字撑开。
<wx-open-launch-weapp id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc">
<script type="text/wxtag-template">
<div class="btn">
打开小程序 打开小程序 打开小程序 打开小程序 打开小程序
</div>
</script>
</wx-open-launch-weapp>
})
复制代码
总结
- 需要配置JS接口安全域名
- jssdk的版本1.6.0
- path需要加.html
- 自定义样式问题,这里使用定位的方式,并用文字撑开了高度