微信内H5页面跳转小程序

版本要求

微信版本要求为：7.0.12及以上。

系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

微信sdk 版本需1.6.0及以上

打开微信小程序开放标签

wx-open-launch-weapp

开放对象

已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

使用说明

所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。

如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过进行包裹。另外，对于具名插槽还需要通过slot属性声明插槽名称，下文标签插槽中的default插槽为默认插槽，可不声明插槽名称。

对于标签事件，均可通过event.detail获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代event.detail中的内容。

相关参数配置

属性

名称	必填	备注
username	是	所需跳转的小程序原始id，即小程序对应的以gh_开头的id
path	否	所需跳转的小程序内页面路径及参数

插槽

名称	必填	备注
default	是	跳转按钮模版及样式

<wx-open-launch-weapp id="launch-btn" username="gh_ce3adf9da091" path="pages/index/index"></wx-open-launch-weapp>

如果在Vue项目里使用，因为 wx-open-launch-weapp 标签不被vue识别
须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。
需在main.js里增加以下代码配置（忽略此标签）
Vue.config.ignoredElements = [‘wx-open-launch-weapp’]

完整代码demo可关注微信公众号
回复【H5跳转小程序-jq】获取Jquery版demo
回复【H5跳转小程序-vue】获取Vue版demo

如果觉得有用随手点个赞吧，谢谢

关注我，不定时分享技术干货~