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

发布于：2025-06-18 ⋅ 阅读:(20) ⋅ 点赞:(0)

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

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

在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布