位置: IT常识 - 正文
h5接微信js-sdk的详细步骤(h5链接js)
编辑：rootadmin推荐整理分享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
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_token1.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开发文档