当前位置: 首页 > article >正文

微信小程序——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映射数据方法

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


http://www.kler.cn/a/3823.html

相关文章:

  • Asp .Net Core 实现微服务:集成 Ocelot+Nacos+Swagger+Cors实现网关、服务注册、服务发现
  • 【k8s面试题2025】1、练气期
  • html全局遮罩,通过websocket来实现实时发布公告
  • 51c嵌入式~单片机~合集6
  • 前端基础笔记
  • 在Linux上如何让ollama在GPU上运行模型
  • Python调用GPT3.5接口的最新方法
  • 又一个免费GPT-4工具 Cursor,程序员写代码将被颠覆
  • ③【Java组】蓝桥杯省赛真题 持续更新中...
  • Centos7安装、各种环境配置和常见bug解决方案,保姆级教程(更新中)
  • 【javaEE】阻塞队列、定时器、线程池
  • 进程间通信----信号量
  • GPIO的八种模式分析
  • 【数据结构篇C++实现】- 栈
  • dolphinscheduler 2.0.6 资源中心改造方案二:通过NFS挂载共享目录
  • Warshall算法
  • 网络的UDP协议和TCP协议
  • JavaScript-扫盲
  • 怎么将模糊的照片变清晰
  • Elasticsearch 核心技术(六):内置的 8 种分词器详解 + 代码示例
  • Flink学习笔记(六)Time详解
  • 整理了一份github上比较热门的ChatGPT项目,值得收藏
  • stm32学习笔记-10 I2C通信
  • STM32 KEI 调试新手注意事项
  • 2020年第十一届C/C++ B组第一场蓝桥杯省赛真题
  • 代码质量提升,代码扫描 review 之 Codacy 工具使用