微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合，可以在网页上提供跳转小程序、打开 App 等能力。本文梳理使用微信开放标签跳转小程序的过程，以备日后查阅。

参考链接

1. 开放标签说明文档

准备已认证的服务号

开放标签只能绑定已认证的服务号，只能在微信真机上测试。因此以下都是不行：

• 不能使用测试服务号
• 不能是普通公众号，只能是服务号
• 不能使用微信开发者工具

开放标签可以跳转任何合法小程序，因此准备任意一个已认证的服务号都可以，不必是小程序绑定的那个服务号。

绑定 js 安全域名

登录服务号后台，在「公众号设置 - 功能设置 - JS接口安全域名」里添加安全域名，需要注意一个服务号只能设置 5 个安全域名，一个月只能修改 5 次，因此尽量想好以后再去设置。

保存之前需要下载校验文件，并上传到域名的根目录：

配置域名注意以下事项：

1. 域名要公网能够访问，因为保存时要微信要去访问校验文件
2. 只配置域名，不要带 http://，不要带端口号
3. 域名要通过 ICP 备案，所以像 .local 是不行的
4. 域名的端口微信强制 http 使用 80，https 使用 443，在开发时要注意

初始化微信 js sdk

界面引入 //res.wx.qq.com/open/js/jweixin-1.6.0.js，然后调用 config 接口注入配置信息。签名下一小节再讲

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

需要注意：

• sdk 版本需要再 1.6.0 以上

• nonceStr 是使用驼峰命名的，不要拼错了

生成签名

生成签名一般是由后端提供接口，这里主要说一下容易出现问题的地方

• 由于历史原因，jsapi_ticket 有 jsapi 和 wx_card 两种，wx_card用于微信卡券，其他情况都用 jsapi，后端生成时不要生成错了

• 可以通过工具验证签名是成功的

• 如果使用的是 get 方法来请求生成签名接口，要注意参数要用 encodeURIComponent 进行编码。使用 Post 方法则不需要考虑

• 生成签名的 url 是不带 # 后面的部分的 

使用开放标签进行跳转

可以把 wx-open-launch-weap 标签做成一个透明的蒙层盖在按钮上面，注意标签内部的标签要设置 width/height，并且单位要用 px

const tagStyle = {width: '100%', height: '100%', position: 'absolute', left: 0, top: 0, zIndex: 1, backgroundColor: 'transparent', overflow: 'hidden'}
const tagButtonStyle = {width: '160px', height: '64px', display: 'block', border: 'none', backgroundColor: 'transparent'}return (<button style={style} className='open-minapp'>{children}<wx-open-launch-weapp style={tagStyle}  username={username} path={path} envVersion={envVersion} extraData={extraData} ><script type="text/wxtag-template"><button style={tagButtonStyle}></button></script></wx-open-launch-weapp></button>)