微信公众号项目
测试号管理
项目进行阶段中,需要进行调试,可以申请微信的测试号功能(测试号)
- 申请之后会有appID以及appsecret
- 配置js接口安全域名
- 可以设置本地域名(可以使用ip地址,上线项目只能使用域名不能使用ip地址(不需要前面http部分:192.168.3.196:9020))
- 扫码关注测试公众号
- 在体验接口权限表中:网页服务->网页账号->网页授权获取用户基本信息点击修改
image-20210318152103144.png)]
首页获取用户信息
第一步:用户同意授权,获取code
- 设置回调页面:(用户同意授权后会跳转的页面) 需要对url进行编码
const callbackURL = encodeURIComponent(`http://192.168.3.196:9020/#/binding`
- 设置appId,state可选,重定向后会带上state参数
const redirectURI = `https://open.weixin.qq.com/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.weixin.qq.com/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.weixin.qq.com/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.weixin.qq.com/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":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
调取微信地图API
第一步:引入jssdk
npm i weixin-js-sdk
第二步:main.js中使用jssdk
//引入微信jssdk
import 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, // 必填,企业微信的corpID
timestamp: 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.132006, // 纬度,浮点数,范围为90 ~ -90
// longitude: 113.377785, // 经度,浮点数,范围为180 ~ -180。
// name: '测试', // 位置名
// address: '这是一个测试', // 地址详情说明
// scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
// infoUrl: 'http://www.baidu.com', // 在查看位置界面底部显示的超链接,可点击跳转
// })
})
- 生成时间戳、随机字符串
timestamp: +new Date(), //签名时间戳
nonceStr: Math.random().toString(16).substr(2), //生成签名的随机串
将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, // 必填,企业微信的corpID
timestamp: this.timestamp, // 必填,生成签名的时间戳
nonceStr: this.nonceStr, // 必填,生成签名的随机串
signature: this.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: ['openLocation'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来,调用地图接口
})
- 校验成功后调用
openLocation
方法跳转到腾讯地图
跳转样式只在手机上生效,开发者工具中只会有调用成功提示输出
this.$wx.openLocation({
latitude: 29.744899, // 纬度,浮点数,范围为90 ~ -90
longitude: 106.55495, // 经度,浮点数,范围为180 ~ -180。
name: '测试', // 位置名
address: '这是一个测试', // 地址详情说明
scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: 'http://www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
})
- 完整代码
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, // 必填,企业微信的corpID
timestamp: this.timestamp, // 必填,生成签名的时间戳
nonceStr: this.nonceStr, // 必填,生成签名的随机串
signature: this.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: ['openLocation'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来,调用地图接口
})
// wx.config成功后会走wx.ready,失败会走wx.error
this.$wx.ready(() => {
console.log('进入ready函数')
// this.$wx.openLocation({
// latitude: 23.132006, // 纬度,浮点数,范围为90 ~ -90
// longitude: 113.377785, // 经度,浮点数,范围为180 ~ -180。
// name: '测试', // 位置名
// address: '这是一个测试', // 地址详情说明
// scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
// infoUrl: 'http://www.baidu.com', // 在查看位置界面底部显示的超链接,可点击跳转
// })
})
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 ~ -90
longitude: 106.55495, // 经度,浮点数,范围为180 ~ -180。
name: '测试', // 位置名
address: '这是一个测试', // 地址详情说明
scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: 'http://www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
})
},
getUrl() {
let url = window.location.href
this.url = url.split('#')[0]
},
async getJsapi() {
//获取ticket
const res = await getJsapiTicket()
this.getUrl()
this.jsapi_ticket = res.data
const 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)
}
}