小程序 mobx-miniprogram 的使用

890 阅读1分钟

个人应用场景:

1.进入小程序会请求一个接口,获取小程序信息和用户信息。 例如:unionId appid openId等,小程序未进行按钮授权操作。
2.再通过点击按钮查询,请求查询信息

问题:执行顺序必须先等待第一个接口返回信息,后端需要unionId appid等,再启动时请求如果网速原因导致接口响应过慢,直接点击查询,导致没有unionId appid等信息而报错

解决办法:

1.npm install --save mobx-miniprogram mobx-miniprogram-bindings 安装 小程序的 MobX 绑定辅助库
2.构建npm
3.根目录下创建store文件 并创建index.js文件 内容如下
import { observable, action } from 'mobx-miniprogram'

export const store = observable({
  autoBtn: true,
  setAutoBtn: action(function (data) {
    console.log(this.autoBtn,data,'dd');
    this.autoBtn = data
  }),

})
4.到当前需要操作的页面配置如下:(我的是查询页)
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/index'
  onUnload() {
    // 解绑
    this.storeBindings.destroyStoreBindings()
  },
  onReady() {
    console.log(1112);
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['autoBtn'],
    })
  },
5.由于我再app.js中触发第一个接口(获取 unionId appid ),所以我再app.js中引入
import { createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from './store/index'
//self let self = this;
 self.storeBindings = createStoreBindings(self, {
         store,
         fields: ['autoBtn'],
         actions: ['setAutoBtn'],
 })
 self.setAutoBtn(false)

由于我在app.js中对autoBtn进行处理 控制到报错并阻塞代码

image.png

处理:

对miniprogram_npm文件下的mobx-miniprogr.setData?r.setData(o):''ram-bindings下的index.js中的r.setData(o)替换为r.setData?r.setData(o):''
//问题产生原因是因为app.js中没有setData