uni-app 官网教程

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

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

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和小程序

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 的学习资源：

• 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)

如果你是线下培训机构，想开课合作，联系[email protected]

欢迎更多人分享学习经验，可转载到社区 (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 专题 

• 小程序专题 

• 运行和调试 

• 高效开发技巧
• 性能优化专题
• 国际化专题

概念简介

工程

页面

互相引用 

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、组件

组件使用的入门教程

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

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

• 组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的<后面用/来表示结束。结束标签也称为闭合标签。如下面示例的是开始标签，是结束标签。
• 在开始标签和结束标签之间，称为组件内容。如下面示例的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的插件市场可寻找全端兼容的库来替代）

• 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
• 原生插件

• 插件作者专区 

插件全景描述

插件市场介绍

uni_modules

原生插件

插件作者专区 

7、工程化

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

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

• Git/SVN
• cli 脚手架
• 运行环境管理

• 自动化测试 

• 持续集成

8、其他规范