官网：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 也不需要学。

如何学习？

建议第一步，看完uni-app官网 (opens new window)的首页介绍。
建议第二步，通过快速上手 (opens new window)，亲身体验下uni-app。
建议第三步，看完《uni-app官方教程》 (opens new window)，

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

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

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

第三方培训机构视频

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

bilibili的uni-app相关视频(opens new window)
腾讯课堂的uni-app相关课程(opens new window)
网易课堂的uni-app相关课程(opens new window)
慕课网uni-app相关课程(opens new window)

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

《uni-app 商业级应用实战》 (opens new window)，出品人：腾讯课堂NEXT学院。亮点：腾讯课堂官方出品；不懂 vue 的工程师也可快速学习；从入门到实战都包括。
《uni-app 跨平台应用开发教程》 (opens new window)，出品人：hcoder 刘海君，课时：共25节。亮点：讲师经验丰富，也是graceui框架作者。
《uni-app 实战教程 - “悦读”项目实战》 (opens new window)，出品人：hcoder 刘海君
《uni-app实战社区交友类app开发》 (opens new window)，出品人：帝莎IT学院。适用人群：具备Html+Css+Javascript基础知识。
《uni-app仿小米商城实战》 (opens new window)，出品人：帝莎IT学院。首页使用nvue开发，目前支持app端和小程序端。
《uni-app多端调试环境配置》 (opens new window)，出品人：帝莎IT学院。
《uni-app实战仿微信app全栈开发》 (opens new window)，出品人：帝莎IT学院。
《uni-app实战视频点播app小程序》 (opens new window)，出品人：帝莎IT学院。
《uni-app 5小时快速入门》 (opens new window)，出品人：meHaoTian
《uni-app实战直播app全栈开发》 (opens new window)，出品人：帝莎IT学院
《uni-app博客实战开发教程》 (opens new window)，出品人：卢小兵
《uni-app快速入门到社区论坛项目多端开发实战》 (opens new window)，出品人：千锋教育
《uni-app新手入门》 (opens new window)，出品人：蓝桥云课
《uniapp 原生插件开发-android》 (opens new window)，出品人：朱哲
《uniapp 原生插件开发-iOS》 (opens new window)，出品人：朱哲

uni-app 相关书籍

清华大学出版社：Vue.js核心技术解析与uni-app跨平台实战开发(opens new window)
中国铁道出版社：移动应用开发——基于UNI-APP框架(opens new window)
中国水利水电出版社：保姆级uni-app多端跨平台开发从入门到企业级实战(opens new window)
更多京东售卖的uni-app书籍(opens new window)

如果你是线下培训机构，想开课合作，联系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 教程

概念简介
工程
页面
互相引用
js 语法
css 语法
vue 语法
ts/typescript 专题
编译器（条件编译）
web 专题
- 跨域
- 宽屏适配
- SSR 服务端渲染
- 前端网页托管
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 生成小程序插件

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。

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

组件概述
内置组件
- uni-app 组件
  - 视图容器
    - view
    - scroll-view
    - swiper
    - match-media
    - movable-area
    - movable-view
    - cover-view
    - cover-image
  - 基础内容
  - 表单组件
  - 路由与页面跳转
  - 媒体组件
  - 地图
  - 画布
  - webview
  - 广告
  - uniCloud-db云数据库
  - 页面属性配置节点
  - 基础组件中原生组件说明
- Vue 组件
- NVUE 组件
- 小程序组件
扩展组件（uni-ui）
ui 设计资源
datacom 组件规范
组件库选型指南

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
其他

基础

网络

路由与页面跳转

数据缓存

位置

媒体

设备

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的插件市场可寻找全端兼容的库来替代）