vue下的h5页面实现点击图片跳转小程序

第一步:配置签名和申明openTagList

that.$api.getShareParam(params).then(data => {
wx.config({
debug: false,
appId: 'wxea734e16e936474c', // 和获取Ticke的必须一样------必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.noncestr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
// 需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
jsApiList: [
'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo',
'onMenuShareQZone', 'previewImage', 'hideOptionMenu', 'showOptionMenu','chooseWXPay',
'chooseImage','openLocation','openAddress'
],
openTagList: ['wx-open-launch-weapp']
})

第二步:vue中忽视这个标签

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

第三步:vue页面代码

<div id="jumpMini" v-show="!bool" style="flex:1;" class="flex">
<wx-open-launch-weapp
id="launch-btn"
username="gh_e4c3b71de209" //小程序原始id
path="/pages/index/index.html"//跳转小程序路径
style="width:100%"
>
<script type="text/wxtag-template">
<div class="flex_c a_center" style="display:flex;align-items:center;flex-direction:column;"><img src="http://study.gamachina.org/m/static/images/code.jpg" style="width: 100px; height: 100px; margin-bottom: 5px;"/><span style="font-size:12px;">题库练习小程序</span><span style="font-size:12px">点击进入</span></div>
</script>
</wx-open-launch-weapp>
</div>

posted @ 2020-11-24 17:48  岑丰涛  阅读(2222)  评论(0编辑  收藏  举报