开发工具：微信开发者工具，vs2019
第一步，注册小程序拿到appid.
第二步，
1、后台框架搭建，我用这个框架，我主导设计开发的“伪”低代码平台之平台架构简介 ，直接写业务代码即可。
2、微信开发者工具创建新项目。
第三步，前端页面搭建，业务代码编写
代码分享部分，
登陆页展示，一个图片展示，一个登陆按钮，这个按钮会获取微信用户信息。
wxml页面
<button type="primary" v-if="canIUse" open-type="getUserInfo" bindgetuserinfo="getPerson"> 微信登陆</button>
js代码
getPerson:function(e){
console.log(e)
let wxuser=e.detail.userInfo;
//获取微信id，登陆用户信息
var self = this;
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs);
//默认类型
wx.setStorageSync("currentType", 0);
// 登录
wx.login({
success: res => {
let wxid = wx.getStorageSync("openid");
console.log(wxid)
// 请求openid
wx.request({
url: app.globalData.BASE_URL + "/WebChatInfo/GetWXInfo",
data: {
code: res.code,
wxspAppid: app.globalData.params.appid,
wxspSecret: app.globalData.params.secret,
grantType: app.globalData.params.getOpenID.grantType,
wxUrl: app.globalData.params.getOpenID.url,
userInfo:wxuser
},
header: {
'content-type': 'application/json'
},
method: 'POST',
success: function (res) {
wxid = res.data.data.openid;
if (wxid != null && wxid != "") {
//写入存储
wx.setStorageSync("openid", wxid);
//openid 设为全局变量
app.globalData.openid = wxid;
// 获取token 写到缓存
app.globalData.token ="Bearer "+res.data.data.token
wx.setStorageSync('token', "Bearer "+res.data.data.token);
let token=wx.getStorageSync("token")
console.log("tokenppp "+token)
app.globalData.userInfo=res.data.data.userInfo
app.globalData.currentUserInfo = res.data.data.userInfo;
console.log(app.globalData.currentUserInfo.UserID)
wx.setStorageSync('currentUserInfo', res.data.data.userInfo);
//页面跳转
wx.switchTab({
url: '/pages/home/index',
})
} else {
wx.showToast({
title: '当前网络环境较差，请更换网络！',
icon: 'none',
duration: 1500
})
}
},
fail: function (res) {
wx.showToast({
title: '当前网络环境较差，请更换网络！',
icon: 'none',
duration: 1500
})
}
})
}
});
self.getAppAccessToken();
},
这样写，点击按钮就会请求授权。获取到用户信息，调用wx.login 获取code在调后台接口获取openid。保存用户信息
登陆后
因为框架会验证接口的权限，小程序封装统一的http请求，统一加请求头。
代码如下
//封装微信请求接口
const request = async (url, method, data, type = "application/json;") => {
let _url = BASE_URL + url;
//有accessToken时要验证accessToken的有效性
let token = app.globalData.token;
//token = "";
console.log("token"+ token);
return new Promise((resolve, reject) => {
wx.request({
url: _url,
method: method,
data: data,
dataType: "json",
header: {
"content-type": type,
"Authorization": token //统一封装请求头token
},
success: res => {
// console.log("req:"+JSON.stringify(res));
if (res.statusCode === 200) {
// let data = JSON.parse(Base64.decode(res.data));
resolve(res.data);
} else if(res.statusCode === 401){
//没有权限则跳转到登陆页面
// wx.setStorageSync('currentUserInfo', null);
// wx.setStorageSync('token', null);
// wx.setStorageSync('openid', null);
// wx.redirectTo({
// url: '/pages/login/login',
// })
}
else {
//404,401,500都跳转到错误页面
resolve({code: res.statusCode,msg:'Server error'});
}
},
fail(error) {
resolve({code: -1,msg:'Server error'});
}
});
});
};
使用方式如下
API.getUserTestPaperList({
UserId:ID
}).then((ret)=>{
wx.hideLoading();
if(ret.code == "0")
{
//请求成功后处理数据
this.setData({
list:ret.data
});
}
});
总结一下：
1、小程序登陆获取用户信息需要按代码示例那样写
2、统一封装请求后台的方法，请求头添加token,为接口权限控制准备
本篇先介绍到这，下篇介绍考试业务代码实现。
