微信131~140 - 技术栈

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: {
      // 引入的是那个store
    store: 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配置项注册提取的bahavior
    behaviors: [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({

  // 注册 behavior
  behaviors: [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}')
}