调用微信JS-SDK配置签名
2023-09-27 14:22:16 时间
前后端进行分开开发:
1:后端实现获取
+++接口凭证:access_token (公众号的全局唯一接口调用凭据)
** GET 获取:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
+++接口票据:jsapi_ticket ( JS-SDK 配置签名票据)
** GET获取:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
2:进行字典URL键值对的格式排序(即key1=value1&key2=value2…)拼接成字符串
(微信配置签名以)
详情:#附录1-JS-SDK使用权限签名算法 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
后端实现了签名配置,前端调用后端提供的接口即可
注意:打开是在自己服务号配置好的域名形式打开:如 http://buy.shopline.com//html/index.html
在微信开发工具或是微信上,打开 便会提示 配置具体是否成功信息!
config:ok即表示完成配置,就可以调用 JS-SDK了,实现自己具体的想要的JS-SDK提供的接口!
/js/wxconfig.js
//配置 wx.config //这一步配置成功的 $.ajax({ url: '/config', type: 'GET', //必须进行 url 编码 //////////////////// data: { url: location.href.split('#')[0]//@todo 重要:后台需要获取签名使用 }, dataType: 'json', success: function (res) { wx.config({ beta: true, debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: res.appid, // 必填,公众号的唯一标识 wx4943f6480a79a436 timestamp: res.timestamp, // 必填,生成签名的时间戳 nonceStr: res.nonceStr, // 必填,生成签名的随机串 signature: res.signature,// 必填,签名,见附录1 jsApiList: ['chooseInvoice', 'chooseCard'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); } })
//index.html
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script src="/js/wxconfig.js"></script> <script> wx.ready(function () { //此处配置完成,根据自己需求进行接口是否配置完成调用 //wx.ready 如 document.ready }); </script>
只要这一步,成功了!下面干正事......
相关文章
- js中reduce的用法
- 【Vue3】如何通过vite.config.js配置中的resolve来设置路径别名?(已解决,图文+代码)
- 微信小程序 - 引入并使用 Fly.js 请求库(超级详细的教程及运行示例)提供 Fly.js 源码源文件下载,贴心的配置示例及注释,优雅快速的发起 http 网络请求
- Vue - 列表分页懒加载 / 点击 “加载更多“ 按钮请求接口数据(如何实现类似用户手动点击 “查看更多“ ,然后请求分页懒加载数据填充)可适用于 Nuxt.js 、uni-app 等 Vue.js
- 【JavaScript】熟悉js的继承链,作用域,闭包
- 【一起来烧脑】一步React.JS学会体系
- js 中的 number 为何很怪异
- vue项目js和css文件名避免浏览器缓存再vue.config.js中配置
- vue 3.0 项目搭建移动端 (八) vue.config.js 配置
- 微信调用照相拍照等 js 接口的权限配置 和 照片上传和下载实现
- JS、ActiveXObject、Scripting.FileSystemObject
- jQuery全屏滚动插件FullPage.js中文API文档
- JS运动---运动基础(匀速运动)
- windows系统下安装 node.js (node.js安装及环境配置)
- js将数组分割成等长数组
- vue-cli3中怎么配置vue.config.js文件
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- JS-改变页面的颜色(二)
- 配置webpack中externals来减少打包后vendor.js的体积
- 安装Node.js、npm和环境变量的配置
- Vue-cli 4在vue.config.js中配置别名
- JS魔法堂:函数重载 之 获取变量的数据类型
- JS魔法堂:再识Bitwise Operation & Bitwise Shift
- nginx 指定多个域名跨域请求配置 find ./ ! -path "./node_modules/*" -name *.js |xargs egrep basePath
- js中substr与substring的差别
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
- js 输入整数