今日总结 2025-01-09

（一）npm 支持

了解到小程序使用 npm 模块包需经开发者工具构建。以安装 miniprogram-computed 为例，先在终端创建 package.json 并安装模块，此时模块在 node_modules 中无法直接使用，经构建后放入 miniprogram_npm 目录方可导入小程序。

（二）自定义组件

1. 组件基础
   • 自定义组件结构与页面类似，含 .wxml（布局结构）、.js（处理逻辑，调用 Component 函数）、.json（配置文件，有 component: true）、.wxss（布局样式）。习惯将组件放 components 目录，创建组件后可进行页面注册（在使用页面配置的 usingComponents 中注册，仅限当前页使用）或全局注册（在 app.json 的 usingComponents 注册，可在任意页使用）。
2. 组件进阶
   • 数据与属性：组件数据含自身 data 和外部传入的 properties（类似 Vue 的 props，应用时属性名用 kebab-case，定义用小驼峰命名法）。
   • 生命周期和方法：组件生命周期通过 lifetimes 定义，如 created（实例创建时触发，不能用 setData，可添加自定义属性）、attached（组件初始化完进入页面节点树时触发，类似 Vue 的 mounted）。组件方法定义在 methods 属性中。
   • 组件模板：用 <slot> 定义插槽，默认单插槽，可启用多插槽支持并命名，应用组件时用 slot 属性指定内容放入的插槽位置。
3. Vant 组件：学习引入 Vant 组件库，步骤为安装、构建，推荐全局注册组件（如按钮组件），使用时需去掉小程序全局配置中的 style。

（三）分包加载

1. 使用分包：将相关页面及资源放独立文件夹，在 app.json 用 subPackages 配置，分包含 root（代码根目录）、name（可省略）、pages（页面路径）。如定义 goods_pkg 分包含两个页面。分包有大小限制，所有分包不超 20M，单个分包 / 主包不超 2M，tabBar 页面在主包。
2. 分包预下载：在 app.json 用 preloadRule 配置，指定页面路径为键，设置网络条件（all 或 wifi，默认为 wifi）和要预下载的分包名或根路径，实现访问页面时提前下载分包代码。

（四）框架接口

1. getApp：全局函数，调用可获取小程序应用实例，实现数据或方法共享，但不建议在 app.js 处理复杂耗时数据。
2. getCurrentPages：获取当前页面栈，数组首元素为首页，尾元素为当前页，可获取页面实例及其中数据或执行逻辑，但不能在 App.onLaunch 时调用。

二、重点难点

（一）重点

1. 熟练掌握 npm 模块在小程序中的构建与使用方法，拓展功能实现途径。
2. 深入理解自定义组件的创建、注册、数据传递、生命周期及插槽使用，提升组件化开发能力。
3. 灵活运用分包加载技术，合理配置分包及预下载，优化小程序性能。
4. 掌握 getApp 和 getCurrentPages 等框架接口的使用，实现数据共享与页面间交互。

（二）难点

1. 正确处理自定义组件中 properties 的命名和数据传递，确保组件与外部数据交互无误。
2. 合理规划分包结构与内容，兼顾功能逻辑和大小限制，有效提升加载速度。
3. 准确理解和运用框架接口在不同场景下的功能，避免错误调用引发问题。

三、解决方法

1. 对于自定义组件 properties 问题，仔细对比官方文档示例与实际代码，在实践中多次尝试不同命名和传递方式，总结规律；参考社区经验，学习他人处理类似问题的思路。
2. 分包规划方面，分析小程序功能模块，根据页面关联度和资源大小进行分组；参考优秀案例，借鉴其分包策略和配置技巧。
3. 框架接口学习时，详细阅读文档说明，结合简单示例代码逐步理解功能；在项目中进行小范围测试，观察接口调用效果，及时调整。

四、今日收获

1. 知识技能：全面掌握了小程序开发中 npm 支持、自定义组件、分包加载和框架接口等重要知识与技能，能够运用这些技术优化小程序架构和功能实现。
2. 问题解决：在解决各类技术问题过程中，增强了自主学习和调试能力，学会从官方文档、社区等多渠道获取有效信息