微信小程序141~150

1.将token存储到Store

复制代码

import { observable, action } from 'mobx-miniprogram'
import { getStorage } from '../miniprogram/utils/storage'

// store对象
export const userStore = observable({
// 定义响应式数据
token: getStorage('token') || '',

  // action用来修改状态
  setToken: action(function (token) {
    this.token = token
  }),

})

2.用户信息存储到Store

调用接口获取用户信息，获取数据以后要存储用户信息数据到本地，为了方便用户信息的获取和使用，将其存储到store

复制代码

import { observable, action } from 'mobx-miniprogram'
import { getStorage } from '../utils/storage'

// store对象
export const userStore = observable({
  // 定义响应式数据
  token: getStorage('token') || '',
  userInfo: getStorage('uesrInfo') || {},
  // action用来修改状态
  setToken: action(function (token) {
    this.token = token
  }),
  setUserInfo: action(function (userInfo) {
    this.userInfo = userInfo
  })
})

3.使用数据渲染用户信息

将用户信息数据从store取出，并渲染到页面上。

复制代码

import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore, userstore } from '../../stores/userstore'
// pages/info/info.js
ComponentWithStore({
  // 页面的初始数据
  data: {
    // 初始化第二个面板数据
    initpanel: [
      {
        url: '/pages/order/list/list',
        title: '商品订单',
        iconfont: 'icon-dingdan'
      },
      {
        url: '/pages/order/list/list',
        title: '礼品卡订单',
        iconfont: 'icon-lipinka'
      },
      {
        url: '/pages/order/list/list',
        title: '退款/售后',
        iconfont: 'icon-tuikuan'
      }
    ]
  },
  storeBindings: {
    store: userStore,
    fields: ['token', 'userInfo']
  },

  // 跳转到登录页面
  toLoginPage() {
    wx.navigateTo({
      url: '/pages/login/login'
    })
  }
})

4.配置分包以及预下载

在app.json中

复制代码

分包
"subPackages": [
        {
            "root": "modules/settingModule",
            "name": "settingModule",
            "pages": [
                "pages/address/add/index",
                "pages/address/list/index",
                "pages/profile/profile"
            ]
        }
    ]
预下载
"preloadRule": {
        "pages/settings/settings": {
            "network": "all",
            "packages": ["settingModule"]
        }
    }

5.渲染用户信息

复制代码

import { BehaviorWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '../../../../stores/userstore'
export const userBehavior = BehaviorWithStore({
  storeBindings: {
    store: 'userStore',
    fields: ['userInfo']
  }
})


import { userBehavior } from './behavior'
Page({
  // 注册behavior
  behavior: [userBehavior]
  })

6.更新用户头像

1.获取头像临时路径

复制代码

// 更新用户头像
  chooseAvatar(event) {
      // 获取临时路径有时效时间，需要将其上传到公司服务器，获取永久路径，在用永久路径更新headimageurl，用户保存
    const { avatarUrl } = event.detail
    this.setData({
      'userInfo.headimageurl': avatarUrl
    })
  },

2.头像临时路径上传到服务器

复制代码

第一种方式
wx.uploadFile({
      filePath: 'avatarUrl',
      name: 'file',
      url: 'https://gmall-prod.atguigu.cn/mall-api/fileUpload', // 开发者服务器地址
      header: {
        token: getStorage('token')
      },
      success: (res) => {
        const uploadRes = JSON.parse(res.data)
        this.setData({
          'userInfo.headimageurl': uploadRes.data
        })
      }
    })
    第二种方式
     await reqUploadFile(avatarUrl, 'file')
    this.setData({
      'userInfo.headimage': resizeBy.data
    })

3.完成头像更新

复制代码

 // 更新用户信息
  async updateUserInfo() {
    const res = await reqUpdataUserInfo(this.data.userInfo)

    if (res.code === 200) {
      // 存储到本地
      setStorage('userInfo', this.data.userInfo)
      // 同步到store
      this.setUserInfo(this.data.userInfo)
      // 给用户提示
      toast({ title: '用户信息更新成功' })
    }
  },

7.更新用户昵称

需要给input输入框type属性设置为nickname，键盘上方才会显示微信昵称

给input输入框添加name属性，form组件才会自动收集有name属性的表单元素的值

给按钮添加form-type属性，如果值是reset就是重置表单

给按钮添加form-type属性，如果值是submit就是提交按钮

复制代码

 // 获取用户昵称
  getNickname(event) {
    // 结构最新的用户昵称
    const { nickname } = event.detail.value
    this.setData({
      'userInfo.nickname': nickname,
      isShowPopup: false
    })
  },


  // 显示修改昵称弹框
  onUpdateNickName() {
    this.setData({
      isShowPopup: true,
      'userInfo.nickname': this.data.userInfo.nickname
    })
  },

8.定义新参数以及封装接口API

复制代码

import { http } from '../utils/http'
export const reqAddAddress = (data) => {
  return http.post('/userAddress/save, data')
}

export const reqAddressList = () => {
  return http.get('/userAddress/findUserAddress')
}

export const reqAddressInfo = (id) => {
  return http.get('/userAddress/{id}')
}

export const reqUpdateAddress = (data) => {
  return http.post('/userAddress/update')
}

export const reqDelAddress = (id) => {
  return http.get('/userAddress/delete/{id}')
}

9. 收集省市级数据

picker从底部弹起滚动选择器

mode的属性是region弹起的就是省市区选择器

value：要求是一个数组，选中的省市区

复制代码

       <!-- 省市区 -->
            <view class="row">
                <text class="title">所在地区</text>

                <!-- picker从底部弹起滚动选择器 -->
                <!-- mode的属性是region弹起的就是省市区选择器 -->
                <!-- value：要求是一个数组，选中的省市区 -->
                <picker mode="region" value="{{ [provinceName,cityName, districtName] }}" bindchange="onAddressChange">
                    <view class="region" wx:if="provinceName">{{ provinceName + '' + cityName + '' + districtName }}</view>
                    <view class="placeholder" wx:else> 请选择收货人所在地区</view>
                </picker>


  // 省市区选择
  onAddressChange(event) {
    const [provinceName, cityName, districtName] = event.detail.value
    const [provinceCode, cityCode, districtCode] = event.detail.code

    this.setData({
      provinceCode,
      cityCode,
      districtCode,
      provinceName,
      cityName,
      districtName
    })
  }
})

10.收集新增地址及其他请求参数

第一种方式：

给input加name、value和按钮加submit属性才能做出一个能提交的表单。

第二种方式：

简易双向数据绑定

复制代码

// wxml
model:value="{{ name }}

// js
  // 保存收货地址
  saveAddrssForm(event) {
    // 组织参数（完整地址，是否设置为默认值）
    const { provinceName, cityName, districtName, address, isDefault } = this.data

    //最终要发送的请求参数
    const params = {
      ...this.data,
      fullAddress: provinceName + cityName + districtName + address,
      isDefault: isDefault ? 1 : 0
    }
  },