有哪些制作网站的公司吗,2023年税收最新政策,网站设计会存在什么问题,优秀校园网站微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合#xff0c;可以在网页上提供跳转小程序、打开 App 等能力。本文梳理使用微信开放标签跳转小程序的过程#xff0c;以备日后查阅。
参考链接
1. 开放标签说明文档
准备已认证的服务号
开放标签只能绑定已认证…微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合可以在网页上提供跳转小程序、打开 App 等能力。本文梳理使用微信开放标签跳转小程序的过程以备日后查阅。
参考链接
1. 开放标签说明文档
准备已认证的服务号
开放标签只能绑定已认证的服务号只能在微信真机上测试。因此以下都是不行
不能使用测试服务号不能是普通公众号只能是服务号不能使用微信开发者工具
开放标签可以跳转任何合法小程序因此准备任意一个已认证的服务号都可以不必是小程序绑定的那个服务号。
绑定 js 安全域名
登录服务号后台在「公众号设置 - 功能设置 - JS接口安全域名」里添加安全域名需要注意一个服务号只能设置 5 个安全域名一个月只能修改 5 次因此尽量想好以后再去设置。
保存之前需要下载校验文件并上传到域名的根目录 配置域名注意以下事项
域名要公网能够访问因为保存时要微信要去访问校验文件只配置域名不要带 http://不要带端口号域名要通过 ICP 备案所以像 .local 是不行的域名的端口微信强制 http 使用 80https 使用 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} classNameopen-minapp{children}wx-open-launch-weapp style{tagStyle} username{username} path{path} envVersion{envVersion} extraData{extraData} script typetext/wxtag-templatebutton style{tagButtonStyle}/button/script/wx-open-launch-weapp/button)
