微信小程序——API promise化,全局数据共享,MobX,将Stroe中的成员绑定到页面中,在页面上使用Strore中的成员
一.API promise化
1.基于回调函数的异步 API 的缺点
默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的,例如,网络请求的 API 需要按照如下的方式调用:
缺点:容易造成回调地狱的问题,代码的可读性,维护性差。
2.什么是 API Promise 化
API Promise 化,指的是通过额外的配置,将官方提供的、基于回调函数的异步 API ,升级改造为基于 Promise 的异步 APl ,从而提高代码的可读性、维护性,避免回调地狱的问题。
3.实现 API Promise 化
在小程序中,实现 API Promise 化主要依赖于 miniprogram - api - promise 这个第三方的 npm 包。它的安装和使用步骤如下:
npm i --save miniprogram-api-promise@1.0.4
通过ES6按需导入方法,定义空白对象wxp同时赋给自定义属性wx.p
4.调用promise化之后的异步API
实现效果如图所示:
二.全局数据共享
1.什么是全局数据共享
全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有: Vuex 、 Redux 、 Mobx 等。
2.小程序中的全局数据共享方案
在小程序中,可使用 mobx - miniprogram 配合 mobx - miniprogram - bindings 实现全局数据共享。其中:
. mobx - miniprogram 用来创建 Store 实例对象
. mobx - miniprogram - bindings 用来把 Store 中的共享数据或方法,绑定到组件或页面中使用
三.MobX
1.安装 Mobx 相关的包
在项目中运行如下的命令,安装 Mobx 相关的包:
npm install -- save mobx-miniprogram@4.13.2mobx-miniprogram-bindings@1.2.1
注意: MobX 相关的包安装完毕之后,记得删除 miniprogram _ npm 目录后,重新构建 npm 。
2.创建MobX的store实例
3.将Stroe中的成员绑定到页面中
3.1实现思路
a.导入需要的成员方法和store的实例对象。
b.在onload中做绑定的工作,通过调用createStoreBindings方法传递this对象
和配置对象,可以将store中的字段方法绑定到页面的实例身上。
c。返回值做实际的清理工作(destoryStoreBings)
4.在页面上使用Strore中的成员
4.1实现思路
a.在view组件中渲染numA numB 和sum对应的值。
b.在van上放两个button按钮 numA+ 1和 numA- 1实现两个按钮的自增和自减,点击会触发时间处理函数bynHandler1
c.在js页面中定义一个事件处理函数,通过事件对象e接收data-step形式传递
5.将Store中的成员绑定到组件中
5.1实现思路
导入两个成员,在behaviors做一下使用,提供behaviors配置对象,提供数据源通过fields映射字段或对象,通过action映射数据方法