token交互流程

小程序登录流程

import { reqLog ,reqUserInfo } from "../../api/user"
import {setStorage} from "../../utils/storage"

// 导入ComponentWithStore
import {ComponentWithStore} from "mobx-miniprogram-bindings"
// 导入store对象
import {store} from "../../store/store"

// pages/mobx/mobx.js
// 导入ComponentWithStore 替换 Component方法构造页面
ComponentWithStore({
  // 让页面和store建立关联
  storeBindings:{
   store:store, // 需要绑定的store对象
   fields:['token','userInfo'], // 需要从store对象中映射哪些数据
   actions:['setToken',"setUserInfo"], //从store对象中映射actions方法
  },
  /**
   * 页面的初始数据
   */
  methods:{
    login(){
      // 使用wx.login获取用户临时登录凭证code
      wx.login({
        success: async ({code}) => {
          if(code){
            // 获取到临时code后，需要传递给开发者工具
            const {data}=await reqLog("code");
            // 将token存储到本地
            this.setToken(data.token);
            setStorage("token",data.token)
            this.reqUserInfo();
            return;
          }
          toast({title:"授权失败，请重新授权"})
        },
      })
    },
    async reqUserInfo(){
      const {data} = await reqUserInfo()
      this.setUserInfo(data)
    },
  }
  /**
   * 生命周期函数--监听页面加载
   */
})

登录校验

www.npmjs.com/package/asy…

npm i async-validator

  <form bindsubmit="onValidator">
    <input name="name" type="text" placeholder="请输入姓名"/>
    <input name="password" type="text" placeholder="请输入密码"/>
    <button form-type="submit">提交</button>
  </form>

  // 对数据进行验证
  onValidator(e){
   // 定义验证规则
   const rules={
     // key验证规则的名字，名字需要和验证规则保持一致
     name:[
      {required:true,message:"name 不能为空"},
      {type:"string",message:"name 不是字符串"},
      {min:2,max:3,message:"名字最少 2 个字，最多 3 三个字"}
      //  正则验证
      //  {pattern:"",message:""},
      // 自定义验证
      // {validator:()=>{}}
     ],
     password:[
      {required:true,message:"password 不能为空"},
      {type:"string",message:"password 不是字符串"},
      {min:2,max:3,message:"密码最少 2 个字，最多 3 三个字"}
      //  正则验证
      //  {pattern:"",message:""},
      // 自定义验证
      // {validator:()=>{}}
     ],
   }
   const validator = new Schema(rules);
   // 调用实例方法，对数据进行验证
   //  第一个参数是需要验证的数据，是个对象
   validator.validate(e.detail.value,(errors,fields)=>{
   // errors 验证成功为 null，验证失败为数组，数组每一项为错误信息
   //  fields需要验证的属性，属性值是一个数组，数组中包含着错误信息
   if(errors){
    console.log("验证失败");
    console.log(errors)
    console.log(fields)
   }else{
     console.log("验证成功")
   }

   })
  },

更换用户头像

获取用户头像分为两步：

1. 将button组件open-type设置为chooseAvatar
2. 当用户选择所需要的头像之后，可以通过bind:chooseavatar事件回调获取到头像信息的临时路径

<van-button 
 open-type="chooseAvatar" 
 bindchooseavatar="chooseavatar"
>获取用户头像</van-button>

methods:{
    // 更新用户头像
    chooseavatar(event){
      // 获取头像临时路径
      const {avatarUrl} = event.detail
      // this.setData({avatarUrl})
      // 临时路径具有时效性，需要上传服务器，获取永久路径
      wx.uploadFile({
        filePath: avatarUrl, // 要上传文件的资源路径（本地路径）
        name: 'file', // 文件对应的key
        url: 'https://gmall-prod.atguigu.cn/mall-api/fileUpload', // 开发者服务器地址
        header:{
          token:"uyagriafusigjasbrjabj"
        },
        success:(res)=>{
          const {data}=JSON.parse(res.data);
          this.setData({avatarUrl:data})
        }
      })
      // 用户点击保存，更新用户信息，才算是真正更新了头像
      this.updateUserInfo()
    },

将更新后的信息上传服务器，更新用户信息

    updateUserInfo(){
     // 调用用户信息更新接口，
     // 更新成功后，将用户信息存储到store对象
    },

修改昵称

<form bindsubmit="getNickName">
  <!-- 需要给 input 输入框添加 type 属性，属性值需要设置为nickname -->
  <!-- 只有将 input 的 type 属性设置为 nickname ，键盘上方才会显示微信昵称 -->
  <input type="nickname" name="nickname" value="{{nickname}}"/>
  <button bind:tap="cancelForm" form-type="reset">取消</button>
  <button form-type="submit">确定</button>
</form>

    // 获取用户昵称
    getNickName(event){
     console.log(event)
    },