微信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标签 要么直接行间样式。