官网：https://uniapp.dcloud.net.cn/

github ：https://github.com/dcloudio/uni-app

uni-app 入门教程：https://www.5axxw.com/wiki/content/41fkvm

​uniapp 可视化开发 --- 前端开发工具、组件库集合：https://blog.csdn.net/weixin_28839699/article/details/112352421
Uni-App从入门到实战-黑马程序员杭州校区出品：https://www.bilibili.com/video/BV1BJ411W7pX

​在线 即使设计 工具：https://js.design/
uni-app 设计资源：https://uniapp.dcloud.io/component/uniui/resource.html

1、uni-app 介绍

uni，读 you ni，是统一的意思。uni-app 即 统一 app，写一次代码，在各个平台都可以运行。

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 是免费并且属于Apache2.0开源协议的产品。DCloud 官方承诺 HBuilderX、uni-app 面向全球程序员永久免费。HBuilderX 是 uni-app 的官方 ide

uni-app 学习成本高吗？基于什么技术栈？

uni-app 简单来说是：vue的语法 + 小程序的api。

它遵循Vue.js语法规范，组件和API遵循微信小程序命名，这些都属于通用技术栈，学习它们是前端必备技能，uni-app没有太多额外学习成本。

有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app 。

没学过 vue 的同学，也不用掌握 vue 的全部，只需了解 vue 基础语法、虚拟dom、数据绑定、组件、vuex，其他如路由、loader 不用学，cli、node.js、webpack 也不需要学。

如何学习？

如果你熟悉h5，但不熟悉vue和小程序

  1. 看完这篇白话uni-app(opens new window)
  2. DCloud与vue合作，在vue.js官网 (opens new window)提供了免费视频教程，也可以直达教程地址：https://learning.dcloud.io(opens new window)
  3. 不需要去专门学习小程序的语法，uni-app 使用的是 vue 的语法，不是小程序自定义的语法。

如果熟悉小程序，但不熟悉 vue，参考三方总结https://segmentfault.com/a/1190000015684864(opens new window)

第三方培训机构视频

目前各大视频学习网站都有不少 uni-app 的学习资源：

如下是三方专业培训机构的视频教程

uni-app 相关书籍

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

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

#uniCloud的学习资料

掌握uniCloud，进阶全栈，详见：https://uniapp.dcloud.io/uniCloud/learning(opens new window)

#关于各端的管理规则需要耐心学习

uni-app并不难学，但我们注意到很多新人在适应各个平台的规则限制时比较急躁。

每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：

  • 比如H5端的浏览器有跨域限制；
  • 比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
  • 比如App端，iOS对隐私控制和虚拟支付控制非常严格；
  • 比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；

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

#uni-app的底层框架实现原理及优化策略（高级）

通过评测对比 (opens new window)，我们知道uni-app的性能比其他小程序开发框架好，但底层原理是什么？ 这篇视频就是讲解uni-app框架底层的实现思路和优化策略：《uni-app框架如何实现高性能》

跨端问题汇总 ( 按照 uni 的写法，然后全平台使用 )

每个端有每个端的特点，有的能被抹平，有的不可能被抹平。

注意：跨端，不是把web的习惯迁移到全平台。而是按照uni的写法，然后全平台使用。

：https://uniapp.dcloud.net.cn/matter.html

2、uni-app 教程

uni-app 开发 app，微信小程序，支付宝小程序入门

首先开发者需先下载安装 HBuilder X ( https://hx.dcloud.net.cn/Tutorial/install/windows )

微信小程序会用到 "微信开发者工具" ( 指南、框架、组件、API、平台能力、服务端、工具 ：https://developers.weixin.qq.com/miniprogram/dev/reference/ )。第一次运行需要在 HBuilderX 中配置微信开发者工具的安装路径才能调用。还要配置端口。

使用 HBuilder X 新建项目，选择 uni-app，输入工程名，如：shop，点击创建，即可成功创建 uni-app

新建项目的目录说明

有了初始框架模板之后，运行到浏览器 chrome 就可以打开初始 app hello uni-app，熟悉之后新建页面。

然后在 pages.json 中配置 path 路径，一般新建页面之后会自动添加路径

然后配置全局样式，配置tabbar

运行 app 和 微信小程序

访问本机 http://localhost:8081/#/ 网页查看app

运行微信小程序

页面内容直接调用python开发好的接口来实现轮播图、商品列表、社区图片等功能。

概念简介

工程

页面

互相引用 

js 语法

css 语法

vue 语法 

ts/typescript 专题

编译器（条件编译） 

web 专题 

        跨域

        宽屏适配

        SSR 服务端渲染

        前端网页托管

App 专题 

小程序专题 

运行和调试 

高效开发技巧

性能优化专题

国际化专题

3、全局文件

pages.json 页面路由

manifest.json 应用配置 

        App 完整 manifest.json

package.json

vue.config.js

vite.config.js

uni.scss

App.vue

main.js

plugin.json 生成小程序插件

4、组件 ( 控件 )

组件使用的入门教程

  • 组件是视图层的基本组成单元。
  • 组件是一个单独且可复用的功能模块的封装。

每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

  • 组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的<后面用/来表示结束。结束标签也称为闭合标签。如下面示例的<component-name>是开始标签，</component-name>是结束标签。
  • 在开始标签和结束标签之间，称为组件内容。如下面示例的content
  • 开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的property1和property2。注意闭合标签上不能写属性。
  • 每个属性通过=赋值。如下面的示例中，属性property1的值被设为字符串value。

注意：所有组件与属性名都是小写，单词之间以连字符-连接。

5、API

uni-app的 js API 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

标准 ECMAScript 的 js 仅是最基础的 js。浏览器基于它扩展了 window、document、navigator 等对象。小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。node 也扩展了 fs 等模块。

uni-app 基于 ECMAScript 扩展了 uni 对象，并且 API 命名与小程序保持兼容。

基础 

网络 

路由与页面跳转 

数据缓存 

位置 

媒体 

设备 

Worker

键盘 

界面 

页面和窗体 

文件 

绘画 

广告 

第三方服务 

uniCloud

其他 

6、插件

uni-app积极拥抱社区，创建了开放、兼容的插件系统。

  • uni-app插件市场 (opens new window)，有数千款插件，支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型。在生态建设上远远领先于竞品。

  • 兼容 微信小程序 JS SDK

丰富的小程序生态内容可直接引入uni-app，并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK，由于大量SDK厂商均原厂维护小程序SDK，使得uni-app成为跨平台开发框架里生态最丰富的平台参考(opens new window)

  • 兼容 微信小程序自定义组件

小程序自定义组件是一种ui组件，uni-app里可以在App、H5、微信小程序、QQ小程序同时兼容微信小程序自定义组件，参考(opens new window)

  • 兼容 NPM 包管理系统

  • 兼容 weex 插件生态

uni-app内置了weex，weex的原生插件或ui库均可使用。注意weex的生态不如uni-app丰富，一般情况建议使用uni-app的插件市场。

  • 兼容 普通 web 库

uni-app的H5端支持所有浏览器API。但众所周知，由于小程序的js不运行在浏览器里，所以小程序里不支持 HTML 和 DOM 的 API。

uni-app的App端虽然和小程序是相同的架构，逻辑层也运行在独立jscore而不是浏览器里，但App端和小程序还是有区别的： 一方面可通过web-view组件加载HTML，引入web相关库； 另一方面可通过renderjs实现在渲染层执行js，此时完整echart、threejs等web库均可使用。 （但为了全端使用，仍然建议减少对dom库的依赖，在uni-app的插件市场可寻找全端兼容的库来替代）

  • App端支持各种调用原生能力的方式
  1. 支持 原生混合开发
  2. 支持 比小程序能力更多的plus JSAPI(opens new window)
  3. 支持 Native.js (opens new window)直接调用原生api
  4. 支持 原生插件扩展(opens new window)
  5. 支持 云打包原生插件 (opens new window)。
  • App端支持双渲染引擎 uni-app逻辑层在独立jscore，而渲染层可选webview渲染和weex引擎渲染。
  1. 使用webview渲染则整个架构与小程序相同，此时页面后缀为vue文件。
  2. 使用weex引擎（经过改造）渲染，则整个架构与快应用相同，此时页面后缀为nvue文件。使用webview渲染时，可以指定由系统webview渲染还是由x5引擎渲染。

插件全景描述

插件市场介绍

uni_modules

原生插件

插件作者专区 

7、工程化

uni-app 支持较为完整的工程化支持，主要包括：

  • 版本管理控制：如git/svn
  • cli脚手架
  • 运行环境管理
  • 自动化测试
  • 持续集成

8、其他规范

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云致力推进全域Serverless时代，引领技术创新，赋能行业实践

avatar 华为云开发者联盟
cover

基于Serverless服务构建千万车辆数据实时处理的车联网业务

avatar 华为云开发者联盟
cover

O3使能伙伴服务作业平台维护作业专题

avatar 华为云开发者联盟