位置: 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)

  • 怎样用百度做推广(百度怎么做推广)

    怎样用百度做推广(百度怎么做推广)

  • 抖音上四个人Pk怎么开(抖音上四个人抢着吃饭)

    抖音上四个人Pk怎么开(抖音上四个人抢着吃饭)

  • 苹果13爱心模式怎么设置(苹果13爱心模式打开没反应怎么回事)

    苹果13爱心模式怎么设置(苹果13爱心模式打开没反应怎么回事)

  • 抖音怎么知道谁分享了自己的作品(抖音怎么知道谁看了我的作品)

    抖音怎么知道谁分享了自己的作品(抖音怎么知道谁看了我的作品)

  • 苹果手机怎么刷门禁卡(苹果手机怎么刷新内存清理)

    苹果手机怎么刷门禁卡(苹果手机怎么刷新内存清理)

  • 网卡工作在开放系统互联基本参osi中哪一层(网卡已启用 但是还是显示叉)

    网卡工作在开放系统互联基本参osi中哪一层(网卡已启用 但是还是显示叉)

  • win7触摸板不能用(win7触摸屏无法触摸)

    win7触摸板不能用(win7触摸屏无法触摸)

  • 手机内部有滋滋电流声(手机内部有滋滋的响声)

    手机内部有滋滋电流声(手机内部有滋滋的响声)

  • 小米note充不进电一直亮红灯(小米note充不进电一直闪红灯)

    小米note充不进电一直亮红灯(小米note充不进电一直闪红灯)

  • 电脑麦克风有杂音滋滋怎么解决(电脑麦克风有杂音怎么调)

    电脑麦克风有杂音滋滋怎么解决(电脑麦克风有杂音怎么调)

  • 手机壳对手机发语音影响吗(手机壳会使手机更容易发热)

    手机壳对手机发语音影响吗(手机壳会使手机更容易发热)

  • 华为进网试用是什么意思(华为新机后面的进网试用是什么意思)

    华为进网试用是什么意思(华为新机后面的进网试用是什么意思)

  • 微信账单删了能查到吗(微信账单删了能找回来吗)

    微信账单删了能查到吗(微信账单删了能找回来吗)

  • 华为手机如何设置应用使用时间(华为手机如何设置返回键)

    华为手机如何设置应用使用时间(华为手机如何设置返回键)

  • 微信特别关心在哪里(微信特别关心在哪里设置)

    微信特别关心在哪里(微信特别关心在哪里设置)

  • 抖音怎么看哪些人看过我的作品(抖音怎么看哪些人取关了自己)

    抖音怎么看哪些人看过我的作品(抖音怎么看哪些人取关了自己)

  • 荣耀手环3连不上手机(荣耀手环连不上蓝牙)

    荣耀手环3连不上手机(荣耀手环连不上蓝牙)

  • 抖音直播怎么提现(抖音直播怎么提现到微信)

    抖音直播怎么提现(抖音直播怎么提现到微信)

  • 第一个计算机病毒出现时间(第一个计算机病毒名称)

    第一个计算机病毒出现时间(第一个计算机病毒名称)

  • 快手直播怎么开ktv模式(快手直播怎么开小窗)

    快手直播怎么开ktv模式(快手直播怎么开小窗)

  • 9、Linux 高并发Web服务器项目实战(附代码下载地址)(linux 高并发网络编程)

    9、Linux 高并发Web服务器项目实战(附代码下载地址)(linux 高并发网络编程)

  • 异地存货怎么审计
  • 金税盘如何交服务费
  • 收到附加税退税的分录
  • 未达到起征点的增值税会计处理
  • 政府奖励企业如何申请
  • 个税申报系统跟工资表累计扣除数不一致怎么办
  • 购进库存商品到销售全部分录
  • 公转法人交税
  • 增值税专用发票和普通发票的区别
  • 物流企业账务流程
  • 劳务与临时工的区别
  • 雇佣外籍劳工
  • 低值易耗品残料有哪些
  • 以旧换新如何确认收入
  • 未分配利润调整会计分录
  • 去年暂估的库存商品今年到了发票怎么做会计分录
  • 集团内部资产划转需要交增值税吗
  • 施工企业营改增税费有哪些
  • 差旅费补贴需要缴纳个人所得税吗需要发票
  • 增值税免税收入进项税额转出
  • 技术服务费发票需要备注吗
  • 生产工具计入什么费用
  • 劳务公司差额征税账务处理
  • 服务费计入什么收入
  • win8.1怎么用
  • php curl_multi_init
  • 销项负数发票怎么处理
  • 存货的毁损通过什么科目核算
  • 短期借款利息计算
  • 企业所得税税前扣除凭证管理办法
  • sigmoid函数求导表达式
  • 企业债权人进行财务分析的根本目的是关心企业的
  • 服务业增值税加计扣除账务处理
  • 增值税税控系统专用设备费及技术维护费抵扣
  • vuecli配置代理
  • php接口开发详解
  • sync命令是什么意思
  • 蔬菜免税分录
  • 新成立的公司做广告如何写公司简介部分
  • 如何隐藏应用软件华为
  • Sqlite数据库里插入数据的条数上限是500
  • 织梦生成出现500
  • 公对公退款必须退至原账户的规定
  • 银行转账支付凭证有效期多久
  • 其他应付款的辅助科目是什么
  • 以房抵债会计分录怎么做
  • 加工费怎么做账
  • 更衣柜属于什么费用
  • 印花税如何计算缴纳
  • 金以旧换新合适吗
  • 其他应收款借方负数代表什么意思
  • 工资薪酬所得税税率表最新
  • 加油的增值税发票几个点
  • 车辆购置税的会计科目怎么写
  • sql server错误和使用情况报告
  • mysql增删改查面试题
  • win7清除usb插拔记录
  • WIN7系统如何设置自动关机
  • win7安装sqlserver2000没反应
  • 通过注册表删除脱机打印机
  • mac打不开以下磁盘映像
  • 最小化安装centos7怎么装图形界面
  • win1共享
  • mac终端输入代码有什么影响
  • linux usb audio
  • win8怎么安装win10
  • lnmp一键安装包是什么
  • python列表详解
  • nodejs的socket
  • python中re.m
  • unity 3d场景2d角色
  • js获取tbody下的tr
  • 如何用python做图像处理
  • 3.5车船税2400还是3000
  • 红字发票税务局不愿意退税怎么处理
  • 小规模一季度多少免增值税
  • 上海房产税税收
  • 四川社保每年几月份交费
  • 请领导审核怎么说
  • 当月专票作废流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设