微信公众号项目

测试号管理

项目进行阶段中，需要进行调试，可以申请微信的测试号功能（测试号）

申请之后会有appID以及appsecret配置js接口安全域名 可以设置本地域名（可以使用ip地址，上线项目只能使用域名不能使用ip地址（不需要前面http部分：192.168.3.196:9020））扫码关注测试公众号在体验接口权限表中：网页服务->网页账号->网页授权获取用户基本信息点击修改

image-0318152103144.png)]

首页获取用户信息

第一步：用户同意授权，获取code

设置回调页面：(用户同意授权后会跳转的页面)需要对url进行编码

const callbackURL = encodeURIComponent(`http://192.168.3.196:9020/#/binding`

设置appId，state可选，重定向后会带上state参数

const redirectURI = `https://open./connect/oauth2/authorize?appid=${appId}&redirect_uri=${callbackURL}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`

从url中获取code

http://192.168.3.196:9020/?code=0517rjll242IG64UC9nl25adxX17rjlV&state=1#/eventDetails

第二步：通过code换取网页授权access_token（最好后台处理）

通过url获取access_token

https://api./sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

返回JSON数据包

{"access_token":"ACCESS_TOKEN","expires_in":7200,"refresh_token":"REFRESH_TOKEN","openid":"OPENID","scope":"SCOPE" }

第三部：刷新access_token(如果需要)

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权

https://api./sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

返回JSON数据包

{ "access_token":"ACCESS_TOKEN","expires_in":7200,"refresh_token":"REFRESH_TOKEN","openid":"OPENID","scope":"SCOPE" }

第四步：拉取用户信息(如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了)

http：GET（请使用https协议） https://api./sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

返回JSON数据包

{"openid": "OPENID","nickname": NICKNAME,"sex": 1,"province":"PROVINCE","city":"CITY","country":"COUNTRY", "headimgurl":"/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46","privilege":[ "PRIVILEGE1" "PRIVILEGE2"],"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}

调取微信地图API

第一步：引入jssdk

npm i weixin-js-sdk

第二步：main.js中使用jssdk

//引入微信jssdkimport wx from 'weixin-js-sdk'Vue.prototype.$wx = wx

第三步：配置config

配置config，所有需要使用JS-SDK的页面必须先注入配置信息

// 微信jdk配置this.$wx.config({beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: this.appid, // 必填，企业微信的corpIDtimestamp: this.timestamp, // 必填，生成签名的时间戳nonceStr: this.nonceStr, // 必填，生成签名的随机串signature: this.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来，调用地图接口})

通过ready接口处理成功验证（config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。）

this.$wx.ready(() => {console.log('进入ready函数')// this.$wx.openLocation({// latitude: 23.13, // 纬度，浮点数，范围为90 ~ -90// longitude: 113.377785, // 经度，浮点数，范围为180 ~ -180。// name: '测试', // 位置名// address: '这是一个测试', // 地址详情说明// scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大// infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转// })})

生成时间戳、随机字符串

timestamp: +new Date(), //签名时间戳nonceStr: Math.random().toString(16).substr(2), //生成签名的随机串

获取jsapi_ticket: 说明文档获取token：说明文档生成签名：说明文档

将timestamp、nonceStr、jsapi_ticket、token按照要求排列通过sha1签名算法生成签名，签名正确才可调用微信api

校验签名：网址在jsApiList中填入需要调用的api，需要的都填入

// 微信jdk配置this.$wx.config({beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: this.appid, // 必填，企业微信的corpIDtimestamp: this.timestamp, // 必填，生成签名的时间戳nonceStr: this.nonceStr, // 必填，生成签名的随机串signature: this.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来，调用地图接口})

校验成功后调用openLocation方法跳转到腾讯地图

跳转样式只在手机上生效，开发者工具中只会有调用成功提示输出

this.$wx.openLocation({latitude: 29.744899, // 纬度，浮点数，范围为90 ~ -90longitude: 106.55495, // 经度，浮点数，范围为180 ~ -180。name: '测试', // 位置名address: '这是一个测试', // 地址详情说明scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转})

完整代码

async mounted() {this.init()await this.getJsapi()// 微信jdk配置this.$wx.config({beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: this.appid, // 必填，企业微信的corpIDtimestamp: this.timestamp, // 必填，生成签名的时间戳nonceStr: this.nonceStr, // 必填，生成签名的随机串signature: this.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来，调用地图接口})// wx.config成功后会走wx.ready,失败会走wx.errorthis.$wx.ready(() => {console.log('进入ready函数')// this.$wx.openLocation({// latitude: 23.13, // 纬度，浮点数，范围为90 ~ -90// longitude: 113.377785, // 经度，浮点数，范围为180 ~ -180。// name: '测试', // 位置名// address: '这是一个测试', // 地址详情说明// scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大// infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转// })})this.$wx.error(res => {alert('错误信息' + JSON.stringify(res))})},methods: {init() {// console.log(AMap, '123')const map = new AMap.Map('container', {center: [116.397428, 39.90923],resizeEnable: true,zoom: 10})},navigation() {console.log('导航')this.$wx.openLocation({latitude: 29.744899, // 纬度，浮点数，范围为90 ~ -90longitude: 106.55495, // 经度，浮点数，范围为180 ~ -180。name: '测试', // 位置名address: '这是一个测试', // 地址详情说明scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转})},getUrl() {let url = window.location.hrefthis.url = url.split('#')[0]},async getJsapi() {//获取ticketconst res = await getJsapiTicket()this.getUrl()this.jsapi_ticket = res.dataconst params = {jsapiTicket: this.jsapi_ticket,timestamp: this.timestamp,noncestr: this.nonceStr,url: this.url}//获取签名this.signature = await getSignature(params)console.log('nonceStr:' + this.nonceStr)console.log('jsapi_ticket:' + this.jsapi_ticket)console.log('timestamp:' + this.timestamp)console.log('url:' + this.url)console.log('signature:' + this.signature)}}