自学微信小程序第五天-优快云博客

本文链接：https://blog.youkuaiyun.com/learning_tom/article/details/149545813

一、微信小程序中使用npm包的详细步骤

1. 准备工作

确保计算机已安装Node.js环境（可通过node -v命令检查版本），Node.js自带npm包管理工具。

2. 初始化项目的npm环境

打开微信开发者工具，在项目根目录处右键选择“在终端中打开”，执行以下命令：

npm init -y

该命令会在项目根目录生成package.json文件，用于记录项目依赖的npm包信息。

3. 安装所需的npm包

根据项目需求，使用npm install命令安装指定的npm包。例如，安装UI组件库Vant Weapp：

npm i @vant/weapp -S --production

其中，-S表示将包添加到package.json的dependencies中，--production表示只安装生产环境依赖。

4. 配置项目支持npm

在微信开发者工具的菜单栏中，点击“工具”→“构建npm”。构建完成后，项目根目录会生成miniprogram_npm文件夹，里面存放着可在小程序中直接使用的npm包文件。

若构建失败，可检查项目设置：点击“详情”→“本地设置”，确保勾选“使用npm模块”。

5. 在小程序中使用npm包

以使用Vant Weapp的Button组件为例：

在需要使用该组件的页面或组件的.json文件中，添加如下配置：

{ "usingComponents": { "van-button": "@vant/weapp/button/index" } }

在对应的.wxml文件中，直接使用组件：

<van-button type="primary">按钮</van-button>

6. 管理npm包版本

若需要更新npm包版本，可执行npm update 包名命令；若需要卸载npm包，执行npm uninstall 包名命令。每次修改npm包后，需重新执行“构建npm”操作。

二、在微信小程序中实现全局数据共享的方法

1. 使用mobx-miniprogram实现全局数据共享

（1）安装相关依赖

在项目终端执行以下命令：

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

（2）创建Store实例

在项目中新建store文件夹，在该文件夹下创建index.js文件，用于定义全局数据和修改数据的方法：

import { observable, action } from 'mobx-miniprogram';

export const store = observable({ // 全局共享的数据 count: 0, // 计算属性，根据已有数据计算得出新数据 get doubleCount() { return this.count * 2; }, // 修改数据的方法，需用action包裹 updateCount: action(function(newCount) { this.count = newCount; }) });

（3）在页面中使用Store

在页面的.js文件中引入相关模块并绑定Store：

import { createStoreBindings } from 'mobx-miniprogram-bindings';

import { store } from '../../store/index';

Page({ onLoad() { // 绑定Store到当前页面 this.storeBindings = createStoreBindings(this, { store, fields: ['count', 'doubleCount'], // 需要使用的Store中的数据 actions: ['updateCount'] // 需要使用的Store中的方法 }); }, onUnload() { // 页面卸载时解绑Store this.storeBindings.destroy(); }, // 页面中的方法，调用Store中的方法修改数据 handleClick() { this.updateCount(10); } });

在页面的.wxml中直接使用Store中的数据：

<view>当前 count 值：{{ count }}</view>

<view>count 的两倍：{{ doubleCount }}</view>

<button bindtap="handleClick">修改 count</button>

（4）在组件中使用Store

在组件的.js文件中引入相关模块并通过behavior绑定Store：

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings';

import { store } from '../../store/index';

Component({ behaviors: [storeBindingsBehavior], // 引入Store绑定的behavior storeBindings: { store, fields: ['count'], actions: ['updateCount'] }, methods: { onTap() { this.updateCount(20); } } });

三、微信小程序分包的具体实现方法和注意事项

1. 分包的基本概念

分包是将小程序的代码按照功能拆分成不同的包，主包包含小程序的启动页面和公共资源，分包则包含其他页面和相关资源。这样可以减少小程序首次启动时的加载时间。

2. 分包的具体实现方法

（1）配置分包结构

在项目的app.json文件中，通过subpackages（或subPackages）字段配置分包。例如：

{ "pages": [ "pages/index/index", // 主包页面 "pages/logs/logs" ], "subpackages": [ { "root": "packageA", // 分包A的根目录 "name": "packA", // 分包A的名称，可选 "pages": [ "pages/goods/goods", // 分包A中的页面 "pages/detail/detail" ] }, { "root": "packageB", // 分包B的根目录 "pages": [ "pages/user/user" ] } ] }