UniApp 详细开发流程

乘风破浪酱52436
324 阅读5分钟

UniApp开发整个流程可以分为五个主要阶段：

第一阶段：环境搭建与项目创建

  1. 安装开发工具 (HBuilderX)

    • UniApp 官方推荐使用 HBuilderX 作为主力开发工具，因为它提供了强大的语法提示、一键运行、调试和打包功能。

    • 前往 HBuilderX 官网 下载并安装。建议选择 App开发版。

  2. 创建项目

    • 打开 HBuilderX，点击左上角 文件 -> 新建 -> 项目。

    • 选择 uni-app 项目模板。

    • 模板选择：

      • 默认模板: 最干净，适合初学者或自定义。

      • uni-ui 项目: 集成了 DCloud 的官方 UI 组件库 uni-ui，推荐选择，功能强大。

      • uView UI 项目: 如果你打算使用非常流行的第三方 UI 库 uView，可以选择此模板。

    • 输入项目名称，选择存储路径，点击创建。

  3. 理解项目结构（非常重要！）

    bash

    my-uniapp-project
│  pages.json           # 全局页面配置（路由、导航栏、选项卡等）
│  App.vue              # 应用入口组件，管理全局样式和生命周期
│  main.js              # 应用入口js文件，用于初始化vue实例
│  index.html           # 网页端的首页模板
│  manifest.json        # 应用配置文件（AppID、名称、权限、SDK配置等）
│
├─pages                 # 业务页面目录
│   └─index
│        index.vue      # 首页页面文件
│
├─static                # 静态资源目录（图片、字体等），不会被webpack编译
│
├─uni_modules           # uni_modules 规范的插件目录
│
├─components            # 自定义组件目录
│
└─unpackage             # 打包输出目录（编译后生成）

  4. 配置基础信息

    • manifest.json (源码视图): 配置应用名称、AppID、版本号、启动图、图标、以及各平台（微信小程序、App等）特有的设置。

    • pages.json: 配置全局窗口样式（导航栏颜色、标题等）、底部 tabBar、以及每个页面的路由和单独样式。

第二阶段：开发与调试

  1. 页面与组件开发

    • 在 pages 目录下新建页面文件夹和 .vue 文件。在 pages.json 中注册路由后，HBuilderX 会自动创建页面。

    • 使用标准的 Vue 语法结构 (<template>, <script>, <style>) 进行开发。

    • 组件放在 components 目录下，使用 easycom 规范：无需导入注册，直接在页面中按组件名使用。

  2. 路由与导航

    • 声明式导航: 使用 <navigator> 组件。

    • 编程式导航: 使用 uni.navigateTo({url: '/pages/index/index'}) 等 API。

  3. 样式与布局

    • 使用 rpx 作为响应式单位，可适配不同屏幕宽度。

    • 使用 Flex 布局 或 Grid 布局 来实现灵活排版。

    • 引入第三方 UI 库（如 uView、uni-ui）来加速开发。

  4. 功能实现

    • 调用 UniApp API: 使用 uni.request（网络请求）、uni.showToast（提示框）、uni.getLocation（获取位置）等丰富的原生API。

    • 条件编译: 这是 UniApp 的核心功能，用于处理多端差异。

      javascript

      // #ifdef H5
console.log('这段代码只会在 H5 平台编译');
// #endif

// #ifdef MP-WEIXIN
console.log('这段代码只会在微信小程序平台编译');
// #endif

// #ifdef APP
console.log('这段代码只会在 App 平台编译');
// #endif

  5. 调试

    • H5: 直接点击 HBuilderX 的运行菜单 -> 运行到浏览器。可以在浏览器中使用 Vue Devtools 调试。

    • 微信小程序: 运行 -> 运行到小程序模拟器 -> 微信开发者工具。需要先安装微信开发者工具并开启服务端口。

    • App: 连接真机，运行 -> 运行到手机或模拟器。可以使用 console.log 和 HBuilderX 的控制台进行调试。

第三阶段：测试与优化

  1. 功能测试

    • 在真机上全面测试所有功能，尤其是支付、登录、分享等涉及原生SDK的功能。

    • 测试网络异常、权限申请等边界情况。

  2. 性能优化

    • 分包加载: 在 pages.json 中配置 subPackages，将不常用的页面打包成子包，降低主包体积（微信小程序主包限制为2M）。

    • 图片优化: 压缩静态图片，使用 WebP 格式（支持的平台），或使用云存储/CDN。

    • 组件优化: 避免在 v-for 中使用复杂表达式，使用 v-if 和 v-show wisely。

    • 代码优化: 清理无用代码和日志。

  3. 多端兼容性检查

    • 在各个目标平台（H5、小程序、App）上检查UI表现和功能是否一致，利用条件编译处理差异。

第四阶段：打包与发布

  1. 发行打包

    • H5: 运行 -> 发行 -> 网站-H5手机版。打包后的文件在 unpackage/dist/build/h5，可部署到服务器。

    • 微信小程序: 运行 -> 发行 -> 小程序-微信。HBuilderX 会生成生产包，并自动打开微信开发者工具，然后需要在微信开发者工具中点击“上传”。

    • App:

      • 云打包: (推荐) HBuilderX -> 发行 -> 原生App-云打包。DCloud 服务器会帮你完成打包，无需本地环境。

      • 本地打包: 比较复杂，需要安装 Android Studio 和 Xcode。

  2. 提交审核

    • 微信小程序: 登录微信公众平台，提交上传的代码包进行审核。

    • App: 将云打包生成的 .apk (Android) 或 .ipa (iOS) 文件，分别提交到各大应用市场（如华为、小米、应用宝）和 Apple App Store。

第五阶段：运维与迭代

  1. 监控与运维

    • 使用日志、监控平台（如Sentry）收集错误信息。

    • 关注各平台用户反馈。

  2. 版本迭代

    • 在 manifest.json 中更新版本号。

    • 重复 开发 -> 测试 -> 打包 -> 发布 的流程。

核心技巧与注意事项

  • 多看文档: 遇到问题，首先查阅 UniApp 官方文档，文档非常详细。

  • 拥抱 Vue: 如果你熟悉 Vue，上手 UniApp 会非常快。

  • 善用条件编译: 这是解决多端差异的唯一法宝。

  • 插件市场: DCloud 有一个丰富的 插件市场，很多功能都有现成轮子，不要重复造轮子。

  • 真机调试: App 开发务必进行真机调试，模拟器和真机有时差异很大。

avatar
文章
阅读
粉丝