微信小程序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({// 注册behaviorbehavior: [userBehavior]})

6.更新用户头像

1.获取头像临时路径

// 更新用户头像chooseAvatar(event) {// 获取临时路径有时效时间，需要将其上传到公司服务器，获取永久路径，在用永久路径更新headimageurl，用户保存const { avatarUrl } = event.detailthis.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)// 同步到storethis.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.valuethis.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.valueconst [provinceCode, cityCode, districtCode] = event.detail.codethis.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}},