最近,如果你小程序后台如果收到了「邀请公测功能」的消息,那么你不必惊讶,其实我也收到了。如下:
为满足 H5 和小程序的业务合作需求,近期将灰度测试 H5 跳转小程序功能,邀请你进行体验。功能规则如下:
1. 此功能仅开放给已认证的服务号,使用此功能的 H5 需绑定为服务号的“ JS 接口安全域名”
2. 开发者需在 H5 内使用“微信开放标签”,用户需点击标签才可以跳转至小程序
3. H5 可跳转任意合法合规的小程序
详见 《开发文档》
今天就一起来看看如何把这个「H5 跳转小程序功能」完完全全的实现起来,简单来讲,就是下面的代码:
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="/a/b/c?d=1&e=2#fg"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序<button>
</template>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
几个注意点:
1、username="gh_xxx",这个是小程序的原始ID,不是小程序的appId
2、要实现上面的代码的功能,还需要认真执行以下步骤:
概述微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。 此文档面向网页开发者,介绍微信开放标签如何使用及相关注意事项。需要注意的是,微信开放标签有最低的微信版本要求,以及最低的系统版本要求。 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 开放标签使用步骤微信开放标签使用步骤与微信JS-SDK类似,也需要绑定安全域名、引入JS文件等步骤。 步骤一:绑定域名登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 步骤二:引入JS文件备注:支持使用 AMD/CMD 标准模块加载方法加载。 步骤三:通过config接口注入权限验证配置并申请所需开放标签与使用JS-SDK配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个url仅需调用一次)。开放标签的申请和JS接口的申请相互独立,因此是可以同时申请的。 wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
签名算法见JS-SDK说明文档的附录1,所有开放标签列表见文末的附录1。 步骤四:通过ready接口处理成功验证wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
});
步骤五:通过error接口处理失败验证wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
});
使用说明所有开放标签都能像普通的HTML标签一样在页面中直接使用,不需要再进行额外的处理。 如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<template></template>进行包裹。对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type="text/wxtag-template"><script>进行代替,来包裹插槽模版和样式。另外,对于具名插槽还需要通过slot属性声明插槽名称,下文标签插槽中的default插槽为默认插槽,可不声明插槽名称。 对于标签事件,均可通过event.detail获得详细信息。如果无特殊说明,下文标签事件说明中的返回值均指代event.detail中的内容。 开放标签说明小程序跳转按钮:<wx-open-launch-weapp>用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。 属性名称 | 必填 | 默认值 | 备注 | username | 是 | | 所需跳转的小程序原始id,即小程序对应的以gh_开头的id | path | 否 | | 所需跳转的小程序内页面路径及参数 |
插槽名称 | 必填 | 默认值 | 备注 | default | 是 | | 跳转按钮模版及样式 |
事件名称 | 冒泡 | 返回值 | 备注 | ready | 否 | | 标签初始化完毕,可以进行点击操作 | launch | 否 | | 用户点击跳转按钮并对确认弹窗进行操作后触发 | error | 否 | { errMsg: string } | 用户点击跳转按钮后出现错误 |
备注:error事件返回值errMsg说明如下。 errMsg | 说明 | "launch:fail" | 跳转失败 |
以上文档来自腾讯官方小程序文档。
|