H5接入微信公众号方法(超详细)
微信官方文档
一、使用真实公众号并认证开发者,或者申请使用测试号
注意:
在微信开发者工具中调试,必须先成为公众号开发者,可以在微信公众号后台进行配置
位置:
公众号后台 > 设置与开发 > 开发者工具 > 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 < s.length; i++)if ((c = s.charCodeAt(i)) < 0x80) r.push(c);else if (c < 0x800) r.push(0xc0 + ((c >> 6) & 0x1f), 0x80 + (c & 0x3f));else {if ((x = c ^ 0xd800) >> 10 == 0)//对四字节UTF-16转换为Unicode(c = (x << 10) + (s.charCodeAt(++i) ^ 0xdc00) + 0x10000), r.push(0xf0 + ((c >> 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) << 4) + 16,s = new Uint8Array(l << 2);s.set(new Uint8Array(data.buffer)), (s = new Uint32Array(s.buffer));for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2);s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);s[l - 1] = data.length << 3;let w = [],f = [function () {return (m[1] & m[2]) | (~m[1] & m[3]);},function () {return m[1] ^ m[2] ^ m[3];},function () {return (m[1] & m[2]) | (m[1] & m[3]) | (m[2] & m[3]);},function () {return m[1] ^ m[2] ^ m[3];},],rol = function (n, c) {return (n << c) | (n >>> (32 - c));},k = [1518500249, 1859775393, -1894007588, -899497514],m = [1732584193, -271733879, null, null, -1009589776];(m[2] = ~m[0]), (m[3] = ~m[1]);for (i = 0; i < s.length; i += 16) {let o = m.slice(0);for (j = 0; j < 80; j++)(w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1)),(t = (rol(m[0], 5) + f[(j / 20) | 0]() + m[4] + w[j] + k[(j / 20) | 0]) | 0),(m[1] = rol(m[1], 30)),m.pop(),m.unshift(t);for (j = 0; j < 5; j++) m[j] = (m[j] + o[j]) | 0;}t = new DataView(new Uint32Array(m).buffer);for (let i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);let sign = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {return (e < 16 ? "0" : "") + e.toString(16);}).join("");return sign;},},
};
4. 获取微信api
权限
wx.config({debug: true, // 开启调试模式appId: '', // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名jsApiList: [] // 必填,需要使用的JS接口列表
});
5. 通过ready
接口处理成功验证
注意:
config
信息验证后会执行ready方法,所有接口调用都必须在config
接口获得结果之后,config
是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready
函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready
函数中。
wx.ready(function(){});
微信JS-SDK说明文档
6. 调用已授权的api
这一步很简单,照着微信官方文档调用就可以了
示例:
wx.ready(function(){wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'success: function (res) {var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。var speed = res.speed; // 速度,以米/每秒计var accuracy = res.accuracy; // 位置精度}});
});
H5接入微信公众号方法(超详细)相关推荐
- ChatGPT接入微信公众号(手把手教学)
前言 本篇文章参考国内服务器 3 分钟将 ChatGPT 接入微信公众号(超详细)配置,纠正了一些过时的信息. 准备 一个微信公众号 一个能访问外网的梯子 一个ChatGPT账号 有了这些就可以配置了 ...
- chatgpt接入微信公众号的详细教程
好的,我会尽力帮你. ChatGPT 是一个使用 GPT-3 模型的聊天机器人框架,可以帮助你在微信公众号上快速构建聊天机器人. 要将 ChatGPT 接入微信公众号,你需要按照以下步骤操作: 准备工 ...
- 微信公众号自动回复html,[.NET] 简单接入微信公众号开发:实现自动回复
简单接入微信公众号开发:实现自动回复 一.前提 先申请微信公众号的授权,找到或配置几个关键的信息(开发者ID.开发者密码.IP白名单.令牌和消息加解密密钥等). 二.基本配置信息解读 开发者ID:固定 ...
- 从零接入微信公众号(Java实现 附源码)
目录 从零接入微信公众号 一.微信测试号的申请与关注 1.申请 2.访问域名配置 3.关注 二.测试号快速生成底部导航栏 1.获取 access_token 2.自定义菜单 三.微信公众号网页授权 1 ...
- 企业宣传片如何快速接入微信公众号中?
原创文章:2019-8-6 文章内容:快速在微信公众号中接入自己公司的视频宣传片 大家好,我来说说企业视频宣传片.产品宣传片如何接入微信公众号,让关注公众号的用户,轻松点击观看,提升企业形象,提升产品 ...
- Java实现接入微信公众号服务器
在微信公众号开发中,我们需要接入微信服务器,让微信服务器与我们自己的服务器建立安全信道,建立信任.微信服务器向我们的服务器发送请求的时候会携带三个参数timestamp=时间戳&nonce=随 ...
- 2021最新外卖霸王餐小程序、H5、微信公众号版外系统源码|霸王餐美团/饿了么系统 粉丝裂变玩源码下载
2021年了,你还在用淘宝客吗?赶紧跟上互联网的大势吧,外卖cps就是cps人群趋势! 个人.个体.企业均可使用 外卖霸王餐小程序.H5.微信公众号版外系统源码|霸王餐美团/饿了么系统 粉丝裂变玩 2 ...
- 微信开发:springboot接入微信公众号
微信公众号现今已经成为我们日常生活中获取信息的一个重要途径,今天这篇博客主要是介绍如何用springboot接入微信的公众号.微信的公众号分三种:订阅号,一般个人使用,很多功能受限:服务号,个人与企业 ...
- uniapp中h5网页微信公众号授权
uniapp微信网页授权 uniapp中h5网页微信公众号授权 主要代码 获取code返回的code截取代码 uniapp中h5网页微信公众号授权 微信官方文档–>网页授权 uniapp中h5网 ...
最新文章
- libevent源码深度剖析十一
- 《深入理解ElasticSearch》——2.4 批量操作
- 【Python】30个Pandas高频使用技巧
- centos 关机命令_Docker 常用命令速查手册
- 第五章:Java_面向对象编程(三)
- odata service authorization check in backend
- android更换工具链
- java xmpp openfire_XMPP协议学习笔记三(Openfire服务器端搭建开发环境)
- java求数组和值_用java编写数组求和,array[]和ArrayList()?
- 《PostgreSQL 指南:内幕探索》之基础备份与时间点恢复(下)
- 说人话很难。。。。。。
- The host '192.168.174.130' is unreachable. the host may be down..............
- SAP B1 VS女士的Navision ERP的比较 - 知道如何选择软件
- 关于ms17010渗透
- Assimp库中文文档
- Ubuntu14.04 安装Firefox flash插件
- 重启服务器:docker重启,docker内部mysql怎么重启启动
- python 董付国_Python 董付国
- ale插件 vim_vim 撸码必备插件之 autoformat 与 ale[视频]
- c语言编程if,关于C语言中#if的用法