当前位置： 首页 > news >正文

005微信小程序npm包_全局数据共享和分包

news 来源：原创 2025/6/18 11:59:45

npm包_全局数据共享和分包

  • 1. 使用npm包
    • 1.1 Vant Weapp
    • 1.2 API Promise化
  • 2. 全局数据共享
  • 3. 分包
    • 3.1 分包的加载规则
    • 3.2 分包的体积限制
    • 3.3 使用分包
    • 3.3 独立分包
    • 3.4 分包预下载

1. 使用npm包

小程序对npm进行了支持与限制，限制如下：

  • 不支持依赖于 Node.js 内置库的包
  • 不支持依赖与 浏览器内置对象的包
  • 不支持依赖与 C++插件的包

1.1 Vant Weapp

​ Vant Weapp 是有赞前端团队开源的一条小程序 UI 组件库,官方文档,它使用MIT开源许可协议。

安装 Vant 组件库

  • 通过 npm 安装

    • 在当前项目路径的命令行中输入:

      # 通过 npm 安装
npm i @vant/weapp -S --production

  • 构建 npm 包

在这里插入图片描述

  • 修改 app.json

    • 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

    • 在 app.json的 usingComponents节点中引入需要的组件

      //例 引入按钮组件
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

      <!-- wxml 结构 -->
<van-button type="primary">主要按钮</van-button>

    定制全局主题样式：​		Vant Weapp 使用 CSS变量来实现定制主题。​		[所有可用的颜色变量](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)- 在 app.wxss 中，写入 CSS 变量 ，对全局生效：	​```css
page{--button-danger-background-color: #C00000;--button-danger-border-color: #D60000;--button-primary-background-color: #001dc0;--button-primary-border-color: #D60000;
}

1.2 API Promise化

​ API Promise化：指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。

  • 实现 API Promise：在小程序中，实现API Promise化主要依赖与 miniprogram-api-Promise这个第三方 npm 包。

    • 安装：

      npm install --save  miniprogram-api-Promise

    • 在小程序入口文件中 app.js，只需要调用一次 promisifyAll() 方法

      //引入 promisifyAll 方法，用于将小程序的API转换为支持 Promise的形式
import {promisifyAll} from 'miniprogram-api-promise'//创建一个对象 wx.p，并赋值给常量 wxp
const wxp = wx.p = {}//使用 promisifyAll方法将 wx（微信小程序原生API）中的所有方法转换为同时支持回调和 Promise的形式
promisifyAll(wx,wxp)

  • 调用 Promise化之后的异步 API

    <!-- .wxml页面 -->
<van-button  type="primary" bind:tap="getInfo">按钮</van-button>

    // 定义一个异步函数 getInfo
async getInfo(){//使用 wx,p,request，通过 promisifyAll 转换后支持 async/await的版本const {data: res} = await wx.p.request({method: 'GET',url: 'https://applet-base-api-t.itheima.net/api/get',data: {name: 'zs',age: 20}})console.log(res)}

2. 全局数据共享

​ 全局数据共享（又称：状态管理）：是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、ReduX、MobX等。

在这里插入图片描述

  • 小程序中的全局数据共享方案：小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。

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

    在这里插入图片描述

  • MobX

    • 安装 MobX相关包

      npm install --save mobx-miniprogram mobx-miniprogram-bindings

      //专门创建 Store 的实例对象
import {observable, action} from 'mobx-miniprogram'//export 是 JavaScript（包括微信小程序开发中）用于导出模块内容的关键字，它的作用是将变量、函数、对象等从一个文件中“暴露出去”，以便其他文件可以通过 import 来引入和使用。
export const store = observable({//数据字段numA: 1,numB: 2,activeTabBarIndex: 0,//计算属性get sum(){return this.numA +this.numB},//action 函数，专门来修改 store 中数据的值updateNum1: action(function(step){this.numA += step}),updateNum2: action(function(step){this.numB += step})})

  • 将Store中的成员绑定到页面中

    // 页面 .js 文件// 从 mobx-miniprogram-bindings 导入 createStoreBindings
// 这个工具用于将 MobX Store 和小程序页面进行绑定
import { createStoreBindings } from 'mobx-miniprogram-bindings'// 从 store.js 中导入之前创建的全局 store 实例
import { store } from '../../store/store'Page({/*** 生命周期函数 -- 页面加载时触发*/onLoad: function (options) {// 创建 Store 绑定对象// 将 store 中的数据和方法绑定到当前页面（this），实现响应式更新this.storeBindings = createStoreBindings(this, {store,        // 使用的 store 实例fields: ['numA', 'numB', 'sum'], // 需要绑定的响应式字段actions: ['updateNum1'] // 需要绑定的 action 方法})},/*** 生命周期函数 -- 页面卸载时触发（页面关闭或跳转）*/onUnload: function () {// 销毁 Store 绑定，防止内存泄漏this.storeBindings.destroyStoreBindings()}
})

  • 在页面上使用 Store 中的成员

    <!-- .wxml -->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bind:tap="btnHandler1" data-step="{{1}}">numA +1</van-button>
<van-button type="danger" bind:tap="btnHandler1"  data-step="{{-1}}">numA -1</van-button>

      btnHandler1(e){// console.log(e)this.updateNum1(e.target.dataset.step)}

  • 将Store 中的成员绑定到组件中

    import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Component({behaviors:[storeBindingsBehavior],storeBindings: {//数据源store,fields: { //指定要绑定的数据numA: ()=>store.numA,//绑定字段的第1种方法numB: (store) => store.numB,//绑定字段的第2种方法sum: 'sum'//绑定字段的第3种方法},actions: {//指定要绑定的方法updateNum2: 'updateNum2'}}
})

  • 在组件中使用 Store 中的成员

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

      /*** 组件的方法列表*/methods: {btnHandler2(e){this.updateNum2(e.target.dataset.step)}}

3. 分包

​ 分包指的是把一个完整的小程序项目，按照需求分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

  • 可以优化小程序首次启动的下载时间
  • 在多团队共同开发时可以更好的解耦合协作

​ 分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。

在这里插入图片描述

分包后项目的构成，小程序项目由1个主包 + 多个分包组成：

  • 主包：一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源
  • 分包：只包含和当前分包有关的页面和私有资源

在这里插入图片描述

3.1 分包的加载规则

  • 在小程序启动时，默认会下载主包并启动主包页面
    • TabBar页面需要放到主包中
  • 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
    • 非TabBar页面可以按照功能的不同，划分不同的分包之后，进行按需下载

3.2 分包的体积限制

  • 整个小程序所有分包大小不超过 16M（主包+所有分包）
  • 单个分包/主包大小不能超过 2M

3.3 使用分包

配置方法

|———— app.js
|———— app.json
|———— app.wxss
|———— pages //主包的所有页面
|	  |———— index
|	  |____ logs
|———— packageA //第一个分包
|	  |____ pages
|			|---- cat
|			|____ dog
|———— packageB //第二个分包
|	  |____ pages
|			|---- apple
|			|____ banana
|____ utils

//在 app.json 的 subpackages 节点中声明分包的结构
{"pages": ["pages/home/home", "pages/message/message","pages/contact/contact"],"subPackages": [{"root": "pkgA","name": "p1","pages": ["pages/cat/cat","pages/dog/dog"]},{"root": "pkgB","name": "p2","pages": ["pages/apple/apple"]}]
}

打包原则：

  • 小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中
  • 主包也可以有自己的pages（即最外层的 pages 字段）
  • tabBar 页面必须在主包内
  • 分包之间不能相互嵌套

引用原则：

  • 主包无法引用分包内的私有资源
  • 分包之间不能相互引用私有资源
  • 分包可以引用主包内的公共资源

在这里插入图片描述

3.3 独立分包

​ 独立分包本质上也是分包，但可以独立于主包和其它分包而单独运行。

在这里插入图片描述

独立分包和普通分包的区别

  • 普通分包必须依赖于主包才能运行
  • 独立分包可以在不下载主包的情况下，独立运行

独立分包的配置方法：设置 independent 为true

{"pages": ["pages/home/home", "pages/message/message","pages/contact/contact"],"subPackages": [{"root": "pkgB","name": "p2","pages": ["pages/apple/apple"],"independent": true //通过此节点，声明当前 moduleB 分包为 "独立分包"}]
}

引用规则：

  • 主包无法引用独立分包的私有资源
  • 独立分包之间，不能相互引用私有资源
  • 独立分包和普通分包之间，不能相互引用私有资源

3.4 分包预下载

​ 分包预下载：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升后续分包页面时的启动速度。

​ 预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用 preloadRule节点定义分包的预下载规则：

  "preloadRule": {"pages/contact/contact": { //触发分包预下载的页面路径"packages": ["p1"], //通过 root或 name指定预下载哪些分包"network": "wifi" //指定网络模式下进行预下载，默认值：wifi，可选值为：all（不限网络）和 wifi（仅 wifi模式下进行预下载）}}

​ 同一个分包中的页面享有共同的预下载大小限额 2M

在这里插入图片描述

相关文章：

  • # 我使用过的 HTML + CSS 实践总结笔记（含说明）
  • 密度泛函涨落理论在医疗人工智能中的应用与展望：多尺度物理驱动智能的新范式
  • 【Vue】Vue2/3全局属性配置全攻略
  • 实验分享|自研局部DIC-GPU算法与开源GPU算法对比实验
  • SpringBoot-Actuator依赖项的作用配置 Heapdump堆栈信息泄露
  • 微信小程序：将搜索框和表格封装成组件，页面调用组件
  • springboot项目，利用docker打包部署
  • 简说 python
  • python题库及试卷管理系统
  • java循环语句-跳转关键字break、continue
  • 企业软件架构演进：从流程驱动到知识驱动的数字化转型路径
  • Elasticsearch/OpenSearch MCP Quickstart
  • C++并发编程-2.C++ 线程管控
  • FPGA基础 -- Verilog 表达式之操作符
  • FPGA基础 -- Verilog语言要素之数组
  • CMake指令：set_property和get_property
  • Tomcat本地部署Maven Java Web项目
  • Spring Boot + MyBatis + Redis Vue3 Docker + Kubernetes + Nginx
  • python大学生志愿者管理系统-高校志愿者管理信息系统
  • C++智能指针（详细解答）
  • 网站网站建设专业/成都网站seo推广
  • 佛山企业门户网站建设/seo推广编辑
  • 做网站收费标准点击量/潍坊网站外包
  • 台湾做系统集成的公司网站/seo营销网站的设计标准
  • 真人做爰直播视频网站/网站排名系统
  • 外贸网站日本/市场推广计划方案模板