从入门到实战：uni-app 跨平台开发学习

一、uni-app 基础打好跨端开发地基这一阶段主要是建立对 uni-app 的整体认知掌握开发环境和基础语法。1.1 环境搭建基于 Vue.js、原生渲染、多端兼容、生态丰富。用 HBuilderX 完成环境搭建创建一个 uni-app 项目并运行到模拟器。1.2 核心基础学习开发规范与文件目录掌握uni-app 的目录结构比如pages存放页面、static存放静态资源、pages.json配置路由和 tabBar、manifest.json配置应用信息。project/ ├── pages/ │ ├── index/ │ └── detail/ ├── static/ │ ├── images/ │ └── fonts/ ├── pages.json └── manifest.jsonpages.json配置示例{ pages: [ {path: pages/index/index}, {path: pages/detail/detail} ] }manifest.json关键配置项{ name: 应用名称, appid: 唯一标识 }页面样式与布局学习 uni-app 内置的基础组件view、text、button、input等以及使用rpx单位进行响应式布局通过rpx单位自动适配不同分辨率设备。rpx单位部分补充换算比例说明750rpx 100%屏幕宽度 ;组件部分补充常用组件列表scroll-view/swiper/icon等。外部资源引入学会如何引入第三方样式库、图片资源支持扩展使用UI框架如uView。示例import url(common/uni.css);引入全局样式示例image src/static/logo.png/image引入图片资源二、项目核心配置底部导航栏与页面路由在 pages.json 中配置了底部导航栏tabBar例如 “总览、设备列表、能耗” 三个页面的切换tabBar: { color: #7A7E83, selectedColor: #3cc51f, borderStyle: black, backgroundColor: #ffffff, list: [ { pagePath: pages/index/index, iconPath: static/tabbar/home.png, selectedIconPath: static/tabbar/home-active.png, text: 总览 }, { pagePath: pages/device/device, iconPath: static/tabbar/device.png, selectedIconPath: static/tabbar/device-active.png, text: 设备列表 }, { pagePath: pages/energy/energy, iconPath: static/tabbar/energy.png, selectedIconPath: static/tabbar/energy-active.png, text: 能耗 } ] }配置完成后模拟器中就出现了底部导航栏点击不同按钮可以切换页面这也是 uni-app 项目最常见的页面结构之一。三、页面开发从启动页到功能页面启动页广告制作用uni-app的onLoad生命周期实现一个开屏广告页面设置了 8 秒倒计时后自动跳转到首页添加了跳过按钮优化用户体验。onLoad() { this.countdown 8; this.timer setInterval(() { if (this.countdown 0) { clearInterval(this.timer); uni.redirectTo({ url: /pages/index/index }); } this.countdown--; }, 1000); }, methods: { skipAd() { clearInterval(this.timer); uni.redirectTo({ url: /pages/index/index }); } }“总览” 页面开发使用view组件和flex布局搭建了首页的卡片式布局展示了能源数据的核心指标学习 uni-app 的扩展组件实现下拉刷新、上拉加载更多功能。核心指标示例如“今日用电量XX kWh”:// 示例数据格式 data() { return { indicators: [ { title: 今日用电量, value: 256 kWh }, { title: 当月累计, value: 5,280 kWh } ] }; }“设备列表” 页面开发使用scroll-view组件实现了列表滚动通过v-for渲染设备数据学习自定义组件把重复的设备卡片封装成组件让代码更简洁、可复用。设备数据字段如设备名称、状态和组件props定义:!-- 自定义组件示例 -- template view classdevice-card text{{ device.name }}/text text{{ device.status ? 在线 : 离线 }}/text /view /template script export default { props: [device] }; /script“能耗” 页面开发这是项目的亮点之一引入了uCharts图表组件实现了能耗数据的折线图展示给图表添加了时间段筛选功能用户可以选择不同的时间范围查看数据变化。时间段筛选的UI设计如日/周/月选项卡和图表配置片段:// uCharts配置示例 chartData: { categories: [00:00, 06:00, 12:00, 18:00], series: [{ data: [120, 150, 80, 200] }] }, // 时间筛选方法 changeTimeRange(range) { if (range week) { /* 更新为周数据 */ } }四、路由与生命周期实现页面跳转与传参// 跳转传参 uni.navigateTo({ url: /pages/detail/detail?id123 }) // 接收参数 onLoad(options) { console.log(options.id) // 输出123 }用uni.navigateTo实现了从设备列表页跳转到设备详情页并通过options接收上一个页面传递的参数在详情页渲染对应设备的数据。理解了onLoad、onShow、onReady等页面生命周期的执行顺序在onShow中实现了每次进入页面时刷新数据的效果解决了页面返回时数据不更新的问题。五、总结通过学习掌握uni-app 的语法和开发流程更重要的是1. 跨平台开发能力提升掌握uni-app语法理解一套代码多端适配思想降低开发成本。 如“某资讯类App通过uni-app实现iOS/Android/小程序三端代码复用率达85%”。2. 完整项目流程实践覆盖需求分析、原型设计、页面开发、功能联调、测试验收及打包发布全流程。3. 全栈开发入门通过uniCloud实现数据存储与接口开发无需后端语言基础。 “uniCloud云函数日均调用量超1亿次支撑快速开发”。