uniapp介绍

目录

一.uniapp简介

二.通过视频了解uniapp

三.uni-app组成和跨端原理

1.基本语言和开发规范

2.编译器

3.运行时（runtime）

uni-app runtime包括3部分：

基础框架

组件

API

---

一.uniapp简介

UniApp是一个基于Vue.js框架的跨平台应用开发框架，可以用来开发iOS、Android和Web应用。它具有以下基础知识：

1. 跨平台性： 使用一套代码，可以同时开发iOS、Android和Web应用。
2. 基于Vue.js： 开发者可以使用Vue.js的语法和特性来构建应用程序。
3. 支持原生能力： 可以通过插件的方式使用原生能力，如相机、地理位置、文件系统等。
4. 多端适配： 可以根据不同平台的特性进行适配，以保证在不同设备上的用户体验。
5. 开发工具： UniApp提供了丰富的开发工具和文档，方便开发者快速上手和开发应用。

二.通过视频了解uniapp

uniapp介绍

三.uni-app组成和跨端原理

1.基本语言和开发规范

uni-app代码编写，基本语言包括js、vue、css。以及ts、scss等css预编译器。

在app端，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。

DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js，你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定了如下开发规范：

• 页面文件遵循Vue单文件组件 (SFC) 规范 ，即每个页面是一个.vue文件
• 组件标签靠近小程序规范
• 接口能力（JS API）靠近小程序规范，但需将前缀wx、my 等替换为uni
• 数据绑定及事件处理同Vue.js规范，同时补充了应用生命周期
  及页面的生命周期
• 如需兼容app-nvue平台，建议使用flex布局进行开发

uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。

2.编译器

uni-app能实现一套代码、多端运行，核心是通过编译器和运行时实现的：

• 编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码。
• 运行时：动态处理数据绑定、事件代理，保证和平台宿主数据的一致性；

1. uni-app项目根据所依赖的Vue版本不同，编译器的实现也不同：

• vue2：uni-app编译器基于wepback实现
• vue3：uni-app编译器基于Vite实现，编译速度更快

uni-app项目根据创建方式的不同，编译器在使用上也有差异：

• cli方式创建的项目，编译器安装在项目下。编译器不会跟随HBuilderX升级。如需升级编译器，。
• HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
• 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。

3.运行时（runtime）

runtime不是运行在电脑开发环境，而是运行在真正的终端上。

uni-app在每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。这是一个比较庞大的工程。

• 在小程序端，uni-app的runtime，主要是一个小程序版的vue runtime，页面路由、组件、api等方面基本都是转义。
• 在web端，uni-app的runtime相比普通的vue项目，多了一套ui库、页面路由框架、和uni对象（即常见API封装）
• 在App端，uni-app的runtime更复杂，可以先简单理解为DCloud也有一套小程序引擎，打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。当然，事实上DCloud确实有小程序引擎产品，供原生应用实现小程序化。

uni-app runtime包括3部分：

1. 基础框架

   • 包括语法、数据驱动、全局文件、应用管理、页面管理、js引擎、渲染和排版引擎等
   • 在web和小程序上，不需要uni-app提供js引擎和排版引擎，直接使用浏览器和小程序的即可。但app上需要uni-app提供
   • App的js引擎：App-Android上，uni-app的js引擎是v8，App-iOS是jscore
   • App的渲染引擎：同时提供了2套渲染引擎，.vue页面文件由webview渲染，原理与小程序相同；.nvue页面文件由原生渲染，原理与react native相同。开发者可以根据需要自主选择渲染引擎。

2. 组件

   1. runtime中包括的组件只有基础组件，如<view>、<button>等。扩展组件不包含在uni-app的runtime中，而是下载到用户的项目代码中。（这些组件都是vue组件）
   • 为了降低开发者的学习成本，uni-app的内置基础组件命名规范与小程序基本相同。
   • 这几十个组件不管在哪个平台，已被处理为均有一致表现。
   • 在小程序端，uni-app基础组件会直接转义为小程序自己的内置组件。在小程序的runtime中不占体积。
   • 在web和android、iOS端，这几十个组件都在uni-app的runtime中，会占用一定体积，相当于内置了一套ui库。
   • 组件的扩展：
     • 有了几十个基础组件，大多数扩展组件也都是基于这些基础组件封装的。
     • 在web平台，for web的各种ui库（如elementUI）也可以使用，但这些库由于操作了dom，无法跨端在app和小程序中使用。
     • 在App平台，uni-app也支持使用原生编程语言来自行扩展原生组件。
     • uni-app同时支持将微信自定义组件
       运行到微信小程序、web、app这3个平台。注意微信自定义组件不是vue组件。

3. API

   • uni-app runtime内置了大量常见的、跨端的API，比如联网(uni.request)、读取存储(uni.getStorage)
   • 同时uni-app不限制各端原生平台的API调用。开发者可以在uni-app框架中无限制的调用该平台所有能使用的API。即，在小程序平台，小程序的所有API都可以使用；在web平台，浏览器的所有API都可使用；在iOS和Android平台，os的所有API都可以使用。
   • 也就是说，使用uni-app的标准API，可以跨端使用。但对于不跨端的部分，仍可以调用该端的专有API。由于常见的API都已经被封装内置，所以日常开发时，开发者只需关注uni标准API，当需要调用特色端能力时在条件编译里编写特色API调用代码。
   • ext API
     ：web和app的runtime体积不小，如果把小程序的所有API等内置进去会让开发者的最终应用体积变大。所以有部分不常用的API被剥离为ext API。虽然仍然是uni.开头，但需要单独下载插件到项目下
   • 小程序平台：uni对象会转为小程序的自有对象，比如在微信小程序平台，编写uni.request等同于wx.request。那么所有wx.的API都可以这样使用。
   • web平台：window、dom等浏览器专用API仍可以使用。
   • app平台：除了uni.的API，还可以使用plus.的API
     、Native.js
     ，以及通过uts编写原生插件，或者使用java和objectC编写原生插件。这些原生插件调用os的API并封装给js使用。
   • 由于历史沿革，DCloud在开发app时有：5+App、wap2app、uni-app等3种模式。这3种方式的runtime在底层能力上是公用的，所有uni-app可以调用5+（也就是plus.xxx）的API。虽然都可以使用5+的系统能力，但uni-app的逻辑层运行在js层，渲染层是webview和原生nvue双选。而5+不区分逻辑层和渲染层，全部运行在webview里，在性能上5+不及uni-app。