微信H5跳转小程序教程分享

文章目录

最近微信官方放开了从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标签 要么直接行间样式。

1. 全库网所有资源均来源于用户上传和网络,如有侵权请发送邮箱联系站长处理!
2. 如果你有好的资源或者原创教程,可以到审核区投稿发布,分享会有钻石奖励和额外收入!
3. 全库网所有的源码、教程等其它资源均源于用户上传发布,如有疑问,可直接联系发布作者处理
4. 如有链接无法下载、失效或广告,请联系全库网管理员核实处理!
5. 通过发布原创教学视频或优质源码资源可以免费获得全库网站内SVIP会员噢
6.全库网管理猿邮箱地址:admin@qkuser.com,我们会在收到您的邮件后三个工作日内完成处理!
7. 如遇到加密压缩包,默认解压密码为"qkuser.com",如遇到无法解压的请联系管理员!

全库网 » 微信H5跳转小程序教程分享
禁止此类操作!