>[success] # 小程序登录

>[danger] ##### 步骤
1. 验证本地storage 中是否存在用户信息和token。
2. 存在请求后台服务器验证token 是否过期
3. 如果`存在且过期` 或 `不存在`需要像 微信的`wx.login` 获取微信标识的`code`
4. `code` 给到后台,后台和微信服务器置换需要的信息,后台再将登录 `token` 用户信息返回
5. 前端更新`storage ` 中的token 和 用户信息
* getCode封装
~~~js
export function getCode() {
return new Promise((resolve, reject) => {
wx.login({
success: (res) => {
resolve(res.code)
}
})
})
}
~~~
~~~js
import { getCode } from "../../service/login";
import {request} from '../../serves/index'
// pages/12_learn_login/index.js
Page({
// onLoad登录的流程
async onLoad() {
// 1.获取token, 判断token是否有值
const token = wx.getStorageSync('token') || ""
// 2.判断token是否过期
const res = await request.post({
url: "/auth",
header: {
token: token
}
})
// console.log(res);
// 2.如果token有值
if (token && res.message === "已登录") {
console.log("请求其他的数据");
} else {
this.handleLogin()
}
},
async handleLogin() {
// 1.获取code
const code = await getCode()
// 2.使用code换取token
const res = await hyLoginReqInstance.post({
url: "/login",
data: { code }
})
// 3.保存token
wx.setStorageSync('token', res.token)
}
// handleLogin() {
// // 1.获取code
// wx.login({
// success: (res) => {
// const code = res.code
// // 2.将这个code发送自己的服务器(后端)
// wx.request({
// url: "http://123.207.32.32:3000/login",
// data: {
// code
// },
// method: "post",
// success: (res) => {
// const token = res.data.token
// wx.setStorageSync('token', token)
// }
// })
// }
// })
// }
})
~~~
- 小程序了解
- webview 是什么
- Native App、Web App、Hybrid App
- 小程序架构模型
- 小程序配置文件
- app.js -- App函数
- 页面.js -- page
- 生命周期????
- 小程序 -- 页面wxml
- 小程序 -- WXS
- 小程序 -- 事件
- 小程序 -- 样式wxss
- 小程序 -- 组件开发
- 小程序 -- 组件插槽
- 小程序 -- 组件的生命周期
- 组件总结
- 小程序 -- 混入
- 小程序基本组件
- text -- 文本
- view -- 视图容器
- button -- 按钮
- image -- 图片
- scroll-view -- 滚动容器
- input -- 双向绑定
- 通用属性
- 小程序常用Api
- 微信网络请求
- 微信小程序弹窗
- 微信小程序分享
- 获取设备信息 / 获取位置信息
- Storage存储
- 页面跳转
- 小程序登录
