位置: IT常识 - 正文

h5接微信js-sdk的详细步骤(h5链接js)

编辑:rootadmin
h5接微信js-sdk的详细步骤 h5接微信js-sdk的详细步骤JS-SDK配置流程(前端需要做的)1、配置JS安全域名2、服务接入3、引入Js文件4、使用wx.config进行权限验证5、代码JS-SDK配置流程(后端需要做的)获取access_token获取jsapi_ticket计算签名参考网站JS-SDK配置流程(前端需要做的)

推荐整理分享h5接微信js-sdk的详细步骤(h5链接js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:使用js-sdk调用微信公众平台的网页开发工具包,微信h5接口,h5链接js,微信h5 sdk,微信h5接口,微信h5接口,微信h5 sdk,微信h5 sdk,内容如对您有帮助,希望把文章链接给更多的朋友!

流程图:

js安全域名引入weixin-js-sdk服务器接入wx.configwx.ready使用微信api微信服务器jsApiListtimestampsignaturenonceStrurlnode服务appId,timestamp,nonceStr,signature,jsApiList

微信文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 登录微信公众平台公众号设置,进行js安全域名设置

1、配置JS安全域名

配置完安全域名之后,会让微信知道我们有这样一个域名,但是此时还不能实现双方对话 1.申请一个安全域名 2.去微信公众平台下载MP_verify_WCdi1jnSEaGX59y0.txt,并将该文件方法到安全域名下,并确保再安全域名下能访问到这个文件,即http://xxxxxxxx/MP_verify_WCdi1jnSEaGX59y0.txt可以访问 3.绑定js安全域名 4.将该安全域名下的IP名单都添加到 公众平台—安全中心—设置于开发—基本配置—IP白名单

2、服务接入

提交逻辑:微信会对填写的token进行验证,验证成功微信会将四个参数发送到你填写的url接口上,接口开发者通过 signature进行签名校验,校验成功,接口开发者要原样返回echostr 参数内容,接入成功 URL:必须是绑定的js安全域名、是一个接口(接口逻辑如上) token:随机,但是要和后端保持一致 EncodingAESKey:随机生成

接入指南

3、引入Js文件

1.在框架里面的html页面里引入js文件

在需要调用 JS 接口的页面引入如下 JS 文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js 如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。

html页面引入jweixin-1.6.0.js

h5接微信js-sdk的详细步骤(h5链接js)

2.插件安装方式引入

npm install weixin-js-sdk # 或yarn add weixin-js-sdk import wx from “weixin-js-sdk”; // 在需要的页面引入或者全局引入

4、使用wx.config进行权限验证

这一步是必须的,只有经过权限验证才可以去使用微信的api。 1.在该方法之前需要调用后端接口将当前页面的url传递给后端 url要取#之前的地址 let url = window.location.href.split(‘#’)[0] 2.字段获取 signature的值是需要后端计算好传过来的 jsApiList前端可以根据需要写 例如=》jsApiList: [‘scanQRCode’, ‘checkJsApi’] 其他的参数可以后端来生成,也可以前端传递

wx.config({ beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: ‘’, // 必填,企业微信的corpID timestamp: , // 必填,生成签名的时间戳 —>单位:秒 nonceStr: ‘’, // 必填,生成签名的随机串—>长度一般不超过32,格式建议[0-9a-zA-z] signature: ‘’,// 必填,签名,见 微信公众号开发文档附录JS-SDK使用权限签名算法 jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来 });

wx.ready(function(){ //config权限验证成功会走 }); ready成功之后接可以调用微信的api

wx.error(function(){ //config权限验证失败会走 });

5、代码import wx from 'weixin-js-sdk';// 配置信息getCofig() {let url = window.location.href.split('#')[0]const that = this;let params = {url: md5Libs.md5(url)}//接口getSingature(params).then(res => {let data = JSON.parse(res.data)that.wxConfig(data.timestamp,data.noncestr,data.signature);}).catch(err => {console.log('err', err)})},wxConfig(timestamp, nonceStr, signature) {wx.config({debug: true, // 开启调试模式,appId: '根据需要', // 必填,企业号的唯一标识timestamp: timestamp, // 必填,生成签名的时间戳nonceStr: nonceStr, // 必填,生成签名的随机串signature: signature, // 必填,签名jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表});wx.ready(() => {console.log('配置完成,扫码前准备完成')})wx.error(function(res) {alert('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。});},JS-SDK配置流程(后端需要做的)获取access_token

1.appid,公众号平台-设置与开发-基本配置-开发者ID 2.AppSecret,公众号平台-设置与开发-基本配置-开发者密码 如果没有起启用的话点击生成-扫码-输入公众号申请时填写的6位数密码,获取到AppSecret之后要自己保存起来 如果密码没有问题,但是一直不成功,可以去微信社区找管理员解决 3.输入正确的appid与APPSECRET,访问https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET,就会生成一个access——token 如果有报错可以对照微信文档上的返回码查找问题

微信官方文档

获取jsapi_ticket

用拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

计算签名

后端根据jsapi_ticket等信息将签名计算好并将signature、timestamp、nonceStr,返回给前端

参考网站

1.视频:

观看视频 页面,第p12-p22节

2.文档:

查看 微信js-SDK开发文档

本文链接地址:https://www.jiuchutong.com/zhishi/294541.html 转载请保留说明!

上一篇:微信小程序做全局登录弹窗(微信小程序全栈开发实战)

下一篇:nvidia-smi报错:NVIDIA-SMI has failed because it couldn‘t communicate with the NVIDIA driver 原因及避坑解决方案(nvidia-smi failed to initialize)

  • 小红书ios下载不了(小红书为什么不能在苹果手机上下载)

    小红书ios下载不了(小红书为什么不能在苹果手机上下载)

  • iphone序列号g0开头(iphone序列号g0n)

    iphone序列号g0开头(iphone序列号g0n)

  • nova6有呼吸灯吗(华为nove6有呼吸灯)

    nova6有呼吸灯吗(华为nove6有呼吸灯)

  • 显示内存vram如何提高(显示内存怎么调)

    显示内存vram如何提高(显示内存怎么调)

  • 抖音直播时间限制多长(抖音直播时间限制规定)

    抖音直播时间限制多长(抖音直播时间限制规定)

  • 淘宝垫付退款后卖家拒绝申请还能拿到款吗(淘宝垫付退款后卖家没处理)

    淘宝垫付退款后卖家拒绝申请还能拿到款吗(淘宝垫付退款后卖家没处理)

  • realme q是什么牌子(realme q realmeq是什么手机)

    realme q是什么牌子(realme q realmeq是什么手机)

  • 抖音巨量引擎有效果吗(抖音巨量引擎有用吗)

    抖音巨量引擎有效果吗(抖音巨量引擎有用吗)

  • 小米在哪里上市的(小米 在哪上市)

    小米在哪里上市的(小米 在哪上市)

  • photoshop是系统软件吗

    photoshop是系统软件吗

  • 苹果闹钟会一直响吗(苹果闹钟会一直响多少次)

    苹果闹钟会一直响吗(苹果闹钟会一直响多少次)

  • vivo nex3怎么设置导航手势(vivoNEX3怎么设置上滑控制中心)

    vivo nex3怎么设置导航手势(vivoNEX3怎么设置上滑控制中心)

  • ios13怎么关闭自动调节(ios13怎么关闭自动更新)

    ios13怎么关闭自动调节(ios13怎么关闭自动更新)

  • 多闪可以看到访客吗(多闪可以查访客记录吗)

    多闪可以看到访客吗(多闪可以查访客记录吗)

  • 淘手游怎么取消交易(淘手游怎么取消实名认证)

    淘手游怎么取消交易(淘手游怎么取消实名认证)

  • 华为mate30用的什么屏幕(华为mate30用的什么充电线)

    华为mate30用的什么屏幕(华为mate30用的什么充电线)

  • 华为如何使用双电信卡(华为如何使用双wifi)

    华为如何使用双电信卡(华为如何使用双wifi)

  • 6s可以升级12.2吗(6s能升级ios15吗)

    6s可以升级12.2吗(6s能升级ios15吗)

  • 热点资讯怎么设置不出界面(手机的热点资讯)

    热点资讯怎么设置不出界面(手机的热点资讯)

  • 电脑高级模式怎么退出(电脑高级模式怎么退出视频教程)

    电脑高级模式怎么退出(电脑高级模式怎么退出视频教程)

  • excel开发工具选项卡在哪(excel开发工具选项按钮如何设置 二选一)

    excel开发工具选项卡在哪(excel开发工具选项按钮如何设置 二选一)

  • 旁路由是什么(旁路由什么意思)

    旁路由是什么(旁路由什么意思)

  • 手机感光坏了怎么办(手机感光坏了怎么关闭)

    手机感光坏了怎么办(手机感光坏了怎么关闭)

  • 爱奇艺怎么设置定时息屏(爱奇艺怎么设置弹幕)

    爱奇艺怎么设置定时息屏(爱奇艺怎么设置弹幕)

  • Mac怎么查询UUID信息? 硬盘接口类型的查询方法(mac怎么查询是不是正品)

    Mac怎么查询UUID信息? 硬盘接口类型的查询方法(mac怎么查询是不是正品)

  • 所得税为什么比利润高
  • 简易计税方法能开专用发票吗
  • 公司出让上一任股东拥有的公司25%股权如何做账?
  • 其他债权投资的汇兑差额计入什么科目
  • 普票加专票超过30万全交税吗2020
  • 高铁票抵扣税率怎么计算
  • 应收账款确认无法收回分录
  • 建筑业预缴税款是什么意思
  • 职工取暖费计入什么科目
  • 设备安装成本如何核算
  • 解除合同一次性补偿金怎样算个人所得税
  • 挂靠人员帮外单位人员缴纳社保如何做账
  • 税收和征税
  • 三证合一后没有去税务局登记会怎么样
  • 烟草企业发生的广告和宣传费在当年营业收入15
  • 利润表其他综合收益的税后净额怎么算
  • 有合同未收到租金税务如何处理?
  • 牛奶的增值税普通发票
  • 所有者权益为什么是负债
  • 支付银行托管费怎么入账
  • 怎么解决win11系统不兼容问题
  • 公司自用产品 抵税吗?
  • 报关单上的生产销售单位
  • 无形资产的增值税怎么算
  • windows11怎么安装iis
  • windows11 怎么更新
  • 农行k宝企业网银无法登录
  • mac笔记本装了双系统后打开苹果系统和原来一样吗
  • linux怎么测试端口
  • 终身职业技能培训
  • vue 百度地图 移动端
  • php培训得花多少钱
  • 基于区块链技术的什么特征可建立卷烟信息数据查询系统
  • 人体姿态识别国内外研究现状
  • nerf新手入门
  • php生成唯一id
  • 命令压缩文件
  • 可供出售金融资产公允价值变动
  • 如何测试php
  • 营业外收入的会计科目编码
  • 各会计科目的含义
  • 如何计提增值税销项税额
  • phpcms生成html
  • 生产设备的折旧分录
  • 预缴所得税年底处理账务吗
  • sql server 2008r2连接
  • sql2008附加数据库错误3456
  • 合伙律师事务所管理办法最新
  • 预付款 退
  • 销项税用转出吗
  • 库存现金盘点表模板
  • 处置子公司利润表怎么合并
  • 出售其他权益工具投资其他综合收益
  • 预提短期借款利息的会计科目
  • 老板垫付工资账务处理
  • 长期待摊费用的最新账务处理
  • 非限定性净资产属于什么科目
  • 付转让费计入什么科目
  • 记账凭证可以先做贷方吗
  • 以前年度费用科目入错 不影响以前年度利润的账务处理
  • mysql数据库随机取数据
  • sql server 数据
  • xp电脑启动项怎么设置启动项
  • win8.1开始界面
  • win7怎样关闭ie浏览器
  • linux怎么查看
  • rhel7提供的5种基本安装方式是
  • windows8中文版是什么版本
  • 零基础搭建直播室与云直播平台
  • 如何关闭危险端口
  • css网页布局中注释是什么
  • 如何获得select选中的值
  • nodejs+ts
  • AnalogClock
  • 数据库并发操作主要解决哪三个问题,基本方法是什么
  • lint 工具
  • jquery关闭当前页面
  • unity3d quaternion
  • 开票税额超出1万怎么办
  • 资源税百科
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设