uniapp 开发详解

uniapp 基础概念

uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次开发，多端发布（如 iOS、Android、H5、小程序等）。其核心特点是使用 Vue 语法，通过条件编译实现多平台适配。

环境搭建

1. 安装 HBuilderX
   官方推荐使用 HBuilderX 作为开发工具，下载后直接安装即可。HBuilderX 内置了 uniapp 的开发环境和调试工具。
2. 创建项目
   在 HBuilderX 中选择“新建项目”，选择 uniapp 模板（如默认模板、uni-ui 模板等）。
3. 安装依赖
   若需使用 npm 管理依赖，在项目根目录运行以下命令：

   npm install

项目结构

• pages：存放页面文件，每个页面为一个文件夹，包含 .vue 文件。
• static：存放静态资源（如图片、字体）。
• manifest.json：应用配置，如 AppID、启动图等。
• pages.json：路由和页面配置，定义页面路径、导航栏样式等。

开发示例

1. 页面开发
   在 pages/index/index.vue 中编写 Vue 单文件组件：

   <template>
     <view>
       <text>{{ message }}</text>
     </view>
   </template>
   <script>
   export default {
     data() {
       return {
         message: "Hello uniapp"
       };
     }
   };
   </script>

2. 路由跳转
   使用 uni.navigateTo 实现页面跳转：

   uni.navigateTo({
     url: '/pages/detail/detail'
   });

多端适配

1. 条件编译
   通过注释语法实现不同平台的代码适配：

   // #ifdef H5
   console.log("仅在 H5 平台生效");
   // #endif

2. API 兼容性
   使用 uniapp 提供的跨平台 API（如 uni.request），避免直接调用平台特定 API。

调试与发布

1. 调试
   • H5：直接浏览器运行。
   • 小程序：使用开发者工具导入项目。
   • App：通过 HBuilderX 连接真机或模拟器调试。
2. 打包发布
   • H5：生成静态文件部署到服务器。
   • 小程序：通过开发者工具上传代码。
   • App：使用 HBuilderX 生成安装包（APK/IPA）。

性能优化

1. 减少页面层级
   避免过深的节点嵌套，使用 v-if 替代 v-show。
2. 图片压缩
   使用工具压缩静态资源，减少包体积。
3. 按需加载
   通过分包或懒加载降低首屏加载时间。

常见问题

1. 样式兼容
   使用 rpx 单位适配不同屏幕，避免 px。
2. 生命周期
   注意 onLoad 和 onShow 的区别，前者仅触发一次，后者每次页面显示时触发。

通过以上步骤，可以快速上手 uniapp 开发并实现多端发布需求。