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

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

参考链接

1. 开放标签说明文档

准备已认证的服务号

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

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

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

绑定 js 安全域名

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

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

配置域名注意以下事项：

域名要公网能够访问，因为保存时要微信要去访问校验文件
只配置域名，不要带 http://，不要带端口号
域名要通过 ICP 备案，所以像 .local 是不行的
域名的端口微信强制 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>)

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

微信开放平台:小程序代码模板库管理小程序授权版本发布，版本回退 java代码实现
一.业务场景: 小程序运营者,可以一键授权给第三方平台,通过第三方平台来完成代公众号和代小程序等业务,本文主要介绍代小程序业务实现步骤. 二.代开发的具体流程: 第三方平台帮已授权的小程序进行代码管理 ...
微信公众平台、微信公众平台.小程序、微信.开放平台三者关系及unionid
以下内容,仅限于根据自己开发以及阅读微信文档总结,错误之处敬请指出,共同进步! 一.微信公众平台.微信公众平台.小程序.微信.开放平台登录地址项目微信公众平台微信公众平台.小程序微信.开放平台 ...
神策数据王乾：微信生态与小程序发展趋势洞察
▼▼▼ 导读在 2020 年的微信公开课上,微信官方宣布,小程序的重点目标是助力商家打造自己的商业闭环.而随着近期小程序热度的持续攀升,品牌零售商也纷纷强化了对这一重要自建渠道的重视. 为此,神策数 ...
微信第三方平台小程序平台设计
今天是2023年1月15日,距离2023春节倒计时7天.在此,我分享一下个人对于微信第三方平台小程序的理解以及搭建一个微信小程序及云端服务的一些个人经验,作为交流. 首先,一个第三方平台小程序要定位是 ...
从微信公众平台·小程序内测邀请函看应用号动向
最近,网上流传一张疑似张小龙朋友圈的照片,上面写着:"什么是小程序:小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开 ...
vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_App ...
.NET Core 微信公众号小程序6种获取UnionID方法，你知道哪几种？
前言获取UnionID是开发微信公众号/小程序中很有必要的一个环节,特别是针对一个公司拥有多个公众号小程序而推出的机制,实现打通账户一体化,用UnionID来区分多平台的唯一性. 官方的解释:如果开 ...
微信公众平台小程序(应用号)开始内测了
在今年1月的微信公开课Pro版现场,微信团队曾经提到,微信将在订阅号和服务号的基础上,推出应用号. 微信小程序正式上线 [爆]小程序内可直接打开网页了! 2017年3月27日更新:微信小程序新增六大能 ...
微信，支付宝支付，微信公众号小程序授权等
微信,支付宝支付,微信公众号小程序授权等前言微信支付微信授权 maven依赖(更新) 前言最近在公司也做了很多移动端项目,如今微信公众号,小程序又特别火爆,免不了要接触支付,授权这类的业务需求 ...