UniApp多端开发

UniApp 是一个基于 Vue 语法的跨端开发框架，支持 H5、小程序和原生 App，并能打包为原生应用。如果你熟悉 Vue.js，那么 UniApp 是一个推荐的选择。

1. 开发规范

UniApp 的开发规范结合了 Vue 语法和跨端特性，主要包括以下方面：

• 代码编写：使用 JS、Vue、CSS，以及 TS、SCSS 等预编译器。在 App 端还支持 nVue 和 UTS。
• 开发规范：页面文件采用 Vue 单文件组件（.vue 文件），组件标签靠近小程序规范，JS API 以 uni 为前缀，数据绑定和事件处理遵循 Vue.js，并补充了应用和页面生命周期。对于兼容 App-nVue 平台，建议使用 Flex 布局。
• 跨端原理：UniApp 通过编译器和运行时配合实现一套代码多端运行。编译器将代码编译为各平台（Web、Android、iOS、小程序）的运行时可解析的格式。

2. 创建项目

在 HBuilderX 中创建 UniApp 项目：点击工具栏的文件菜单，选择新建项目，然后选择 UniApp 类型，输入工程名，选择模板（如默认模板），最后点击创建即可成功初始化项目。

3. 配置

项目配置主要在 manifest.json 文件中进行：

• 基础配置：填入 DCloud appID（如无则需获取）。
• H5 配置：设置路由模式为 history，运行基础路径为 /。
• 微信小程序配置：填入 appID，并开启 ES6 转 ES5、上传代码时样式补全和自动压缩等选项。同时，需在微信开发者工具中开启服务端口，并在 HBuilderX 的设置中配置微信开发工具路径。

4. 运行

UniApp 支持多种运行方式：

• 浏览器运行：在 HBuilderX 中点击运行菜单，选择运行到浏览器，然后选择目标浏览器。
• 真机运行：通过 USB 连接手机和电脑，在手机上开启 USB 调试（Android 需在开发人员选项中开启），然后在 HBuilderX 中选择真机运行并选择设备，手机会自动安装测试应用。
• 微信开发者工具运行：在 HBuilderX 中运行到小程序模拟器，选择微信开发者工具，即可在模拟器中预览。

5. 打包

UniApp 支持多端打包：

• 发行 H5：在 HBuilderX 中选择发行到网站-H5手机版。
• 发行小程序：通过微信开发者工具上传代码，然后在公众平台小程序账号中提交审核。
• 发行 App：确保 HBuilderX 为最新版，然后点击发行，选择原生 app-云端打包，配置后点击打包即可生成安装包。

6. 项目结构

典型的 UniApp 项目结构如下：

pages
static
App.vue
main.js
manifest.json
pages.json
uni.scss

UniApp 与小程序的文件对应关系：

• pages.json 对应小程序的 app.json（全局配置）。
• pages/index/index.vue 对应小程序的页面文件（WXML、WXSS、JS）。
• static 目录存放静态本地资源，如图片。
• 其他文件如 manifest.json 用于开发配置，App.vue 为应用根组件。

7. 注意事项

• 语法支持：支持 template/block 和 async/await，CSS 背景图片可引用本地资源。
• 路由和生命周期：路由遵循小程序规范（不支持 Vue Router），参数传递同小程序；生命周期钩子兼容小程序和 Vue。
• 样式和布局：样式支持 rpx 单位，推荐使用 Flex 布局，类或 ID 选择器需规范。
• npm 和全局管理：支持 npm，但建议先从 UniApp 插件市场获取包；全局组件可在 main.js 中通过 Vue.component 注册；全局变量可通过公用模块、Vue.prototype、globalData 或 Vuex 管理。
• 限制：不支持 DOM 操作，v-html 不可用，物理键盘事件不存在，需注意跨端兼容性。