工程化开发小程序

课程目标

了解小程序开发过程中需要知道的知识点；

知识要点

npm支持

需要注意的是，安装时需要使用 npm install ，而不是 cnpm install Cnpm 安装会导致大部分第三方包无法被正确地构建而导致依赖安装异常和失败。这里列举安装npm包 Vant-weapp dayjs

Alias配置

使用resolveAIias 配置项用来自定义模块路径的映射规则。

响应式状态管理Mobx

在原生小程序开发中，虽然官方提供了setData进行状态管理，但它并不具备vue 2那种响应式、自动派发更新的体验。因此，我们在模板库中引入了小程序官方的mobx-miniprogram-bindings进行响应式状态管理，使得状态的管理方式更接近Vue 2的data和computed

Computed - Watch

小程序官方的小程序自定义组件computed / watch扩展库miniprogram-computed，写法与Vu e2基本无异。

预处理器Less

小程序代码包要求代码文件为wxml / wxss /js /json / wxso 如果我们希望使用TypeScript或less去开发小程序，就需要将ts文件或less文件编译成对应的j s文件或wxss文件，这个编译过程以前是需要开发者在工具夕卜自行配置。

从开发者工具版本1 ·05 · 21 091 01起，小程序官方已支持扩展编译功能。现在只需进行简单配置，即可原生支持Less编译，开发体验大幅提升。

Behaviors (Mixins)

behaviors是用于组件间代码共享的特性，类似于一些编程语言中的\' mlxlns\"或\"traits\"

每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个behavior, behavior也可以引用其它behavior。

常量管理（辅助工具）

在开发中，“魔法数字\"（Magic Numbers)是指代码中直接使用的具体数字或字符串，些值没有明确的意义，容易导致代码难以理解和维护。使用常量可以解决这个问题：

提高可读性：通过使用具有描述性的常量名称，代码变得更容易理解。

便于维护：当某个值需要修改时，只需更新常量定义，而不必搜索整个代码库。

减少错误：避免因为误用或错写数字或字符串而引入的潜在错误。

分包

微信小程序的分包功能是为了减小主包体积，通过按需加载子包提升启动速度和加载效率。

推荐架构

推荐在项目中单独创建一个用于分包的目录（如/packages)，将所有子包页面集中管理。

每个子包实用一个独立的目录，并保持内部结构与/pages目录一致。

npm分包

每个分包都可以拥有自己的package.json，在构建时，他们各自的依赖都不会被打进主包，而是分别打进对应的分包产物中，从而进一步减小主包体积，实现依赖的模块化管理。

环境变量配置

创建环境配置文件：为开发和生产环境分别编写配置（如d evelo p m e nt.js、 production.js)；

编写设置环境的脚本：通过cross-env设置NODE N EV，并将其写入env.js根据环境动态加载配置：Eindex.js中读取env.js的值，加载对应的环境配置；

在业务代码中统一引用配置：项目import config from \'@/config/indexl,无需关心当前是哪个环境；配置构建命令，通过npm run dev或npm run prod来自动设置环境变量并在终端提示当前是哪个环境；

支持Vue Options API风格写法

Component实现

通过mapKeys方法，将vu e风格的配置映射为小程序组件所需要的标准字段 ；

Page实现

通过m a p Keys方法，将Vu e风格的配置映射为小程序页面所需要的标准字段。Pag e 中没有methods这个对象字面量，需要手动创建methods并要处理this指向问题；

 自动化安装/构建npm依赖

编写自动化脚本，辅助一腱完成依赖管理和构建流程：npm i nunIprogram-C1 ora

递归安装npm依赖脚本

自动遍历整个项目中的子目录，查找存在的package.json的目录，并在其中执行npm in staI l ,确保每个模块的依赖都被正确安装；