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

微信官方文档

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

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

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

1. 接口配置信息

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

2. js安全域名

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

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

例:192.168.123.123;abcd.abcd.cn

三、获取微信api接口授权

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

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

1. 获取access_token

使用get请求,参数有三个,分别是:grant_typeappidsecret

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

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

注意:access_token有效期为7200秒

2. 获取jsapi_ticket

使用get请求,参数有两个,分别是:access_tokentype

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&timestamp=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; // 位置精度}});
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/59657.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

公众号H5页面接入微信登录流程

起步 首先创建一个项目&#xff0c;我们采用uni-app来作为我们的前端框架 环境安装 全局安装vue-cli npm install -g vue/cli 创建uni-app 使用正式版&#xff08;对应HBuilderX最新正式版&#xff09; vue create -p dcloudio/uni-preset-vue my-project 在安装过程中…

海报的5种处理方式,让你的照片更吸睛

你知道海报应该怎么处理吗&#xff1f;照片是一个作品里最能吸引人注意的&#xff0c;我们可以试一试将照片处理成海报。那么你知道海报式的图片应该怎么处理吗&#xff1f;一起来看看吧&#xff01; 方法一&#xff1a;图形元素强调 如果照片本身的视觉冲击力不强&#xff0c…

AI技术在智能海报设计中的应用

背景 在视觉设计领域中&#xff0c;设计师们往往会因为一些简单需求付出相当多的时间&#xff0c;比如修改文案内容&#xff0c;设计简单的海报版式&#xff0c;针对不同机型、展位的多尺寸拓展等。这些工作需要耗费大量的时间、人力成本&#xff08;5~6张/人日&#xff09;&am…

vue3 antd项目实战——table表格(一文带你快速实现后台管理系统最常用的table表格)

零基础filter实现最简单的table表格 知识调用核心干货下期预告关键字模糊查找&#xff08;纯前端&#xff09;关键字模糊查找&#xff08;前后交互&#xff09; 知识调用 功能实现可能要用到的知识&#xff1a;vue3ant design vuets实战【ant-design-vue组件库引入】vue3项目实…

tf.placeholder代码详解

tf.placeholder(dtype, shape, name) 作用&#xff1a;创建一个类型为dtype&#xff0c;形状为shape&#xff0c;名字为name的一个Tensor类型 返回值&#xff1a;一个tensor类型 注意&#xff1a;tf.placeholder生成的tensor并不能直接print&#xff0c;需要通过sess.run才…

人工智能之线性代数应用

线性代数 1. 从初等函数到高等数学 一元线性函数 在中学的初等数学里,把函数 f ( x ) = k x + b f(x)=kx+b f(x)=kx+b ( k , b k,b k,b是不变量),称为一元线性函数,因为在平面直角坐标系中这个函数的图形就是一条线,就是变量(包括自变量和因变量)之间的映射关系描述为…

《乐队的夏天》刺猬乐队下半年音乐节巡演时间表

《乐队的夏天》总决赛&#xff0c;HOT5乐队诞生&#xff01; 新裤子乐队夺冠&#xff0c;痛仰乐队和刺猬乐队分列第二名和第三名&#xff0c;Click#15和盘尼西林乐队获得第四名和第五名。 在hot5乐队中有这么一支乐队&#xff0c;深得Guitar Pro的喜爱 高晓松评说&#xff1a…

什么是刺猬理念

一、什么是刺猬理念 刺猬理念是指把复杂的世界简化成单个有组织性的观点&#xff0c;一条基本原则或一个基本理念&#xff0c;发挥统帅和指导作用。核心是把事情简单化&#xff0c;把所有的挑战和进退维谷的局面压缩为简单的。 二、刺猬理念的寓言故事 狐狸是一种狡猾的动物&am…

刺猬乐队在唯品会工作过_Microsoft乐队是您从未听说过的出色智能手表和健身追踪器...

刺猬乐队在唯品会工作过 In late 2014 Microsoft released the Band. It came out of left field. Rumors had been rolling around about Microsoft possibly doing a wearable, but details were non-existent. When it came out people were… well, confused. And rightly …

多目标优化算法:多目标天鹰优化算法MOAO(提供Matlab代码)

一、算法简介 天鹰优化算法&#xff08;Aquila Optimizer&#xff0c;AO&#xff09;由Laith Abualigah等人于2021年提出&#xff0c;该算法的灵感来自天鹰在自然界中捕捉猎物的行为。 天鹰是深棕色的&#xff0c;脖子后面有浅金棕色的羽毛。幼天鹰主要在尾巴上有白色&#xf…

神奇的人工智能之神笔马良|Stable Diffusion使用

1,月球上骑马的宇航员。 image generate by stable-diffusion model 2,下棋的狗 image generate by stable-diffusion model 3,沉迷学习的史努比 image generate by stable-diffusion model 4,鲤鱼跃出海面

音速索尼克 怪人_最奇妙的刺猬索尼克粉丝游戏

音速索尼克 怪人 Sonic is hilarious. Maybe it’s the decades of bad games. Maybe it’s the Extreme Attitude™, a 90s marketing gimmick that feels dated now. Or maybe it’s just that he’s a weird looking dude. 索尼克很搞笑。 也许这是数十年来糟糕的比赛。 也许…

VTK:刺猬用法实战

VTK:刺猬用法实战 程序输出程序完整源代码程序输出 程序完整源代码 #include <vtkActor.h> #include <vtkCamera.h> #

python应用在人工智能_python应用篇-大数据和人工智能时代下,python牛在哪?

一、人工智能领域&#xff0c;python必用&#xff1f; 人工智能有多么火热呢&#xff1f;现在每12家拿到投资的创业公司&#xff0c;其中就有1家&#xff0c;是跟人工智能领域相关的。而在几年前&#xff0c;这个数字是48。 不管大家对这个行业的了解有多少&#xff0c;但你们…

『开源项目』基于STM32的智能垃圾桶之综合代码(HAL库)

大家好,我是『芯知识学堂』的SingleYork,前面给大家简单介绍了<基于STM32的智能垃圾桶之成员简介>、<基于STM32的智能垃圾桶之语音识别>、<基于STM32的智能垃圾桶之语音播报>和<基于STM32的智能垃圾桶之舵机控制(HAL库)>,今天笔者将要给大家介绍我…

刺猬猫服务器维护2020,刺猬猫杂谈:我认真起来连老板的号都敢封!

原标题&#xff1a;刺猬猫杂谈&#xff1a;我认真起来连老板的号都敢封&#xff01; 铁面无私 首先第一个重要通知 请各位不要在违纪的边缘来回试探 刺猬猫可是铁面无私的 就算是老板违规了也是要按规矩办事 讨论区公告也有通知 请大家引以为戒 自觉维护刺猬猫的和平 female 有…

目标检测算法实现(三)—— yolov5 代码调试

在高xq大佬的指导下完成了代码的调试和第一次训练&#xff0c;纯手工复盘记录&#xff0c;再度理解学习~&#xff01;&#xff01;&#xff01; 记录的逻辑不是很清晰&#xff0c;因为知识盲区太多&#xff0c;待理解的后续继续补充&#xff0c;未实现的后续继续实现并补充记录…

深度学习基础2-----如何使用下载的代码

目录 一、环境配置 1、requirements.txt 二、训练 1.训练公开数据集 2、训练自己的数据集 三、模型预测 下载代码后我们来瞧瞧如何使用&#xff01;&#xff01;&#xff01;&#xff01; 大类中主要包含三部分&#xff1a;环境配置&#xff1b;训练数据&#xff1b;模型…

深度学习基础3------看代码步骤

目录 一、代码的重要部分 二、模型本身 三、训练参数 四、数据加载 1.训练的数据价值 2.预测的数据加载 五、损失函数 六、预测后结果 一、代码的重要部分 包括两个部分&#xff1a;训练模型&#xff0c;模型预测。 训练模型--------需要考虑模型本身&#xff0c;训练…

ppt讲解html,HTML简介讲解.ppt

作业 1.制作一个图文并貌的网页至少3张图片、一个视频文件 文字不少于三段&#xff0c;字数不少于100字 至少用到 等标记符及align属性 图片应分别满足以下排版要求&#xff1a; 实现文本与图像的环绕 文本居于图片左侧 文字与图片在垂直方向上居中对齐 2.制作一个具有锚点链接…