一、引言随着互联网多端产品快速发展企业往往需要同时开发微信小程序、移动端 App 以及 H5 网页。如果针对每个平台单独开发不仅会产生大量重复代码还会极大增加后期维护成本。uni-app 作为 DCloud 推出的跨端开发框架依托 Vue.js 语法实现一次编码多端编译运行有效解决了多端重复开发的痛点。本篇文章面向前端初学者完整讲解开发环境搭建、项目创建、页面开发、多端适配与打包发布内容贴合实战规避新手常见开发问题。二、uni-app 框架介绍2.1 核心特性uni-app 采用编译器 运行时双引擎架构代码可以编译成对应平台的原生代码。项目代码只需要编写一次就可以发布到微信小程序、支付宝小程序、移动端 Android/iOS 应用、网页 H5、抖音小程序等二十余个平台。2.2 技术优势技术栈统一沿用 Vue 语法熟悉 Vue 的前端开发者几乎可以零门槛上手。渲染性能优异App 端支持原生渲染页面流畅度接近原生应用。灵活处理平台差异内置条件编译语法可针对不同平台编写差异化代码。配套工具完善官方 IDE HBuilderX 提供一键运行、一键打包能力简化开发流程。三、开发环境部署3.1 工具准备HBuilderX 编辑器uni-app 官方推荐开发工具内置编译插件无需手动配置环境变量从 DCloud 官网下载正式版本即可。微信开发者工具用来预览和调试小程序端项目在微信开放平台官网下载安装。3.2 项目创建步骤打开 HBuilderX点击左上角【文件】→【新建】→【项目】。在项目模板中选择 uni-app填写项目名称与存储目录选择默认空白模板完成创建。项目创建完成后自动生成基础目录文件。四、项目目录结构解析每一个文件都有明确分工读懂目录是开发的基础pages 目录存放所有业务页面每一个页面独立为一个文件夹。static 目录存放图片、字体等静态资源文件。components 目录存放可复用的公共组件。App.vue应用全局根组件用来配置全局样式与生命周期。main.js项目入口文件初始化实例。pages.json全局路由配置文件管理页面路径、导航栏样式。manifest.json项目配置文件配置应用名称、权限、打包参数。五、页面开发与基础语法5.1 页面基础代码示例uni-app 页面由 template、script、style 三部分构成标签需要使用 view、text 等跨端组件不能直接使用 div、p 这类 DOM 标签。vuetemplate view classcontent text{{ contentText }}/text button typeprimary clickopenToast弹出提示框/button /view /template script export default { data() { return { contentText: 欢迎学习uni-app跨端开发 } }, methods: { openToast() { uni.showToast({ title: 操作执行成功, icon: success, duration: 2000 }) } } } /script style scoped .content { padding: 30rpx; } /style5.2 路由配置 pages.json新建页面之后必须在 pages 数组中注册页面路径否则项目无法识别页面。同时可以自定义导航栏标题、背景色等样式。json{ pages: [ pages/index/index ], globalStyle: { navigationBarTitleText: uni-app入门项目, navigationBarBackgroundColor: #36D399, navigationBarTextStyle: white } }5.3 常用内置 APIuni 框架提供统一的 API所有平台调用方式保持一致无需区分环境javascript运行// 页面跳转 uni.navigateTo({ url: /pages/demo/demo }) // 发起网络请求 uni.request({ url: https://api.example.com/data, method: GET, success: (res) { console.log(res.data) } }) // 本地缓存存储 uni.setStorageSync(userInfo, {name:张三})六、多端差异化处理条件编译不同平台存在功能差异利用条件编译语句可以让代码只在指定平台生效不会影响其他端。vue!--仅微信小程序生效-- !-- #ifdef MP-WEIXIN -- view微信小程序专属功能/view !-- #endif -- !--仅移动端App生效-- !-- #ifdef APP-PLUS -- viewApp原生能力模块/view !-- #endif --七、项目运行与打包上线7.1 项目预览运行运行到浏览器选择运行到 H5在网页端预览项目。运行到小程序模拟器启动微信开发者工具即可查看小程序效果。真机运行手机开启 USB 调试连接电脑预览 App 效果。7.2 项目打包发布小程序端点击发行选择微信小程序编译出小程序代码包上传至微信公众平台提交审核。H5 网页端发行生成 dist 资源包将静态文件部署到云服务器或者对象存储。App 端使用云打包功能填写应用证书信息直接生成 Android APK 安装包与 iOS 安装包。八、新手开发避坑总结样式单位统一使用 rpx框架会自动换算像素保证多端屏幕自适应不要固定 px 数值。禁止使用 document、window 等 BOM、DOM 对象小程序与 App 端不存在 DOM 环境会直接报错。图片资源统一放在 static 文件夹不要放在 pages 页面文件夹内避免打包后资源丢失。页面路径必须在 pages.json 内注册否则页面无法正常访问。九、总结uni-app 凭借极低的学习门槛和强大的跨端能力已经成为当下前端跨端开发主流框架。只需要掌握 Vue 基础语法就可以同时开发小程序、App、H5 三类产品极大节约开发成本。初学者可以先搭建基础项目练习页面布局、网络请求、页面跳转等基础功能再逐步研究组件封装、分包加载、云开发等进阶内容。后续我会持续更新 uni-app 实战项目教程包含用户登录、列表渲染、上拉加载更多等常用业务模块。如果本文对你有帮助欢迎点赞收藏一起交流前端开发技术。
uni-app 零基础入门：环境搭建与多端开发实践
发布时间：2026/6/26 6:45:45
一、引言随着互联网多端产品快速发展企业往往需要同时开发微信小程序、移动端 App 以及 H5 网页。如果针对每个平台单独开发不仅会产生大量重复代码还会极大增加后期维护成本。uni-app 作为 DCloud 推出的跨端开发框架依托 Vue.js 语法实现一次编码多端编译运行有效解决了多端重复开发的痛点。本篇文章面向前端初学者完整讲解开发环境搭建、项目创建、页面开发、多端适配与打包发布内容贴合实战规避新手常见开发问题。二、uni-app 框架介绍2.1 核心特性uni-app 采用编译器 运行时双引擎架构代码可以编译成对应平台的原生代码。项目代码只需要编写一次就可以发布到微信小程序、支付宝小程序、移动端 Android/iOS 应用、网页 H5、抖音小程序等二十余个平台。2.2 技术优势技术栈统一沿用 Vue 语法熟悉 Vue 的前端开发者几乎可以零门槛上手。渲染性能优异App 端支持原生渲染页面流畅度接近原生应用。灵活处理平台差异内置条件编译语法可针对不同平台编写差异化代码。配套工具完善官方 IDE HBuilderX 提供一键运行、一键打包能力简化开发流程。三、开发环境部署3.1 工具准备HBuilderX 编辑器uni-app 官方推荐开发工具内置编译插件无需手动配置环境变量从 DCloud 官网下载正式版本即可。微信开发者工具用来预览和调试小程序端项目在微信开放平台官网下载安装。3.2 项目创建步骤打开 HBuilderX点击左上角【文件】→【新建】→【项目】。在项目模板中选择 uni-app填写项目名称与存储目录选择默认空白模板完成创建。项目创建完成后自动生成基础目录文件。四、项目目录结构解析每一个文件都有明确分工读懂目录是开发的基础pages 目录存放所有业务页面每一个页面独立为一个文件夹。static 目录存放图片、字体等静态资源文件。components 目录存放可复用的公共组件。App.vue应用全局根组件用来配置全局样式与生命周期。main.js项目入口文件初始化实例。pages.json全局路由配置文件管理页面路径、导航栏样式。manifest.json项目配置文件配置应用名称、权限、打包参数。五、页面开发与基础语法5.1 页面基础代码示例uni-app 页面由 template、script、style 三部分构成标签需要使用 view、text 等跨端组件不能直接使用 div、p 这类 DOM 标签。vuetemplate view classcontent text{{ contentText }}/text button typeprimary clickopenToast弹出提示框/button /view /template script export default { data() { return { contentText: 欢迎学习uni-app跨端开发 } }, methods: { openToast() { uni.showToast({ title: 操作执行成功, icon: success, duration: 2000 }) } } } /script style scoped .content { padding: 30rpx; } /style5.2 路由配置 pages.json新建页面之后必须在 pages 数组中注册页面路径否则项目无法识别页面。同时可以自定义导航栏标题、背景色等样式。json{ pages: [ pages/index/index ], globalStyle: { navigationBarTitleText: uni-app入门项目, navigationBarBackgroundColor: #36D399, navigationBarTextStyle: white } }5.3 常用内置 APIuni 框架提供统一的 API所有平台调用方式保持一致无需区分环境javascript运行// 页面跳转 uni.navigateTo({ url: /pages/demo/demo }) // 发起网络请求 uni.request({ url: https://api.example.com/data, method: GET, success: (res) { console.log(res.data) } }) // 本地缓存存储 uni.setStorageSync(userInfo, {name:张三})六、多端差异化处理条件编译不同平台存在功能差异利用条件编译语句可以让代码只在指定平台生效不会影响其他端。vue!--仅微信小程序生效-- !-- #ifdef MP-WEIXIN -- view微信小程序专属功能/view !-- #endif -- !--仅移动端App生效-- !-- #ifdef APP-PLUS -- viewApp原生能力模块/view !-- #endif --七、项目运行与打包上线7.1 项目预览运行运行到浏览器选择运行到 H5在网页端预览项目。运行到小程序模拟器启动微信开发者工具即可查看小程序效果。真机运行手机开启 USB 调试连接电脑预览 App 效果。7.2 项目打包发布小程序端点击发行选择微信小程序编译出小程序代码包上传至微信公众平台提交审核。H5 网页端发行生成 dist 资源包将静态文件部署到云服务器或者对象存储。App 端使用云打包功能填写应用证书信息直接生成 Android APK 安装包与 iOS 安装包。八、新手开发避坑总结样式单位统一使用 rpx框架会自动换算像素保证多端屏幕自适应不要固定 px 数值。禁止使用 document、window 等 BOM、DOM 对象小程序与 App 端不存在 DOM 环境会直接报错。图片资源统一放在 static 文件夹不要放在 pages 页面文件夹内避免打包后资源丢失。页面路径必须在 pages.json 内注册否则页面无法正常访问。九、总结uni-app 凭借极低的学习门槛和强大的跨端能力已经成为当下前端跨端开发主流框架。只需要掌握 Vue 基础语法就可以同时开发小程序、App、H5 三类产品极大节约开发成本。初学者可以先搭建基础项目练习页面布局、网络请求、页面跳转等基础功能再逐步研究组件封装、分包加载、云开发等进阶内容。后续我会持续更新 uni-app 实战项目教程包含用户登录、列表渲染、上拉加载更多等常用业务模块。如果本文对你有帮助欢迎点赞收藏一起交流前端开发技术。
