h5网页浏览器跳转微信小程序开放标签如何使用?

很多人问了如何外部渠道如短信 ,抖音,头条这些app 唤起打开微信小程序并且代码如何使用,原理我这边总结了一些腾讯开放规则,来说下基本原理。
概述
微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。
此文档面向网页开发者,介绍微信开放标签如何使用及相关注意事项。需要注意的是,微信开放标签有最低的微信版本要求,以及最低的系统版本要求。
微信版本要求为:7.0.12及以上
系统版本要求为:iOS 10.3及以上、Android 5.0及以上

使用步骤
微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤。如果是公众号身份的网页,需要绑定安全域名,如果是使用小程序云开发静态网站托管的小程序网页,则不需绑定安全域名即可直接使用(即跳过下面"步骤一:绑定安全域名")。
1. 绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2. 引入JS文件
在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:
http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
备注:支持使用 AMD/CMD 标准模块加载方法加载。
3. 通过config接口注入权限验证配置并申请所需开放标签
使用说明
所有开放标签都能像普通的HTML标签一样在页面中直接使用,不需要再进行额外的处理。
如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过进行包裹。对于Vue等视图框架,为了避免template标签冲突的问题,可使用进行代替,来包裹插槽模版和样式。另外,对于具名插槽还需要通过slot属性声明插槽名称,下文标签插槽中的default插槽为默认插槽,可不声明插槽名称。
对于标签事件,均可通过event.detail获得详细信息。如果无特殊说明,下文标签事件说明中的返回值均指代event.detail中的内容。

另外,需要注意以下几点:
页面中与布局和定位相关的样式,如position: fixed; top -100;等,尽量不要写在插槽模版的节点中,请声明在标签或其父节点上; 对于有CSP要求的页面,需要添加白名单frame-src https://*.qq.com webcompt:,才能在页面中正常使用开放标签。 开放标签
跳转小程序:wx-open-launch-weapp 用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。
更多技术问题具体可以参照跳转接口演示:https://www.jumpwx.com/

添加扫码微信号:wxtz2023 QQ客服:10572137
提供全套解决外部引流跳转微信服务,支持头条,知乎,微博,各大搜索引擎,快手,抖音,小红书app,短信h5,等任意外部渠道跳转微信打开小程序,公众号关注,公众号文章链接,任意站h5落地页,个人微信号二维码长按识别等。