如需要在微信内心愿可能间接跳转到小程序里,比方从公众号页面跳转到小程序中去实现什么操作。这篇文章简略介绍一下微信给的一个跳转小程序的凋谢标签,从而实现微信内 H5 跳转小程序的性能。
首先须要配置公众号的 JS 平安域名,在“公众号设置”的“性能设置”里填写“JS 接口平安域名”。
另外这个性能须要微信的 JS SDK 1.6.0 版本 以上能力实现,须要引入 https://res.wx.qq.com/open/js…
1.6.0 版本内才减少了对应的开发标签,低于该版本的都无奈显示。
而后通过 config 接口注入权限验证配置并申请所需凋谢标签, 在 wx.config 里减少 openTagList 标签,内置两个凋谢标签 wx-open-launch-app 微信 h5 唤起本地曾经装置的 app,以及 wx-open-launch-weapp 微信 h5 唤起小程序,操作如下:
wx.config({
debug: false,
appId: data.appid,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [],
openTagList: [
'wx-open-launch-app',
'wx-open-launch-weapp'
]
});
而后就能够应用标签 <wx-open-launch-weapp></wx-open-launch-weapp> 在微信中关上对应的小程序了。
如上面的示例:
<wx-open-launch-weapp username="gh_**********" path="pages/indexpage/indexpage?pageType=1">
<script type="text/wxtag-template">
<div class="top-btn" data-key="1">
<div class="left-icon"><img id="iconImg" src=""alt=""></div>
<div class="right-text">
<div class="tit-name"> 我的设施 </div>
</div>
</div>
<style>
.top-btn{height:3.625rem;display: flex;padding:0 0 0 1rem;margin:1rem 0;align-items: center;border-right:1px solid #F5F5F5;}
.left-icon{width:3rem;height:3rem;}
#iconImg{width:3rem;height:3rem;}
.right-text{font-size: 1rem;color: #333333;padding-left:.5rem;}
</style>
</script>
</wx-open-launch-weapp>
须要留神的几点:
1、必须是已认证的服务号并且必须是已配置了 js 平安域名
2、wx-open-launch-weapp 标签有两个参数,username 是所需跳转的小程序原始 id,即小程序对应的以 gh_结尾的 id,path 为所需跳转的小程序内页面门路及参数,参数能够用 query 的模式传。
3、插槽模版及款式均须要通过 <script type=”text/wxtag-template”></script> 进行包裹,因为插槽中模版的款式是和页面隔离的,因而须要留神在插槽中定义模版的款式。
4、因为插槽是与页面隔离的,所以应用相对路径拿图片之类的资源不太好使,所以如下面例子中的 img 最初我是给了 src 一个 http 的资源。
5、页面中与布局和定位相干的款式,如 position: fixed; top -100; 等,尽量不要写在插槽模版的节点中,请申明在标签或其父节点上。
以上,就能实现在微信中关上小程序的性能,会在点击具体元素的时候,弹出“是否跳转到 XXX 小程序”的弹框,点击是就可能失常跳转。