首页 > 其他分享 >uni-app组成和跨端原理

uni-app组成和跨端原理

时间:2023-08-27 20:44:58浏览次数:37  
标签:app js API 跨端 组件 uni runtime

基本语言和开发规范

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

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

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

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

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

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

#编译器

  • 编译器运行在电脑开发环境。一般是内置在HBuilderX工具中,也可以使用独立的cli版。
  • 开发者按uni-app规范编写代码,由编译器将开发者的代码编译生成每个平台支持的特有代码
    • 在web平台,将.vue文件编译为js代码。与普通的vue cli项目类似
    • 在微信小程序平台,编译器将.vue文件拆分生成wxml、wxss、js等代码
    • 在app平台,将.vue文件编译为js代码。进一步,如果涉及uts代码:
      • 在Android平台,将.uts文件编译为kotlin代码
      • 在iOS平台,将.uts文件编译为swift代码
  • 编译器分vue2版和vue3版
    • vue2版:基于webpack实现
    • vue3版:基于Vite实现,性能更快
  • 编译器支持条件编译,即可以指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个工程中。
// #ifdef  App
console.log("这段代码只有在App平台才会被编译进去。非App平台编译后没有这段代码")
// #endif
复制代码

更多编译器介绍参见:编译器

#运行时(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部分:基础框架、组件、API。

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

DCloud还提供了插件市场,大多数用得着的组件和API都已经有现成的插件。

#逻辑层和渲染层分离

在web平台,逻辑层(js)和渲染层(html、css),都运行在统一的webview里。

但在小程序和app端,逻辑层和渲染层被分离了。

分离的核心原因是性能。过去很多开发者吐槽基于webview的app性能不佳,很大原因是js运算和界面渲染抢资源导致的卡顿。

标签:app,js,API,跨端,组件,uni,runtime
From: https://www.cnblogs.com/full-stack-linux-new/p/17660782.html

相关文章

  • AutoMapper (将实体转dto 或 将dto 转成实体)
    第一步:  安装nuget包1、AutoMapper.Extensions.Microsoft.DependencyInjection(依赖注入扩展包)2、AutoMapper (核心) 第二步:创建一个类1、添加一个类文件  起名为RbacProfile.cs这样一文件2、RbacProfile需要继承 Profile 父类3、RbacProfile添加一个构造函数第三......
  • Unity 中删除本地指定文件或文件夹
    voidStart(){//DeleteOldImages("E:\\AerialImages\\2023_08_24_15_57");DeleteDirectory("E:\\AerialImages\\2023_08_24_15_57");}///<summary>///删除指定文件夹下文件///</summary>///<paramname="fullDirP......
  • junit_demo
    参考:JUnit5单元测试框架的使用教程与简单实例_junit5使用_pan_junbiao的博客-CSDN博客Junit单元测试例子demo_twentyfour4ever的博客-CSDN博客 目录结构 pom.xml<projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-insta......
  • 淘宝app商品详情原数据接口API(支持高并发请求/免费测试)
    item_get_app-获得淘宝app商品详情原数据 进入API测试一、引言随着移动互联网的迅速发展,移动电商应用的需求也在不断增长。淘宝作为中国最大的电商平台之一,每天需要处理大量的商品数据和用户访问请求。为了提供更加优质的用户体验,淘宝开放了商品详情原数据接口API,支持开发者在淘......
  • Unity 2D如何让背景图片拉伸填满整个窗口
    usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;[RequireComponent(typeof(SpriteRenderer))]publicclassSpriteFullScreen:MonoBehaviour{//StartiscalledbeforethefirstframeupdatevoidStart(){......
  • 火山引擎 DataLeap:从短视频 APP 实践看如何统一数据指标口径
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群短视频正在成为越来越多人发现世界的窗口,其背后的创作者生态建设是各大短视频APP不可忽视的重要组成部分。为了激励更多优质内容生产,某短视频APP经常面向创作者主办投稿活动,而在复盘投稿数据......
  • 火山引擎 DataLeap:从短视频 APP 实践看如何统一数据指标口径
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群短视频正在成为越来越多人发现世界的窗口,其背后的创作者生态建设是各大短视频APP不可忽视的重要组成部分。为了激励更多优质内容生产,某短视频APP经常面向创作者主办投稿活动,而在复盘投稿......
  • spring中的ApplicationEventPublisher的使用
    spring中的ApplicationEventPublisher是spring对发布订阅模式的一种支持,要了解它的作用和使用需要先了解下观察者模式和发布订阅模式。目录一、观察者模式二、发布订阅模式三、spring中的ApplicationEventPublisher一、观察者模式观察者模式中涉及观察者,被观察者两种角色,其......
  • Python单元测试——深入理解unittest
    单元测试的重要性就不多说了,可恶的是python中有太多的单元测试框架和工具,什么unittest,testtools,subunit,coverage,testrepository,nose,mox,mock,fixtures,discover,再加上setuptools,distutils等等这些,先不说如何写单元测试,光是怎么运行单元测试就有N多种方法,再因为它......
  • Unity 写入本地文本文件
    voidStart(){WriteLocalFile("E:\\Test.txt","唯一能赢我的人叫做,我从来没听说过,另一个叫做,我想想,哎,节目效果");}///<summary>///写入本地文件txt,json等文件///</summary>///<paramname="path">路径</param>///<paramname=......