文章目录

前言一、公众号开发测试号相关配置？二、调用微信授权相关api获取用户头像、名称等信息1.用appID获取授权信息所用code2.获取AccessToken3.获取用户信息 总结

前言

记录第一次微信网页开发

一、公众号开发测试号相关配置？

打开公众号平台选择公众平台测试账号

在本地调试调用微信公众号官方api获取相关数据可以使用测试号中的appID与appsecret

配置安全域名(例：网页项目运行的本地id域名192.***)扫描测试二维码关注该测试号

授权回调页面域名配置

二、调用微信授权相关api获取用户头像、名称等信息

1.用appID获取授权信息所用code

代码如下：

// 1. 获取授权信息所需codegetCode() {let redirect = encodeURIComponent(window.location.href); //重定向回来的地址this.wx_code = this.getUrlParam("code"); // 截取url中的code//判断有没有codeif (!this.wx_code) {//获取code的地址。获取成功重定向后地址栏中将会带有code，判断没有code的话，就跳转到微信官方链接上获取，获取成功后会再重定向回来window.location.href =`https://open./connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;} else {// 获取到了codethis.getAccessToken()}},//截取地址栏里的codegetUrlParam: function(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;},

2.获取AccessToken

代码如下：

// 2. 获取AccessTokengetAccessToken() {getH5AccessToken().then(res => {if (res.code === 0) {if (res.data != null) {this.access_token = res.datathis.wxGetUserInfo() // 第四步} else {this.getOpenId() // 第三步}} else {uni.showToast({title: res.message,icon: 'none'})}})},// 3. 如果服务端没有存储access_token，则通过 code 换取网页授权access_tokengetOpenId() {console.log(this.wx_code)let that = thislet url =`https://api./sns/oauth2/access_token?appid=${this.appid}&secret=${this.appsecret}&code=${this.wx_code}&grant_type=authorization_code`;uni.request({type: "get", //请求类型url: '/nongMuRenZGTSec/common/thirdUrl?url=' + encodeURIComponent(url),success(data) {let res = JSON.parse(data.data.data)if (res.errcode) {uni.showToast({title: res.errmsg,icon: 'none'})} else {that.access_token = res.access_tokenthat.openid = res.openidthat.setAccessToken()that.wxGetUserInfo()}}})},

3.获取用户信息

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

// 4. 获取用户信息wxGetUserInfo() {let that = thislet userUrl =`https://api./sns/userinfo?access_token=${this.access_token}&openid=${this.userInfo.openid}&lang=zh_CN`uni.request({type: "get", //请求类型url: '/nongMuRenZGTSec/common/thirdUrl?url=' +encodeURIComponent(userUrl),success(userData) {let resData = JSON.parse(userData.data.data)saveGzhMember({headPhoto: resData.headimgurl,nickname: resData.nickname,openId: resData.openid,}).then(res => {console.log(res)if (res.code === 0) {that.userData = res.datathat.userInfo = {headPhoto: res.data.headPhoto,isExist: true,nickname: res.data.nickname,openId: res.data.openId,unionId: ''}uni.setStorageSync('userInfo', that.userInfo)}})}})},

总结

以上就是今天要讲的内容，本文仅仅简单介绍了网页授权相关api的使用，具体细节可以去官网查看

微信官方文档