最近微信官方放开了从H5页面跳转小程序的能力,业务需要就刚好写了个需求,分享下这个新鲜的玩意。
这里默认已经做好微信公众平台的相关配置以及安全域名配置,wx.config也配置完成
一:引入1.6.0的js-sdk文件
引入如下JS文件: http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
二:wx.config里写入开放标签列表
需要jssdk 的标签;来触发跳转,所以需要添加如下:
wx.config({
...
openTagList:['wx-open-launch-weapp']
})
三:配置wx-open-launch-weapp标签
实例看一看呐:
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxx" path="你的小程序路径">
<template>
<div>
<div class="adv_img">
<img src="'+adList[i].ad_img+'" />
</div>
<p class="adv_word">跳转小程序</p>
</div>
</template>
</wx-open-launch-weapp>
标签内的username代表小程序的原始id、path代表的是跳转的路径
实测都能跳转,普通页面、页面带参、甚至直播间都能直接跳
四:注意问题
标签外部的css无法对template里面的元素生效,要么在里面写style标签 要么直接行间样式。