uni-app 开发小程序

uni-app 是一个基于 Vue.js 的前端框架，允许开发者使用一套代码开发并发布到 iOS、Android、Web 以及各种小程序平台，如微信、支付宝、百度等，极大地提高了开发效率和跨平台兼容性。

一、项目准备工作

1. uni-app 介绍

uni-app 通过 Vue.js 语法进行开发，支持组件化开发模式，并提供丰富的 API 和插件生态。开发者可以访问官方文档获取更多详细信息。

2. 开发工具下载和安装

官方推荐使用 HBuilderX 作为开发工具，因为它提供了丰富的模板、智能提示和一键运行功能，简化了开发流程。

• 下载 HBuilderX：访问官方网站下载 App 开发版。
• 安装步骤：将下载的 ZIP 包解压到纯英文目录下，然后双击 HBuilderX.exe 启动工具。

3. 开发工具的配置

为了提升开发体验，建议进行以下配置：

• 安装 SCSS/Sass 编译插件：便于编写样式，可以从插件市场下载并导入 HBuilderX。
• 切换快捷键方案：在工具菜单中，将预设快捷键方案切换为 VS Code，以适应常用开发习惯。
• 修改编辑器设置：通过工具中的设置选项，调整源码视图等基本配置，优化编辑环境。

二、项目开发

1. 网络请求配置

由于小程序平台限制，不支持 axios，原生 wx.request() 功能较简单，因此建议使用 @escook/request-miniprogram 第三方包进行网络请求。

• 添加依赖：通过 npm 初始化项目并安装该包。
• 配置请求：导入 $http 对象，设置根路径和拦截器。例如，在请求前显示加载框，响应后隐藏，并将 $http 挂载到 uni 对象上方便全局调用。

2. 小程序分包加载

分包将小程序项目划分为多个子包，优化首次启动时间和团队协作。

• 好处：减少初始下载体积，提高加载速度，并实现更好的代码解耦。
• 加载规则：启动时下载主包，进入分包页面时按需下载对应分包。注意，非 tabBar 页面可按功能划分。
• 体积限制：整个小程序所有分包不超过 20M，单个分包或主包不超过 2M。
• 配置步骤：在项目根目录创建分包目录（如 subpkg），在 pages.json 中声明 subPackages 节点，定义分包结构，然后创建页面并自动配置。

3. 自定义组件使用

在 components 目录中右键新建组件，填写信息后创建。使用时直接以标签形式引入，无需额外导入，简化了组件复用。

4. 常用组件与功能

• 获取页面可用高度：使用 uni.getSystemInfoSync() 获取系统信息。
• 数据本地存储：通过 uni.setStorageSync() 和 uni.getStorageSync() 进行数据的保存和获取。
• 图片预览：调用 uni.previewImage() 方法，指定当前图片索引和 URL 数组来预览图片。
• 商品导航组件：使用 uni-goods-nav 组件实现商品导航功能，配置相关属性。
• 设置 TabBar 数字徽标：通过 uni.setTabBarBadge() 方法，指定索引和文本字符串来显示徽标。
• 混入功能：创建 mixins 文件夹和 .js 文件，定义计算属性、方法或数据，然后在 Vue 文件中导入并使用 mixins 选项进行混入。
• 获取用户地址：调用 uni.chooseAddress() 方法，处理返回的地址对象。
• 数字输入框：使用 uni-number-box 组件，设置最小、最大值和 change 事件处理数据变化。
• 获取用户信息：通过 uni.getUserProfile() 获取用户个人信息，需声明用途描述。
• 微信登录与支付：使用 uni.login() 获取登录 code，uni.requestPayment() 发起支付。
• 退出登录：调用 uni.showModal() 显示确认对话框，处理用户确认操作。

5. 解决问题

• 处理 WebP 图片在 iOS 上的显示问题：通过字符串替换将 webp 后缀改为 jpg。
• 判断对象是否为空：使用 JSON.stringify(对象) === '{}' 进行检查。

通过以上步骤，开发者可以高效地进行 uni-app 小程序的开发和调试，利用跨平台优势快速部署应用。