小程序后端搭建(小程序的后台搭建)

zzxiexin 1 0

开发工具:微信开发者工具,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,为接口权限控制准备

本篇先介绍到这,下篇介绍考试业务代码实现。

标签: #小程序后端搭建

  • 评论列表

留言评论

 
QQ在线咨询
售前咨询电话
173-175-32776
技术支持电话
173-175-32776
嘿,欢迎咨询