H5接入微信公众号方法(超详细)

您所在的位置:网站首页 公众号支持html H5接入微信公众号方法(超详细)

H5接入微信公众号方法(超详细)

2024-07-12 06:32| 来源: 网络整理| 查看: 265

微信官方文档

一、使用真实公众号并认证开发者,或者申请使用测试号

注意: 在微信开发者工具中调试,必须先成为公众号开发者,可以在微信公众号后台进行配置 位置: 公众号后台 > 设置与开发 > 开发者工具 > web开发者工具 > 绑定微信开发者微信号(必须先关注此公众号才能成为开发者) 测试号获取 在这里插入图片描述

二、在公众号后台配置相关信息,有两处需要填写

1. 接口配置信息

此处可不填写,这个地方的内容是发送消息时用的,如果仅是调用普通微信api,无需填写。

2. js安全域名

此处必须配置,只有此域名发出的请求才能获得微信权限

注意:域名不需要加http://或者https://,也不需要添加端口号,可以是ip地址

例:192.168.123.123;abcd.abcd.cn

三、获取微信api接口授权

为保证安全,建议获取access_token、jsapi_ticket、计算签名都由后端完成

提示:需要预先知道的数据 具体位置

1. 获取access_token

使用get请求,参数有三个,分别是:grant_type、appid、secret

其中grant_type值固定为client_credential,其它两个分别为公众号的appID和appsecret

// 请求示例 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

注意:access_token有效期为7200秒

2. 获取jsapi_ticket

使用get请求,参数有两个,分别是:access_token、type

access_token是上一个接口返回的,type为固定值jsapi

// 请求示例 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

注意:jsapi_ticket有效期为7200秒

3. 签名算法

对指定字段进行sha1签名

字段分别为:jsapi_ticket(通过上面接口获取的)、noncestr(随机字符串)、timestamp(时间戳)、url(当前网页的URL,不包含#及其后面部分)

// 示例 jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value

附:sha1签名算法

export default { methods: { // 当前时间戳 timeStamp(data) { return parseInt(new Date(data).getTime()) + ""; }, // 字符转义 encodeUTF8(s) { let i, r = [], c, x; for (i = 0; i > 10 == 0) //对四字节UTF-16转换为Unicode (c = (x 18) & 0x7), 0x80 + ((c >> 12) & 0x3f)); else r.push(0xe0 + ((c >> 12) & 0xf)); r.push(0x80 + ((c >> 6) & 0x3f), 0x80 + (c & 0x3f)); } return r; }, // sha1签名算法 sha1(s) { let data = new Uint8Array(this.encodeUTF8(s)); let i, j, t; let l = (((data.length + 8) >>> 6)


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3