H5跳转小程序(微信开放标签使用)

2024-05-10 17:36:04

今天七月，微信终于提供了H5跳转小程序的功能；果然方便了许多；限制条件也比较宽松吧。

限制条件：

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

使用步骤：

微信开放标签使用步骤与微信JS-SDK类似，也需要引入JS文件等步骤。如果是公众号身份的网页，需要绑定安全域名，如果是使用小程序云开发静态网站托管的小程序网页，则不需绑定安全域名即可直接使用（即跳过下面"步骤一：绑定安全域名"）。

步骤一：绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

步骤二：引入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 标准模块加载方法加载。

步骤三：通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

jsApiList是不可以为空的，否则会有问题

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [], // 必填，需要使用的JS接口列表openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

一个小例子

H5跳转小程序(微信开放标签使用)相关推荐

h5 跳转小程序微信浏览器不显示跳转按钮
问题:静态页面( h5 页面)跳转小程序,在微信内置浏览器里面没有显示出跳转按钮,但是在其他浏览器则正常显示. 可能有以下一些原因: 1.jweixin.js 版本引入 jweixin.js,需要 ...
使用小程序·云开发静态托管实现免鉴权h5跳转小程序
背景微信虽然推出了微信开放标签可以实现h5跳转小程序. 但是,开发者在使用之前要在公众号设置JS接口安全域名,不仅限制个数还限制修改次数,而且在使用之前还得获取access_token.ticket ...
微信公众号H5跳转小程序，wx-open-launch-weapp
直接上干货,不多哔哔~~ 注意事项 : 需要再公众号里面绑定需要跳转的小程序获取jssdk配置的时候需要再公众平台绑定安全域名微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3 ...
记录配置微信外链跳转小程序踩坑（H5跳转小程序）
1.已有的小程序里面选择云开发,准备工作:下载官方demo 1.1新建云函数(参考:静态网站 H5 跳小程序 | 微信开放文档) 这个地方和官方操作一致,但是要特别注意如果设置了下图的话,云函数名称必 ...
微信浏览器跳转小程序php,微信浏览器里面h5跳转小程序
微信浏览器里面h5跳转小程序注意事项,以vue框架为例一.获取jssdk配置,在wx.ready回调函数里面展示按钮wx.config({ debug: false, appId: data.ap ...
V2微信内外网页H5跳转小程序链接生成系统开发
V2微信内外网页H5跳转小程序链接生成系统开发网页支持H5.服务号.封装app 功能// banner.首页.标题:创建您的链接.功能区.创建链接.选择类型.8种类型.小程序.一个人小程序.公众号. ...
h5跳转小程序、短信跳转小程序＜wx-open-launch-weapp＞干货满满
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档前言由于微信官方限制了URL Scheme跳转,本文实现的是html跳转微信小程序,仅限微信内部调转.如果需要外部跳转微信小程序,可 ...
H5跳转小程序，小程序跳转小程序
一.H5跳转小程序 wx-open-launch-weapp官网文档 jsapi_ticket 生成官方文档 jsapi_ticket加密时官方说url不加#及后面部分,但尝试后会debug报错,加 ...
H5跳转小程序（详）
普通的H5是无法跳转小程序的.在手机微信内打开的H5网页可通过开放标签 <wx-open-launch-weapp>跳转微信小程序(目前电脑微信不会渲染跳转按钮).具体使用.请阅读静态网站 ...

最新文章

热门文章