微信小程序——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 [email protected]

通过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 [email protected]@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映射数据方法

6.在组件中使用store中的成员

猜你喜欢

转载自blog.csdn.net/WZY22502701/article/details/128879660