STLG_07_20_微信小程序开发 - 进阶阶段复习与总结

        在微信小程序开发的进阶阶段，复习与总结是巩固知识的关键。重点回顾复杂交互设计、性能优化技巧、组件化开发、数据管理与缓存策略，以及与微信生态的深度结合（如支付、分享等）。同时，梳理项目实践中的问题与解决方案，总结框架选择与项目架构经验，关注代码规范与版本管理，提升开发效率与质量。

1. 核心知识点回顾

1.1 小程序框架

小程序生命周期

• App 生命周期：小程序全局的生命周期函数，例如 onLaunch（小程序启动时触发）、onShow（小程序切换到前台时触发）、onHide（小程序切换到后台时触发）。
• Page 生命周期：页面级别的生命周期函数，例如 onLoad（页面加载时触发）、onShow（页面显示时触发）、onReady（页面首次渲染完成时触发）、onHide（页面隐藏时触发）。
• Component 生命周期：组件的生命周期函数，例如 created（组件实例刚刚被创建时触发）、attached（组件插入到页面的 DOM 树中时触发）、detached（组件从页面 DOM 树中移除时触发）。

数据绑定

• { {}} 语法：用于在 WXML 中绑定数据，例如 { {message}} 会将 Page 中的 data 数据 message 绑定到页面上。
• 动态绑定：通过 setData 方法更新数据，页面的显示内容会自动更新。

事件处理

• 常用事件类型：
  • tap：点击事件。
  • longpress：长按事件。
  • input：输入框内容变化事件。
  • change：组件值变化事件。
• 事件对象的属性：例如 event.target（触发事件的组件）、event.currentTarget（事件绑定的组件）、event.detail（事件的详细信息）。

1.2 组件与API

常用组件

• view：类似于 HTML 中的 div，用于布局。
• scroll-view：可滚动的视图容器。
• swiper：轮播图组件。
• navigator：页面导航组件。
• button：按钮组件，支持多种类型和样式。
• input：输入框组件，支持文本输入。
• image：图片组件，支持图片的加载和显示。

API调用

• 网络请求：使用 wx.request 发起网络请求，获取数据。
• 文件操作：使用 wx.uploadFile 上传文件，wx.downloadFile 下载文件。
• 设备信息：使用 wx.getSystemInfo 获取设备的基本信息，如屏幕尺寸、操作系统版本等。

自定义组件

• 封装复用：将常用的功能封装成组件，通过 properties 和 methods 实现组件的属性和方法。
• 组件通信：通过 triggerEvent 触发事件，实现组件之间的通信。

1.3 布局与样式

Flex布局

• 容器属性：display: flex、flex-direction（主轴方向）、justify-content（主轴对齐方式）、align-items（交叉轴对齐方式）。
• 项目属性：flex（分配剩余空间）、align-self（单个项目的对齐方式）。

单位与尺寸

• rpx：小程序的响应式像素单位，1rpx 在不同屏幕上会自动适配，建议使用 rpx 来布局页面。

样式与选择器

• CSS 选择器：例如 id 选择器（#id）、类选择器（.class）、标签选择器（tag）。
• 样式规则：例如 color（文字颜色）、background-color（背景颜色）、font-size（字体大小）。

1.4 性能优化

减少重绘与回流

• 优化 DOM 操作：减少频繁的 DOM 操作，尽量将多个操作合并在一起执行。
• 虚拟 DOM：小程序的视图层会自动处理虚拟 DOM，开发者只需关注数据的变化。

图片优化

• 图片格式：优先使用 WebP 格式，减少图片体积。
• 图片尺寸：根据实际需要选择合适的图片尺寸，避免加载过大的图片。

懒加载

• 图片懒加载：使用 wx.createIntersectionObserver 实现图片的懒加载，当图片进入可视区域时再进行加载。
• 数据懒加载：在页面滚动到底部时，动态加载更多数据，减少首屏加载的压力。

1.5 安全性

数据加密

• 敏感数据加密：使用 wx.rsa 等加密 API 对敏感数据进行加密，确保数据在传输过程中不会被窃取。
• HTTPS：确保网络请求使用 HTTPS 协议，防止中间人攻击。

权限控制

• 用户授权：通过 wx.authorize 获取用户授权，例如获取用户位置、相机权限等。
• 权限管理：在小程序后台设置权限规则，确保只有授权用户才能访问某些功能。

2. 优化功能小程序

2.1 页面加载优化

减少首屏加载时间

• 代码拆分：将不常使用的代码拆分到独立的文件中，按需加载，减少首屏加载的代码量。
• 按需加载：使用 wx.loadFontFace 按需加载字体文件，使用 wx.preloadPage 预加载页面。

使用缓存

• 数据缓存：通过 wx.setStorageSync 将常用数据缓存到本地，减少网络请求次数。
• 页面缓存：使用 wx.pageScrollTo 缓存页面滚动位置，提升用户体验。

2.2 用户体验优化

页面过渡效果

• wx.navigateTo 和 wx.redirectTo：使用这两种方法实现页面跳转时，可以设置过渡动画，提升用户体验。
• wx.switchTab：用于切换 Tab 页面，通常不需要过渡动画。

动画效果

• wx.createAnimation：通过调用 wx.createAnimation 创建动画对象，设置动画的属性和时间，然后应用到组件上。
• 过渡动画：使用 CSS 的 transition 属性实现简单的过渡效果。

响应式布局

• rpx 和 Flex 布局：结合使用 rpx 和 Flex 布局，确保页面在不同设备上都能自适应显示。
• 媒体查询：使用 CSS 的 @media 查询，针对不同屏幕尺寸设置不同的样式。

2.3 代码质量优化

代码规范

• 命名规范：遵循驼峰命名法，例如 pageTitle、userInfo。
• 代码注释：在关键代码处添加注释，方便他人理解和维护。

模块化开发

• require 和 import：使用 require 和 import 实现代码的模块化，提高代码的复用性。
• 组件化开发：将常用的功能封装成组件，减少重复代码。

代码压缩与混淆

• 代码压缩：使用构建工具（如 Webpack）对代码进行压缩，减少代码体积。
• 代码混淆：使用混淆工具对代码进行混淆，防止代码被轻易反编译。

2.4 错误处理与调试

错误监控

• wx.onError：监听小程序的全局错误，例如 JavaScript 错误、API 调用错误。
• wx.onPageNotFound：监听页面未找到的错误，避免用户看到空白页面。

调试工具

• 微信开发者工具：使用开发者工具的调试功能，快速定位和解决问题，例如查看网络请求、调试 JavaScript 代码。
• Console 日志：在代码中使用 console.log 输出调试信息，方便快速定位问题。

3. 进阶知识点

3.1 使用云开发

云函数

• 编写和部署：在云函数中编写后端逻辑，例如处理用户请求、调用第三方 API。
• 调用云函数：通过 wx.cloud.callFunction 调用云函数，获取返回结果。

数据库操作

• 增删改查：使用云数据库的 API 进行增删改查操作，例如 collection.add（添加数据）、collection.get（获取数据）。
• 数据库索引：为常用的查询字段创建索引，提升查询速度。

云存储

• 文件上传与下载：使用 wx.cloud.uploadFile 上传文件，使用 wx.cloud.downloadFile 下载文件。
• 文件管理：在云存储中管理文件，例如删除文件、获取文件的下载链接。

3.2 高级API

WebSocket

• 实时通信：使用 WebSocket 实现实时通信，例如聊天功能、实时数据推送。
• 事件监听：通过 socket.onMessage 监听服务器发送的消息，通过 socket.send 发送消息到服务器。

地理位置

• 获取地理位置：使用 wx.getLocation 获取用户的当前地理位置，使用 wx.chooseLocation 让用户选择地理位置。
• 地图组件：使用 map 组件显示地图，标记用户的位置。

媒体处理

• 音频处理：使用 wx.createInnerAudioContext 处理音频，例如播放、暂停、音量控制。
• 视频处理：使用 video 组件播放视频，支持多种格式和分辨率。

3.3 第三方库与插件

NPM 支持

• 安装 NPM 包：在小程序项目中使用 npm install 安装第三方库，扩展小程序的功能。
• 构建 NPM：在微信开发者工具中构建 NPM，将 NPM 包编译到小程序中。

插件使用

• 引入插件：通过 usingComponents 引入小程序插件，例如地图插件、支付插件。
• 插件配置：在小程序后台配置插件的 AppID 和版本号，确保插件能够正常使用。