微信小程序——API promise化,全局数据共享,MobX,将Stroe中的成员绑定到页面中,在页面上使用Strore中的成员

news/2024/5/16 21:32:45/文章来源:https://blog.csdn.net/WZY22502701/article/details/128879660

一.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.luyixian.cn/news_show_87350.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

25种代码坏味道总结

前言 什么样的代码是好代码呢?好的代码应该命名规范、可读性强、扩展性强、健壮性......而不好的代码又有哪些典型特征呢?这25种代码坏味道大家要注意啦 1. Duplicated Code (重复代码) 重复代码就是不同地点,有着相同…

为什么保存按钮那么像自动售货机?

高中生 Every Highschool Senior: I can’t wait to move out and go to college and Be on my Own. 每一个高中毕业生: 我等不及离开去大学,独立自我。 Everyone in College: 大学里的每个人: 评论区 Stoovin: The real world sucks. But…

LD_PRELOAD劫持(超详细篇)

目录 前提知识 环境变量 链接 LD_PRELOAD LD_LIBRARY_PATH ELF文件 /bin、/sbin、/usr/sbin、/usr/bin 漏洞复现 案例一(随机数劫持) 案例二(ls的劫持) 案例三(__attribute__&LD_PRELOAD劫持) 案例四(利用 LD_PRELOAD 绕过 Disable_Functions) 案例五(利用 er…

小白学Pytorch系列--Torch.nn API Pooling layers(3)

小白学Pytorch系列–Torch.nn API (3) 方法注释nn.MaxPool1d对由多个输入平面组成的输入信号应用1D最大池化。nn.MaxPool2d对由多个输入平面组成的输入信号应用二维最大池化。nn.MaxPool3d在由多个输入平面组成的输入信号上应用3D最大池化。nn.MaxUnpool1d计算MaxPool1d的偏逆。…

Zookeeper3.5.7版本—— Curator框架实现分布式锁案例

目录一、Zookeeper原生的 Java API 存在的问题二、Zookeeper原生的 Java API 存在问题的解决方式三、Curator框架实现分布式锁示例代码3.1、pom文件添加依赖3.2、示例代码3.3、Curator框架实现分布式锁测试一、Zookeeper原生的 Java API 存在的问题 会话连接是异步的&#xff…

Kubernetes为容器和 Pods 分配 CPU 资源

Kubernetes为容器和 Pods 分配 CPU 资源 一、指定CPU请求和CPU限制 1、创建一个命名空间(namespace) [rootmaster ~]# kubectl create namespace cpu-example namespace/cpu-example created2、编写yaml文件 要为容器指定CPU请求,需要在容…

STC32G 比较器及其应用编程

一 STC32G系列单片机寄存器简介STC32G系列单片机内部集成了一个比较器,其正极可以在P3.7、P5.0、P5.1、或者ADC的模拟输入通道间切换;而负极可以是P3.7或者内部BandGap经过OP的REF电压。通过配置分时复用可以实现多个比较器的应用。STC32G系列单片机的比…

MySQL数据库基础到进阶笔记整理包含事务、SQL优化、锁等内容

写在前面 本文是在学习MySQL数据库时整理的笔记,可供初学者学习 是在https://dhc.pythonanywhere.com/entry/share/?key12e4a7324f68371db3984d93e26e458962a4f0bc188ec23ec70637a4f3b4d58f 笔记基础上增加了一些内容以及后续的锁、InnoDB引擎等内容 课程参考b站黑…

Java数据结构与算法----搜索篇(DFS与BFS)

一.概念DFS(Depth First Search)深度优先搜索 和BFS(Breadth First Search)广度优先搜索 是两种广泛应用于搜索和遍历算法中的基本技术。这两种算法都涉及到搜索数据结构中的节点 。这里我们以二叉树为例,简单地图解一…

实验九 TSP问题

《算法设计与分析》实验报告 所在院系 计算机与信息工程学院 学生学号 学生姓名 年级专业 2020级计算机科学与技术 授课教师 彭绪富 学 期 2022-2023学年第一学期 提交时间 2022年10月26日 目 录 实验九-1:TSP问题 一、实验目的与要求 二…

【图解http】

目录了解web及网络基础TCP/IP协议族与HTTP关系密切的协议:IP、TCP和DNS各种协议与HTTP协议的关系URI和URLhttp协议HTTP是不保存状态的协议请求URI定位资源告知服务器意图的HTTP方法持久连接节省通信量HTTP报文编码提升传输速率压缩传输的内容编码分割发送的分块传输…

关于参加新星计划的收获

目录 作者简介 前言 一、新星计划介绍 二、新星计划创作目标 (一)创作打卡阶段第1周(3/13-3/19) (二)创作打卡阶段第2周(3/20-3/26) 三、参赛文章的构思与创作 &#xff08…

Go map 内存泄露

前言 在Go中, map这个结构使用的频率还是比较高的. 其实在所有的语言中, map使用的频率都是很高的. 之前在使用中, 一直都知道map的内存在元素删除的时候不会回收, 但一直没有仔细的研究为什么. 今天就来好好揣摩揣摩. func main() {m : make(map[int][128]byte)for i : 0; …

2023热门抖音权重查询小程序源码

2023热门抖音权重查询小程序源码 跟抖音上很火的一模一样,小程序适配优化。接口免费。小程序不是网页 修改教程: 1,如果想修改或者去除水印,直接删除或修改“index.html”12~22行 2,如果想修改logo,直接…

“全球首款旗舰”填补行业空白,两轮电动车技术创新为何只看绿源?

作者 | 曾响铃 文 | 响铃说 乒乓作为我们的“国球”,在数不清的体育赛事里书写辉煌战绩,也进一步被国人熟知、热爱。更难能可贵的是“国球”精神:“别人可能练了一千次,而我们却练了一万次”,冠军品质,奋…

MYSQL【基础篇】MYSQL 主要函数

MySQL中的函数主要分为以下四类: 字符串函数、数值函数、日期函数、流程函数 ​MySQL函数是MySQL数据库提供的内部函数。这些内部函数可以帮助用户更加方便的处理表中的数据 MySQL函数可以对表中数据进行相应的处理,以便得到用户希望得到的数据。这些函…

JAVA Session会话 Thymeleaf - 视图模板技术配置步骤

JAVAWebSession会话会话跟踪技术session保存作用域Thymeleaf - 视图模板技术配置过程Session会话 HTTP是无状态的:服务器无法区分这两个请求是同一个客户端发过来的,还是不同的客户端发过来的 现实问题:第一次请求是添加商品到购物车&#x…

C++中的string类【详细分析及模拟实现】

string类 目录string类一、stirng的介绍及使用1.为什么学习string类?2.标准库中的string类2.1 引入:编码2.2 basic_string3.string类的使用3.1 构造函数3.2 遍历string方式1:for循环方式2:范围for4.迭代器4.1 正向迭代器4.2反向迭…

Golang流媒体实战之二:回源

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 今天的实战是流传输过程中的常见功能:回源如下图,lal(源站)和lal(拉流节点)代表两台电脑,上面都部署了lalVLC在…

【蓝桥杯】巧克力

问题描述: 题解分析: 错误思想:本来的想法是先使用低价格的巧克力,并且判断需要吃几块【其中内容比较细】,直接计算即可,但是本题好像不可以用简单的最小价格的贪心来做 正确思路:创建一个结…