微信内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中的内容。

错误提示

若跳转时出现以下页面,表示网页绑定的服务号或小程序无权限,请检查是否符合上述开放对象条件。

image.png

相关参数配置

属性

名称必填备注
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

公众号二维码.jpg

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

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