烟台外贸网站建设中国纪检监察报
1.在组件中使用store对象的数据
// 要想使用store中的数据以及方法
// 需要从 mobx-miniprogram-bindings 方法将 ComponentWithStore 方法
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
// 导入store对象
import { numStore } from '../../../stores/numstore'
// 需要使用 ComponentWithStore 方法将 Component 方法替换
ComponentWithStore({data: {},methods: {},//配置当前组件需要与那些store进行关联// 数据会被引到data对象中 // 方法会被注入到methods对象中storeBindings: {// 引入的是那个storestore: numStore,// 引入的是那些数据fields: ['numA', 'numB', 'sum'],// 用的 方法action: ['update']}
})
2.页面中使用store对象----方法一
// 要全局注册
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { numStore } from '../../../store/numstore'
//小程序页面也可以用Component 进行构造
// 如果页面中张使用store对象中的数据，使用方式和组件的使用方式一模一样
ComponentWithStore({data: {},methods: {},// 数据会被引到data对象中 // 方法会被注入到methods对象中storeBindings: {store: numStore,fields: ['numA', 'numB', 'sum'],action: ['update']}
})
3.页面中使用store对象----方法二
可以用 mobx-miniprogram-bindings 提供的BehaviorWithStore方法和store建立关联
import { BehaviorWithStore } from 'mobx-miniprogram-bindings'
import { numstore } from '../../../store/numstore'
export const cartBehavior = BehaviorWithStore({storeBindings: {store: numstore,fields: ['numA', 'numB', 'sum'],action: ['update']}
})import { cartBehavior } from './behavior'
Page({//使用behaviors配置项注册提取的bahaviorbehaviors: [cartBehavior]
})
4.fields、actions对象写法
首推数组写法
之前是数组写法
现在是对象写法
fields:
映射形式：需要指定data中那些字段来源于store，以及在store中的名字是什么
numA: 'numA',
numB: 'numB',
sum: 'sum'
函数形式: key:data中那些字段来源于store;value：函数及函数内部需要返回对应store数据的值。
numA: () => numstore.numA,
numB: () => numstore.numB,
sum: () => numstore.sum,
自定义形式：如果对属性进行了自定义，模板中需要使用自定义以后的属性。
actions:
映射形式:指定模板中那些方法来源于store，以及在store中的名字是什么
updateData: ' update '
5.绑定多个store以及命名空间
一个页面或组件可能会绑定多个Store,我们可以将storeBindings 改造成数组。数组每一项就是一个个要绑定的 Store 。
如果多个 Store 中存在相同的数据，显示会出现异常，还可以通过 namespace 属性给当前 Store 开启命名空间，在开启命名空间以后，访问数据的时候，需要加上 namespace 的名字才可以。
{store: 'numstore',fields: ['numA', 'numB', 'sum'],action: {updateData: 'update'}}
6.miniprogram-computed计算属性和监听器
如果需要在组件中使用计算属性功能，需要 miniprogram-computed 库中导入 ComponentWithComputed 方法
在使用时：需要将 Component 方法替换成 ComponentWithComputed 方法 ，原本组件配置项也需要写到该方法中
在替换以后，就可以新增 computed 以及 watch 配置项。
计算属性方法内部必须有返回值。
在计算属性中，不能使用this来获取data中的函数，如果想要获取，就使用形参。
计算属性具有缓存特性，它只执行一次，后续在使用的时候，返回的是第一次执行的结果，只要依赖的数据没有发生改变，返回的始终是第一次执行的结果。
import { ComponentWithComputed } from 'miniprogram-computed'Component({computed: {total (data) {// 计算属性方法内部必须有返回值//在计算属性中，不能使用this来获取data中的函数，如果想要获取，就使用形参return data.a + data.b}},data: {a: 1,b: 2}
})
监听器：
watch: {// 单个监听a: function (a) {console.log(a)},b: function (b) {console.log(b)},// 多个监听'a,b': function (a, b) {console.log(a, b)}},
7.Mobx 与 Computed 结合使用
需要使用 ComponentWithStore 方法将 Component 方法进行替换
// 导入计算属性 behavior
const computedBehavior = require('miniprogram-computed').behavior
ComponentWithStore({// 注册 behaviorbehaviors: [computedBehavior],storeBindings: {store: numStore,fields: ['numA', 'numB', 'sum'],actions: ['update']}
})
ComponentWithComputed进行构建，和store建立关联、绑定，Mobx需要旧版 API
import { numStore } from '../../store/numstore'
// 需要使用导入的 ComponentWithComputed 替换 Component 方法
ComponentWithComputed({behaviors: [storeBindingsBehavior],storeBindings: {store: numStore,fields: ['numA', 'numB', 'sum'],actions: ['update']}
})
8.什么是Token
什么是 Token
Token 是服务器生成的一串字符串，用作客户端发起请求的一个身份令牌。当第一次登录成功后，服务器生成一个 Token 便将此 Token 返回给客户端，客户端在接收到 Token 以后，会使用某种方式将 Token 保存到本地。以后客户端发起请求，只需要在请求头上带上这个 Token ，服务器通过验证 Token 来确认用户的身份，而无需再次带上用户名和密码。
Token的具体流程
- 客户端向服务器发起登录请求，服务端验证用户名与密码
- 验证成功后，服务端会签发一个 Token ，并将 Token 发送到客户端
- 客户端收到 token 以后，将其存储起来，比如放在 localStorage 、 sessionStorage 中
- 客户端每次向服务器请求资源的时候需要带着服务端签发的 Token ，服务端收到请求，然后去验证客户端请求里面带着的 Token ，如果验证成功，就向客户端返回请求的数据
9.用户登录-小程序登录功能
// 导入封装的模板方法
import { toast } from '../../utils/extendApi'
// 导入接口API 函数
import { reqLogin } from '../../api/user'
Page({login() {wx.login({success: async ({ code }) => {if (code) {// 获取临时登录凭证code以后，传递给开发者服务器const res = await reqLogin(code)// 登录成功后，需要将服务器响应的自定义登录存储到本地setStorage('token', data.token)} else {toast({ title: '授权失败，请重新授权' })}}})}
})import http from '../utils/http'
export const reqLogin = (code) => {return http.get('/weixin/wxLogin/{code}')
}