当前位置：首页 > news >正文

25. 移动端-uni-app

news 2025/8/16 9:34:52

文章目录

前言
一、官网介绍
- 1. 什么是 uni-app
- 2. 特性
- 3. 功能架构图
二、快速上手 - HBuilderX 可视化界面
- 1. 创建uni-app
- 2. 运行uni-app
- 3. 发布uni-app
三、快速上手 - vue-cli 命令行
- 1. 创建uni-app
- 2. 运行、发布uni-app
- 3. 运行并发布快应用
- 4. cli创建项目和HBuilderX可视化界面创建项目的区别
三、如何学习

前言

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

一、官网介绍

1. 什么是 uni-app

uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群，开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

2. 特性

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

开发者/案例数量更多

数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数

跨端完善度更高，真正落地的提高生产力

平台能力不受限

在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。

支持原生代码混写和原生sdk集成。

性能体验优秀

加载新页面速度更快、自动diff更新数据。

App端支持原生渲染，可支撑更流畅的用户体验。

小程序端的性能优于市场其他框架。

周边生态丰富

插件市场数千款插件。

支持NPM、支持小程序组件和SDK。

微信生态的各种sdk可直接用于跨平台App。

学习成本低

基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

开发成本低

不止开发成本，招聘、管理、测试各方面成本都大幅下降。

HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。

3. 功能架构图

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

功能架构图

一套代码，运行到多个平台

uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、web、微信开发者工具、支付宝小程序Studio、百度开发者工具、抖音开发者工具、QQ开发者工具（底部每个终端选项卡，代表1个终端模拟器）：

跨平台运行

实际运行效果如下：

跨平台模拟器

二、快速上手 - HBuilderX 可视化界面

uni-app支持通过可视化界面、vue-cli命令行两种方式快速创建项目。

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

HBuilderX：官方IDE下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

1. 创建uni-app

2. 运行uni-app

3. 发布uni-app

三、快速上手 - vue-cli 命令行

除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

HBuilderX：官方IDE下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

1. 创建uni-app

2. 运行、发布uni-app

3. 运行并发布快应用

快应用是由华为、小米、OPPO等九家中国手机厂商于2018年3月联合推出的新型应用生态，旨在通过统一技术标准解决多机型适配难题，降低开发成本并提升用户体验。其基于前端技术栈开发，深度集成于手机操作系统，支持原生渲染，兼具HTML5页面便捷性与原生应用性能优势。

4. cli创建项目和HBuilderX可视化界面创建项目的区别

三、如何学习

如果你熟悉h5，但不熟悉vue和小程序
- 看完这篇白话uni-app
- DCloud与vue合作，在vue.js官网提供了免费视频教程，也可以直达教程地址：https://learning.dcloud.io
- 不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法。
如果你熟悉小程序，但不熟悉vue

参考三方总结https://segmentfault.com/a/1190000015684864

三方培训机构视频
- 目前各大视频学习网站都有不少uni-app的学习资源：
  - bilibili的uni-app相关视频
  - 网易课堂的uni-app相关课程
  - 慕课网uni-app相关课程
- 如下是三方专业培训机构的视频教程
  - 《2023 uni-app 小兔鲜儿小程序项目》，出品人：黑马程序员。亮点： Vue3+TS+Pinia 最新技术栈课程。
  - 《uni-app 跨平台应用开发教程》，出品人：hcoder 刘海君，课时：共25节。亮点：讲师经验丰富，也是graceui框架作者。
  - 《uni-app实战社区交友类app开发》，出品人：帝莎IT学院。适用人群：具备Html+Css+Javascript基础知识。
  - 《uni-app仿小米商城实战》，出品人：帝莎IT学院。首页使用nvue开发，目前支持app端和小程序端。
  - 《uni-app多端调试环境配置》，出品人：帝莎IT学院。
  - 《uni-app实战仿微信app全栈开发》，出品人：帝莎IT学院。
  - 《uni-app实战视频点播app小程序》，出品人：帝莎IT学院。
  - 《uni-app 5小时快速入门》，出品人：meHaoTian
  - 《uni-app实战直播app全栈开发》，出品人：帝莎IT学院
  - 《uni-app快速入门到社区论坛项目多端开发实战》，出品人：千锋教育
  - 《uni-app新手入门》，出品人：蓝桥云课
  - 《uniapp 原生插件开发-android》，出品人：朱哲
  - 《uniapp 原生插件开发-iOS》，出品人：朱哲
  - 《雪狐uni-app+阿里直播实战项目开发第一季》，出品人：雪狐网
  - 《2024新课uniapp Vue3 零基础入门到项目打包》，出品人：咸虾米_
  - 《2022新课uniapp Vue2 零基础入门到项目打包》，出品人：咸虾米_
uni-app相关书籍
- 北京大学出版社：uni-app跨平台开发与应用，从入门到实践
- 清华大学出版社：Vue.js核心技术解析与uni-app跨平台实战开发
- 中国铁道出版社：移动应用开发——基于UNI-APP框架
- 中国水利水电出版社：保姆级uni-app多端跨平台开发从入门到企业级实战
- 更多京东售卖的uni-app书籍

如果你是线下培训机构，想开课合作，联系bd@dcloud.io

欢迎更多人分享学习经验，可转载到社区，优秀的文章我们会收录在本文中。

uniCloud的学习资料

掌握uniCloud，进阶全栈，详见：https://uniapp.dcloud.io/uniCloud/learning

关于各端的管理规则需要耐心学习
uni-app并不难学，但我们注意到很多新人在适应各个平台的规则限制时比较急躁。
每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：
- 比如H5端的浏览器有跨域限制；
- 比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
- 比如App端，iOS对隐私控制和虚拟支付控制非常严格；
- 比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；

遇事耐心，不急不躁，虽然这不是成功的唯一要素，但它是你技术路上长远走下去的基础。