UniApp 全面学习分享：从入门到独立开发

一、为什么选择 UniAppUniApp 是由 DCloud 推出的跨端开发框架基于 Vue.js 语法一套代码可同时编译到 iOS、Android、H5、微信小程序、支付宝小程序、抖音小程序、快手小程序、百度小程序、QQ 小程序、钉钉小程序等10 个平台。核心优势开发效率极高一套代码多端运行大幅减少重复开发工作量学习成本低完全基于 Vue.js 语法Vue 开发者可无缝上手性能接近原生小程序端编译为原生组件App 端使用自研的 uni-app-x 引擎原 nvue渲染性能媲美原生生态丰富拥有庞大的插件市场uni-app 插件市场提供大量现成组件和模板官方支持完善DCloud 持续更新维护文档详细社区活跃适用场景多端同步上线的小程序项目快速原型开发和 MVP 验证中小企业的移动应用开发已有 Vue 技术栈团队的跨端项目二、开发环境搭建1. 必备工具HBuilderX官方推荐的 IDE对 UniApp 有极致优化内置代码提示、运行、调试、打包等功能微信开发者工具用于调试微信小程序端Chrome 浏览器用于调试 H5 端手机模拟器或真机用于调试 App 端2. 快速创建项目打开 HBuilderX点击「文件」→「新建」→「项目」选择「uni-app」项目类型填写项目名称和保存路径选择模板推荐新手选择「默认模板」或「Hello uni-app」模板点击「创建」等待项目初始化完成3. 运行项目H5 端点击工具栏「运行」→「运行到浏览器」→ 选择 Chrome微信小程序端点击工具栏「运行」→「运行到小程序模拟器」→ 微信开发者工具注意需要先在微信开发者工具中开启「服务端口」设置 → 安全设置 → 服务端口App 端点击工具栏「运行」→「运行到手机或模拟器」→ 选择已连接的设备三、核心概念与基础语法1. 项目目录结构┌─ components # 自定义组件目录 ├─ pages # 页面目录每个页面一个子目录 │ └─ index # 首页 │ ├─ index.vue # 页面文件 │ └─ index.json # 页面配置文件 ├─ static # 静态资源目录图片、字体等 ├─ unpackage # 编译后的文件目录 ├─ App.vue # 应用入口文件配置全局样式和生命周期 ├─ main.js # 应用入口文件初始化 Vue 实例 ├─ manifest.json # 应用配置文件配置应用名称、图标、权限等 └─ pages.json # 全局页面配置文件配置页面路径、导航栏、tabBar 等2. 页面与组件UniApp 遵循 Vue.js 的组件化开发思想页面本质上也是一个组件只是拥有特殊的生命周期和配置。页面生命周期onLoad页面加载时触发可获取页面参数onShow页面显示时触发每次进入页面都会触发onReady页面初次渲染完成时触发onHide页面隐藏时触发onUnload页面卸载时触发组件生命周期与 Vue.js 组件生命周期完全一致beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted3. 模板语法完全兼容 Vue.js 模板语法同时支持小程序的特殊语法template view classcontainer !-- 数据绑定 -- text{{ message }}/text !-- 条件渲染 -- view v-ifisShow显示内容/view view v-else隐藏内容/view !-- 列表渲染 -- view v-for(item, index) in list :keyindex {{ index 1 }}. {{ item.name }} /view !-- 事件绑定 -- button clickhandleClick点击我/button /view /template script export default { data() { return { message: Hello UniApp!, isShow: true, list: [ { name: Vue.js }, { name: UniApp }, { name: 小程序 } ] } }, methods: { handleClick() { uni.showToast({ title: 按钮被点击了 }) } } } /script4. 全局 APIUniApp 提供了统一的全局 API以uni.开头替代各平台的原生 API界面交互uni.showToast、uni.showModal、uni.showLoading路由跳转uni.navigateTo、uni.redirectTo、uni.switchTab、uni.navigateBack网络请求uni.request数据存储uni.setStorageSync、uni.getStorageSync设备信息uni.getSystemInfoSync四、常用组件与实战技巧1. 基础组件UniApp 提供了大量内置组件覆盖大部分开发场景视图容器view、scroll-view、swiper基础内容text、rich-text、progress表单组件input、textarea、button、checkbox、radio、picker导航组件navigator媒体组件image、video、audio2. 自定义组件创建可复用的自定义组件提高代码复用率!-- components/MyButton.vue -- template button classmy-button clickhandleClick slot/slot /button /template script export default { name: MyButton, methods: { handleClick() { this.$emit(click) } } } /script style scoped .my-button { background-color: #007aff; color: white; border-radius: 4px; padding: 10px 20px; } /style使用自定义组件template view MyButton clickhandleButtonClick自定义按钮/MyButton /view /template script import MyButton from /components/MyButton.vue export default { components: { MyButton }, methods: { handleButtonClick() { console.log(自定义按钮被点击了) } } } /script3. 跨端适配技巧尺寸单位rpxUniApp 推荐的尺寸单位基于屏幕宽度自适应750rpx 等于屏幕宽度px固定像素单位不随屏幕大小变化upx旧版 UniApp 使用的自适应单位现已被 rpx 替代条件编译使用条件编译实现不同平台的差异化代码template view !-- #ifdef H5 -- text这是 H5 端显示的内容/text !-- #endif -- !-- #ifdef MP-WEIXIN -- text这是微信小程序端显示的内容/text !-- #endif -- !-- #ifdef APP-PLUS -- text这是 App 端显示的内容/text !-- #endif -- /view /template script export default { onLoad() { // #ifdef H5 console.log(H5 端加载) // #endif // #ifdef MP-WEIXIN console.log(微信小程序端加载) // #endif } } /script五、项目开发最佳实践1. 代码规范使用 ESLint 进行代码检查保持代码风格一致组件命名采用 PascalCase 风格如MyComponent.vue页面命名采用 kebab-case 风格如user-center.vue静态资源放在static目录下按类型分类存放接口请求统一封装便于管理和维护2. 状态管理对于复杂项目推荐使用 Pinia 进行状态管理UniApp 3.0 已内置支持// stores/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: , userInfo: null }), actions: { setToken(token) { this.token token uni.setStorageSync(token, token) }, setUserInfo(userInfo) { this.userInfo userInfo }, logout() { this.token this.userInfo null uni.removeStorageSync(token) } } })使用状态管理script setup import { useUserStore } from /stores/user.js const userStore useUserStore() const handleLogin () { // 模拟登录 userStore.setToken(fake-token-123456) userStore.setUserInfo({ name: 张三, avatar: https://example.com/avatar.png }) } /script3. 接口请求封装// utils/request.js const baseURL https://api.example.com const request (options) { return new Promise((resolve, reject) { uni.request({ url: baseURL options.url, method: options.method || GET, data: options.data || {}, header: { Content-Type: application/json, Authorization: uni.getStorageSync(token) || }, success: (res) { if (res.statusCode 200) { resolve(res.data) } else { reject(res.data) } }, fail: (err) { reject(err) } }) }) } export default request使用封装的请求import request from /utils/request.js // 获取用户信息 export const getUserInfo () { return request({ url: /user/info, method: GET }) } // 登录 export const login (data) { return request({ url: /user/login, method: POST, data }) }六、性能优化1. 页面优化减少页面层级避免嵌套过深使用onLoad加载必要数据避免在onShow中执行大量操作图片懒加载给image组件添加lazy-load属性长列表优化使用scroll-view结合v-for并设置key属性2. 组件优化拆分大型组件提高复用性和可维护性使用v-if替代v-show来隐藏不常显示的组件避免在模板中使用复杂表达式将逻辑移到计算属性中3. 资源优化压缩图片大小使用 WebP 格式字体图标替代图片图标按需引入第三方插件和组件七、常见问题与解决方案微信小程序端无法发送网络请求解决方案在微信公众平台配置「服务器域名」将接口域名添加到「request 合法域名」中App 端白屏问题解决方案检查manifest.json中的应用配置确保权限设置正确尝试清理项目缓存后重新编译不同平台样式不一致解决方案使用条件编译针对不同平台编写差异化样式尽量使用 UniApp 内置组件避免使用平台特有样式图片在不同平台显示比例不一致解决方案给image组件设置mode属性常用值有aspectFit保持宽高比显示完整图片和aspectFill保持宽高比裁剪图片八、学习资源推荐官方资源UniApp 官方文档最权威、最全面的学习资料UniApp 插件市场提供大量现成的组件、模板和插件DCloud 社区遇到问题可以在这里提问和交流视频教程B 站搜索「UniApp 入门到精通」有很多免费的优质教程DCloud 官方推出的「UniApp 实战教程」实战项目从简单的 TodoList 开始逐步开发复杂的电商、社交、新闻类应用参考 GitHub 上的开源 UniApp 项目学习别人的代码写法九、总结UniApp 是一款非常优秀的跨端开发框架它极大地降低了移动应用开发的门槛和成本。对于 Vue 开发者来说学习 UniApp 几乎没有什么障碍只需要花几天时间熟悉一下 UniApp 的特有概念和 API就可以开始开发项目了。学习 UniApp 最好的方法是边学边练通过实际项目来巩固所学知识。遇到问题时多查阅官方文档和社区相信你很快就能掌握 UniApp 开发技能。