微信小程序API的Promise化及全局状态管理MobX

文章目录

API的Promise化
- 创建promise化的对象
全局状态管理
- 创建
- 页面中绑定
- 页面中使用
- 组件中绑定
- 组件中使用

API的Promise化

默认情况下小程序官方提供的API都是基于回调函数实现的，例如

wx.request({method:'',url:'',data:{},success:()=>{},fail: ()=>{},complete: ()=>{}
})

为了避免回调地狱的问题，我们将小程序的API Promise化

小程序中的Promise主要依赖于miniprogram-api-promise三方npm包

每次装完新包要记得重新构建npm，同时建议重新构建前先删除miniprogram_npm这个文件

创建promise化的对象

// app.js
import {promisifyAll} from 'miniprogram-api-promise'
// 创建wxp和wx.p用于存放封装好的api
const wxp = wx.p = {}
promisifyAll(wx,wxp)

全局状态管理

即解决组件之间数据共享的问题，常用的全局共享解决方案有：Vuex、Redux、MobX等

在小程序中，我们使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享

mobx-miniprogram用于创建store实例对象
mobx-miniprogram-bindings用于将store中的共享数据或方法，绑定到组件或页面中使用

npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

创建

在根目录创建store文件夹，内部含store.js

// 该文件用于创建store实例
import {action, observable} from 'mobx-miniprogram'export const store = observable({// 数据字段numA: 1,numB: 2,// 计算属性get sum(){return this.numA + this.numB},// actionsupdateNumA: action(function(step){this.numA += step})
})

页面中绑定

导入
onLoad周期进行绑定
onUnload周期进行清理

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'onLoad: function (options) {// createStoreBindings(实例,配置对象)// 配置对象：store数据源；fields数据；actions方法this.storeBindings = createStoreBindings(this,{store,fields:['numA','numB','sum'],actions:['updateNumA']})
},
onUnload: function () {this.storeBindings.destroyStoreBindings()
},

页面中使用

<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnClick" data-step="{{1}}"> numA+1 </van-button>
<van-button type="danger" bindtap="btnClick" data-step="{{-1}}"> numA-1 </van-button>

btnClick(e){this.updateNumA(e.target.dataset.step)
},

组件中绑定

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'Component({// 自动绑定behaviors:[storeBindingsBehavior],storeBindings:{store,fields:{numA: ()=> store.numA, // 绑定字段第一种方式numB: (store)=>store.numB, // 绑定字段第二种方式sum:'sum' // 绑定字段第三种方式},actions:{updateNumB:"updateNumB"}}
})

组件中使用

同页面的使用方法

微信小程序API的Promise化及全局状态管理MobX相关推荐

微信小程序-API的Promise化
npm初始化 npm init -y 安装小程序的Promise包 1.使用腾讯官方出的第三方库实现小程序所有API 的 Promise 化 npm install --save miniprogra ...
微信小程序 API的 promise化
// 步骤1 安装 npm包 npm i --save miniprogram-api-promise // 步骤2 删除 miniprogram_npm文件夹 (建议) // 步骤3 重新构 ...
小程序API的Promise化
小程序官方提供的异步API都是基于回调函数来实现的,如大量的使用回调函数就会造成回调地狱的问题,同时代码的可读性和可维护性差,那么这篇内容主要来讲小程序API的Promise化,Promise是一 ...
微信小程序api接口调用用封装
微信小程序api接口调用用封装 1. 在 02-项目下新建request目录及index.js文件 1.1 02-项目\request\index.js 1.2.index.js // 同时发送异步 ...
PbootCMS微信小程序API的封装使用教程
PbootCMS微信小程序API的封装使用教程原文网址:https://www.lkcms.top/rgcms/58.html 第一步:准备md5加密文件 PbootCMS的签名参数signatur ...
小程序怎么处理轮训ajax,微信小程序中使用Promise进行异步流程处理的实例详解...
微信小程序中使用Promise进行异步流程处理的实例详解我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间( ...
微信小程序 api 缓存方案
微信小程序 api 缓存方案背景前言缓存方案(更新策略) 缓存那些接口 Storage 缓存工具类 ApiCache 类实现配置封装 request 请求总结背景为了应对用户流量大,减 ...
微信小程序api概述
微信小程序api概述 1.api 1.1 网络api 1.2 缓存api 1.3 界面api 2 开放能力-获取用户信息 2.1 通过API获取用户信息 3 图片与文件 3.1 下载图片 3.2 上传 ...
小程序长按api_微信小程序API相关知识科普
微信小程序API(Application Programming Interface),即应用程序编程接口.API是一种接口函数,把函数封装起来,给开发者,这样好多的功能就不需要你去实现了,只要会调用 ...