8-小程序数据promise化、共享、分包

小程序API Promise化

wx.requet
官网入口
默认情况下,小程序官方异步API都是基于回调函数实现的

wx.request({method: '', url: '', data: {},header: {'content-type': 'application/json' // 默认值},success (res) {console.log(res.data)},fail () {},complete () { }
})

缺点:容易造成回调地域,代码可读性可维护性差。

实现API Promise化

API Promise化依赖 miniprogram-api-promise 第三方npm包

安装

npm i --save miniprogram-api-promise

安装完之后点击 工具->构建npm
在这里插入图片描述
查看miniprogram_npm文件夹中包是否存在

实现API Promise化

小程序入口文件app.ts,调用一次promisifyAll()

app.ts

import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)App<IAppOption>({...
})

使用:异步获取api
wxml

<van-button bind:tap="getInfo" type="primary">getInfo</van-button>

ts

	async getInfo() {const { data: res } = await wx.p.request({method: 'GET',url: 'https://applet-base-api-t.itheima.net/api/get',data: { name: 'zs', age: 22 }})console.log(res);},

全局数据共享

全局数据共享(又叫:状态管理),为了解决组件之间数据共享的问题

常用的方案如:vuex 、 redux

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

  • mobx-miniprogram用来创建store实例对象
  • mobx-miniprogram-bindings把store中的共享数据或者方法绑定到页面或组件中

安装

yarn add mobx-miniprogram mobx-miniprogram-bindings
npm i --save mobx-miniprogram mobx-miniprogram-bindings

安装完之后点击 工具->构建npm
查看miniprogram_npm文件夹中包是否存在

创建store实例 定义get计算属性和action方法
在这里插入图片描述

import { action, observable } from 'mobx-miniprogram'export const store = observable({numA: 1,numB: 2,getSum() {return this.numA + this.numB},//action 函数用来修改store中数据的值updateNumA: action(function (step) {this.numA += step}),updateNumB: action(function (step) {this.numB += step})
})

页面中使用store

wxml

<view>{{numA}}+{{numB}}={{sum}}
</view>
<van-button bind:tap="btnHandler" data-step="{{1}}">numA+1</van-button>

ts

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'Page({btnHandler(e: WechatMiniprogram.CustomEvent) {console.log(e.target.dataset.step);this.updateNumA(e.target.dataset.step)},/*** 生命周期函数--监听页面加载*/onLoad() {this.storeBindings = createStoreBindings(this, {store,fields: ['numA', 'numB', 'sum'],actions: ['updateNumA']})},onUnload() {this.storeBindings.destoryStoreBindings()},
})

组件中使用store

wxml

<view>{{numA}}+{{numB}}={{sum}}
</view>
<van-button bind:tap="btnHandler" data-step="{{1}}">numA+1</van-button>

ts

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'// components/test/test.ts
var myBehavior = require('../../behaviors/my-behavior');
Component({behaviors: [myBehavior, storeBindingsBehavior],storeBindings: {store,fields: {numA: () => store.numA,numB: () => store.numB,sum: () => store.sum,},actions: {updateNumA: 'updateNumA'}},methods: {btnHandler(e: WechatMiniprogram.CustomEvent) {console.log(e.target.dataset.step);this.updateNumA(e.target.dataset.step)},},
})

点击btn按钮numA会自增,同时sum会重新计算,page和组件的数据会同时改变。
在这里插入图片描述

分包

官网入口
独立分包和普通分包区别

独立分包可以独立于主包和其他分包单独运行 ,不下载主包的情况下,独立运行
普通分包 依赖主包才能运行

配置方法

假设小程序目录结构如下:

├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{"pages": ["pages/index","pages/logs"],"subpackages": [{"root": "moduleA","pages": ["pages/rabbit","pages/squirrel"]}, {"root": "moduleB","pages": ["pages/pear","pages/pineapple"],"independent": true}]
}
  • 独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、template、wxss、自定义组件、插件等(使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制)
  • 主包中的 app.wxss 对独立分包无效,应避免在独立分包页面中使用 app.wxss 中的样式;
  • App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为;
  • 独立分包中暂时不支持使用插件

分包预下载

在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。对于独立分包,也可以预下载主包。

配置方法

预下载分包行为在进入某个页面时触发,通过在 app.json 增加 preloadRule 配置来控制。

{"pages": ["pages/index"],"subpackages": [{"root": "important","pages": ["index"],},{"root": "sub1","pages": ["index"],},{"name": "hello","root": "path/to","pages": ["index"]},{"root": "sub3","pages": ["index"]},{"root": "indep","pages": ["index"],"independent": true}],"preloadRule": {"pages/index": {"network": "all","packages": ["important"]},"sub1/index": {"packages": ["hello", "sub3"]},"sub3/index": {"packages": ["path/to"]},"indep/index": {"packages": ["__APP__"]}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650275.shtml

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

相关文章

Maven命令运行单元测试

使用idea开发多模块项目时,有时别的模块编译不通过会导致不能运行单元测试,这是我们可以使用maven命令来运行单元测试 格式 mvn -DtestDingTalkTest#getAllUsers 命令说明 mvn -Dtest 固定格式 DingTalkTest 单元测试类名 getAllUsers 单元测试方法 单元测试类和单元测试方法…

MySQL--选择数据库(3)

在你连接到 MySQL 数据库后&#xff0c;可能有多个可以操作的数据库&#xff0c;所以你需要选择你要操作的数据库。 从命令提示窗口中选择 MySQL 数据库 在 mysql> 提示窗口中可以很简单的选择特定的数据库。 在 MySQL 中&#xff0c;要选择要使用的数据库&#xff0c;可…

六、Kotlin 类型进阶

1. 类的构造器 & init 代码块 1.1 主构造器 & 副构造器在使用时的注意事项 & 注解 JvmOverloads 推荐在类定义时为类提供一个主构造器&#xff1b; 在为类提供了主构造器的情况下&#xff0c;当再定义其他的副构造器时&#xff0c;要求副构造器必须调用到主构造器…

洛谷C++简单题练习day6—P1830 城市轰炸

day6--P1830 城市轰炸--1.26 习题概述 题目背景 一个大小为 nm 的城市遭到了 x 次轰炸&#xff0c;每次都炸了一个每条边都与边界平行的矩形。 题目描述 在轰炸后&#xff0c;有 y 个关键点&#xff0c;指挥官想知道&#xff0c;它们有没有受到过轰炸&#xff0c;如果有&a…

三件套之三,完美句号,下期有惊喜……

软件简介&#xff1a; 软件【下载地址】获取方式见文末。注&#xff1a;推荐使用&#xff0c;更贴合此安装方法&#xff01; CAXA CAD电子图板2024是一款强大的二维CAD绘图软件&#xff0c;它具有易学易用、稳定高效和性能优越等特点。使用这款软件&#xff0c;用户不仅可以更…

Python网络爬虫实战——实验6:Python实现js逆向与加解密

【实验内容】 本实验主要介绍在数据采集过程中对js代码进行分析从而对加密字段进行解密。 【实验目的】 1、理解js逆向工程的概念 2、学会逆向工程中的加解密分析 【实验步骤】 步骤1 理解js逆向工程的概念 步骤2 学会逆向工程中的加解密分析 步骤3 采集广东政府采购网 步…

Jmeter接口测试-websocket测试

壹 Jmeter接口测试-websocket测试 测试之前的准备工作,需要websocket插件 方式一: 去github下载: https://github.com/maciejzaleski/JMeter-WebSocketSampler/wiki/Dependencies jetty-http-9.1.2.v20140210.jarjetty-io-9.1.2.v20140210.jarjetty-util-9.1.2.v20140210…

真香一个团队协作工具部署

部署 version: "3.4"services:mongo:image: mongocontainer_name: twake-dbvolumes:- /opt/Twake/data:/data/dbnode:image: twaketech/twake-node:latestcontainer_name: twake-webports:- 3345:3000# - 8000:3000environment:- DEVproduction- SEARCH_DRIVERmong…

IndexedDB

Web SQL Database | Can I use... Support tables for HTML5, CSS3, etc IndexedDB | Can I use... Support tables for HTML5, CSS3, etc 为什么websql被废弃&#xff1f;_笔记大全_设计学院 WebSQL有兼容、性能、安全问题&#xff0c;要考虑使用IndexedDB替代。 一文看懂 In…

幻兽帕鲁搭建私服,一键更新方法

看着帕鲁这么火&#xff0c;估计更新会变为常态了&#xff0c;如果有自己搭建私服的话&#xff0c;跟着我下面的方法去进行更新吧&#xff01; 如果你还没有自己的私服&#xff0c;快去三五十搞一个吧&#xff0c;只需三五分钟&#xff0c;叫上你的小伙伴一起去搞起来吧 只需3分…

【自然语言处理的发展】

自然语言处理的发展 自然语言处理&#xff08;NLP&#xff09;作为人工智能领域的一个分支&#xff0c;旨在让计算机理解和生成人类语言。随着深度学习和大数据技术的不断进步&#xff0c;NLP在近年来取得了显著的突破。本文将探讨NLP技术的发展历程、最新技术进展以及未来展望…

如何在Shopee平台上进行宠物类目的选品丨shopee宠物选品

在Shopee平台上进行宠物类目的选品是一个重要的任务&#xff0c;它直接关系到卖家的销售业绩和市场竞争力。为了成功选择适合的宠物用品&#xff0c;在选品过程中&#xff0c;卖家可以遵循以下策略&#xff1a; 先给大家推荐一款shopee知虾数据运营工具知虾免费体验地址&#…

vue3项目中使用Arco Design-Table组件结合h()函数生成表格嵌套表格效果

vue3项目中使用Arco Design-Table组件【点击跳转】结合vue3-h()函数【点击跳转】生成表格嵌套表格效果。 示例效果如下&#xff1a; 【方式一】 给Table组件设置表格的“展开行配置”参数&#xff1a;expandable <a-table :expandable"expandable"></a-t…

ZYNQ程序固化

文章目录 一、简介二、固化操作2.1 生成固化文件2.2 固化到SD卡2.3 固化到Flash 参考 将程序存储在非易失性存储器中&#xff0c;在上电或者复位时让程序自动加载运行。 这个过程需要启动引导程序( Boot Loader)参与&#xff0c;Boot Loader会加载FPGA配置文件&#xff0c;以及…

【异常收集】IDEA启动项目遇到的异常汇总,包括插件异常,版本依赖异常,启动异常等以及对应的解决办法

该文章旨在记录开发中遇到的一些异常&#xff0c;以供遇到似错误进行参考修改 一、项目在多个环境下切换&#xff0c;有一次启动后编译失败&#xff0c;报异常 背景&#xff1a;项目在不同环境下有对应的分支&#xff0c;切换分支后运行项目&#xff0c;报错如下 错误:Kotlin:…

【mac】 配合鼠标放大缩小页面\通过ctrl或cmd键缩放页面

win转mac后&#xff0c;一直苦于页面的操作习惯&#xff0c;终于BBT这个工具可以通过添加滚轮手势来实现快捷键缩放页面 顶部配置触发选择“普通鼠标” 然后设置触发操作

滴滴基于 Ray 的 XGBoost 大规模分布式训练实践

背景介绍 作为机器学习模型的核心代表&#xff0c;XGBoost 在滴滴众多策略算法业务场景中发挥着至关重要的作用。因此&#xff0c;保障并持续提升 XGBoost 模型的离线训练及在线推理稳定性一直是机器学习平台的重点工作。同时&#xff0c;面对多样化的业务场景定制需求和数据规…

ubuntu设置右键打开terminator、code

前言&#xff1a; 这里介绍一种直接右键打开本地目录下的terminator和vscode的方法。 一&#xff1a;右键打开terminator 1.安装terminator sudo apt install terminator 2.安装nautilus-actions filemanager-actions sudo apt-get install nautilus-actions filemanager…

docker-compose Install influxdb1+influxdb2+telegraf

influxd2前言 influxd2 是 InfluxDB 2.x 版本的后台进程,是一个开源的时序数据库平台,用于存储、查询和可视化时间序列数据。它提供了一个强大的查询语言和 API,可以快速而轻松地处理大量的高性能时序数据。 telegraf 是一个开源的代理程序,它可以收集、处理和传输各种不…

Typora 无法导出 pdf 问题的解决

目录 问题描述 解决困难 解决方法 问题描述 Windows 下&#xff0c;以前&#xff08;Windows 11&#xff09; Typora 可以顺利较快地由 .md 导出 .pdf 文件&#xff0c;此功能当然非常实用与重要。 然而&#xff0c;有一次电脑因故重装了系统&#xff08;刷机&#xff09;…