引言
本文将以实战为导向，介绍如何使用 UniApp 快速开发一个跨平台应用，并部署到多个终端。适合已有 Vue 基础的开发者快速上手。
一、开发环境搭建
1. 安装 HBuilderX
HBuilderX 是 DCloud 官方推荐的开发工具，内置 UniApp 项目模板与调试工具。
2. 创建项目
-
打开 HBuilderX，选择
文件 -> 新建 -> 项目 -> uni-app。 -
选择模板（推荐
uni-ui模板，内置常用组件）。
二、项目结构解析
复制
/pages
/index
index.vue
/static
/store
index.js
/App.vue
/main.js
/manifest.json
/pages.json-
pages.json：配置页面路径与窗口样式。 -
manifest.json：配置应用信息、图标、权限等。 -
main.js：入口文件，初始化 Vue 实例。
三、页面开发示例
1. 创建页面
在 pages 目录下新建 user.vue：
vue
复制
<template>
<view>
<text>用户名：{{ username }}</text>
<button @click="changeName">修改用户名</button>
</view>
</template>
<script>
export default {
data() {
return {
username: '张三'
};
},
methods: {
changeName() {
this.username = '李四';
}
}
}
</script>2. 配置页面路径
在 pages.json 中添加：
JSON
复制
{
"pages": [
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "用户中心"
}
}
]
}四、跨平台部署
1. 编译到微信小程序
-
配置微信开发者工具路径。
-
点击
发行 -> 小程序-微信，生成小程序代码。 -
在微信开发者工具中导入
unpackage/dist/mp-weixin目录。
2. 编译到 H5
-
点击
发行 -> 网站-H5手机版。 -
部署生成的
unpackage/dist/build/h5目录到服务器即可。
3. 编译到 App
-
安装 Android Studio 或 Xcode。
-
配置原生打包环境。
-
点击
发行 -> 原生App-云打包或本地打包。
五、插件与生态支持
-
UniApp 拥有丰富的插件市场，支持图表、地图、支付等功能。
-
支持 npm 安装第三方依赖，兼容 Vue 生态。
六、项目上线与优化建议
-
使用条件编译减少包体积。
-
图片资源压缩，开启代码压缩。
-
使用云函数或云开发平台提升后端效率。
七、总结
UniApp 提供了一套高效的跨平台开发方案，适合快速迭代、资源有限的团队。通过合理的项目结构设计与平台适配策略，可以显著提升开发效率与用户体验。