微信小程序开发教程7:实现小程序登陆功能
平凡也就两个字: 懒和惰;
成功也就两个字: 苦和勤;
优秀也就两个字: 你和我。
跟着我从0学习JAVA、spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美!
关注微信公众号【 IT特靠谱 】,每天都会分享技术心得~
微信小程序开发教程7:实现小程序登陆功能
1 简介
开发微信小程序不仅仅只是前端页面样式,小程序页面只是用户访问的窗口和门面。仅仅只有页面没有任何意义。页面请求服务端接口完成用户登陆、商品搜索、加购商品、下单、支付、退款....等整套流程才是核心。没有后端服务的支持,页面仅仅是页面,没有任何商品数据!
本章教程,将完成用户登陆小程序的功能,并详细讲解用户小程序登陆的整个流程!
小程序登陆流程:
步骤1:小程序APP在onLaunch的时候调用微信登陆接口(wx.login),获取到用户登陆凭证code;
步骤2:调用后端接口(/wxMiniApp/findMemberBaseInfoByCode,底层实际上调用的是微信服务端auth.code2Session接口),使用步骤1的 code 换取 openid 和 session_key 等信息,然后将 openid 和 session_key 都缓存起来。
步骤3:用换取的openId用户唯一标识调用后端接口(/member/miniApp/login),进行登陆(如果用户第一次登陆,后端会先自动注册然后再登陆)!
步骤4:服务端登陆成功后会返回已授权的jwt token信息,小程序需要将该toke缓存起来,调用服务端其他接口的时候请求头需要携带该token,否则无权限请求!
2 入口app.js
小程序APP在onLaunch的时候完成了上面所有4个步骤!
//app.js
import { postRequest } from "./utils/request.js"
import { api } from "./utils/api.js"App({onLaunch: function () {// // 展示本地存储能力// var logs = wx.getStorageSync('logs') || []// logs.unshift(Date.now())// wx.setStorageSync('logs', logs)// 微信小程序登录wx.login({success: res => {//1. res.code 到后台换取 openId, sessionKeypostRequest(api.findMemberBaseInfoByCode, {code: res.code}).then(result => {if(result.data.code == 200){//2. 用openId登陆后端服务postRequest(api.miniAppLogin, {openId: result.data.data.openId}).then(loginResult => {if(loginResult.data.code == 200){const tokenHead = loginResult.data.data.tokenHead;const token = loginResult.data.data.token;//将token缓存起来wx.setStorageSync('userToken', tokenHead + token);//将sessionKey缓存起来wx.setStorageSync('sessionKey', result.data.data.sessionKey);//将openId缓存起来wx.setStorageSync('openId', result.data.data.openId);}else{wx.showToast({title: '登陆失败',icon: 'none',duration: 2000})}});}else{wx.showToast({title: '获取登陆凭证失败',icon: 'none',duration: 2000})}});}})// // 获取用户信息// wx.getSetting({// success: res => {// if (res.authSetting['scope.userInfo']) {// // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框// wx.getUserInfo({// success: res => {// // 可以将 res 发送给后台解码出 unionId// this.globalData.userInfo = res.userInfo// // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回// // 所以此处加入 callback 以防止这种情况// if (this.userInfoReadyCallback) {// this.userInfoReadyCallback(res)// }// }// })// }// }// })},// globalData: {// userInfo: null// }
})
3 新增request.js和api.js
request.js中封装了new Promise((resolve, reject)请求,实现http的get和post请求封装。
api.js中统一管理了所有调用的服务端api接口path。
3.1 request.js代码
//本地后端api访问ip + port,生成环境应替换成生产域名!
const baseApi = "http://localhost:8085";//封装get request请求
export const getRequest = (url)=>{return new Promise((resolve, reject) => {wx.request({url: baseApi + url,method: "get",header: {//添加请求头"Authorization": wx.getStorageSync('userToken') || [] },success(result){resolve(result);},fail(err){reject(err);}})})
}
//封装post request请求
export const postRequest = (url, data)=>{return new Promise((resolve, reject) => {wx.request({url: baseApi + url,method: "post",data: data,header: {//添加请求头"Authorization": wx.getStorageSync('userToken') || []},success(result){resolve(result);},fail(err){reject(err);}})})
}
3.2 api.js代码
//统一管理所有后端api接口路径
let api = {findMemberBaseInfoByCode : '/wxMiniApp/findMemberBaseInfoByCode',miniAppLogin : '/member/miniApp/login'
};
export{api};
4 测试小程序登陆
4.1 code换取openId和sessionKey接口测试
4.2 登陆后端服务
由于第一次登陆小程序时,会员系统中并没有该小程序会员,因此后端服务会调用注册会员接口自动将openId这个会员注册导会员系统中。查看数据库,下面为注册的会员记录:
至此,微信小程序登陆 --> 换取openId和sessionKey --> 注册并登陆小程序后端服务功能就完成了!
如果你有疑问或需要技术支持,关注公众号联系我吧~
微信小程序开发教程7:实现小程序登陆功能相关推荐
- 编程小白的计算机毕业设计指导开发教程-JSP+Servlet实现注册登陆功能
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- 微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
- 微信小程序开发教程第七章:微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
- 微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
- 小程序开发用什么编程语言_微信小程序开发教程是什么?费用多少?
微信小程序如今已经非常常见,渗透到了我们日常生活的方方面面,包括生活服务.出行.点餐.电商购物.企业展示--商家可以开发适合自己行业的小程序,以吸引线上用户,同时提高自身服务运营效率.不过这些不同种类 ...
- 微信小程序开发语言(微信小程序开发教程)详细步骤
微信小程序开发语言 开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...
- 【微信小程序开发(云壁纸小程序教程)】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和 微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和 微 ...
- 零基础入门,花生壳骨灰级微信小程序开发教程
微信小程序早已成为企业运营必不可少的一部分,对于小程序的开发需求也只增不减,而一个小程序在使用过程中是否流畅,也关系者用户体验度. 微信小程序的优势和特点: 一.不占内存 现在很多人都会遇到手机内存不 ...
- 微信小程序装修解决方案ppt_微信小程序开发教程.ppt
微信小程序开发教程.ppt 从开发CMS系统学起 从入门到精通的微信小程序开发教程 学微信小程序开发 从实践中学习是开发者最好最快的学习方法.本教程将和大家从零开始 一步一步搭建微信小程序CMS系统, ...
- 微信小程序开发教程:项目五导航组件 课后习题
<微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 简述如何动态设置窗口的背景色. 六.编程题 1.设计一款 ...
最新文章
- php分布式redis实现session共享
- 二相并行FIR滤波器的matlab及使用FIR IP 核的FPGA实现
- git clone从远程主机克隆一个版本库
- 6-tips-for-managing-property-files-with-spring--转
- python数据分析图_Python数据分析:手把手教你用Pandas生成可视化图表的教程
- EditText图文混排
- oracle model 分组,【已解决】关于Oracle分组函数高级用法(按照N条分组并生成唯一号)...
- 演练 网站的导航栏 0920
- docker run 与docker start的区别
- 如何学习前端开发,有哪些前端教程,前端学习路线图?
- 【软件项目管理】知识点整理
- 2022互联网大厂新年礼盒:腾讯向善、阿里家书、百度箱包抢镜!
- mysql mysqlhotcopy_mysql中mysqlhotcopy备份数据库总结
- mysql 游标插入数据_mysql游标插入问题
- 如何解决存在的1px问题?
- Visual Studio Code (vscode)配置LaTeX最详细版(vscode下载安装+基本设置+内外pdf查看器设置+个人配置代码)
- 云原生 - 自建数据库 VS 云数据库,到底怎么选?
- 5号字对应的数字字号_5号字体是多少pt-字号,尺寸
- java程序设计概念对象先行_《Java程序设计概念:对象先行》【摘要 书评 在线阅读】-苏宁易购图书...
- matlab输入二项分布函数,matlab实现二项分布