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)

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

uni-app 官网教程_第1张图片

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
  • 开始标签上可以写属性,属性可以有多个,多个属性之间用空格分割。如下面示例的property1property2。注意闭合标签上不能写属性。
  • 每个属性通过=赋值。如下面的示例中,属性property1的值被设为字符串value

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

uni-app 官网教程_第2张图片

  • 组件概述
  • 内置组件 

    • 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内置了weexweex的原生插件或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,此时完整echartthreejs等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、其他规范

uni-app 官网教程_第3张图片

你可能感兴趣的