vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > uni-appx和uni-app的区别

uni-appx和uni-app的区别以及该如何选择详解

作者：Microi风闲

Uniapp X是DCloud推出的下一代跨平台应用开发引擎,基于 TypeScript 和原生渲染技术,性能显著提升,接近原生应用,这篇文章主要介绍了uni-appx和uni-app的区别以及该如何选择的相关资料,需要的朋友可以参考下

一、前言

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

🎯今日探讨主题：uni-appx 和 uniapp 如何选择？  的问题。

二、uni-app x 是什么？

💎一句话定性：uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。

uni-app x 是一个庞大的工程，它包括 uts 语言、uvue 渲染引擎、uni 的组件和 API、以及扩展机制。

💯uts 是一门类 ts 的、跨平台的、新语言。

  1. 在 iOS 平台编译为 swift
  2. 在 Android 平台编译为 kotlin
  3. 在 Web 和 小程序平台编译为 js
  4. 在 鸿蒙next 平台上编译为 ArkTS。

在 Android 平台，uni-app x 的工程被整体编译为 kotlin 代码，本质上是换了 vue 写法的原生 kotlin 应用，在性能上与原生 kotlin 一致。

三、uts语言

✅开发者在 uni-app x 中，需使用 uts 而不是 js 。尤其是 Android 端 🚫不自带 js 引擎，无法运行 js 代码。

uts 全称 uni type script，是一门跨平台的、高性能的、强类型的现代编程语言。它在不同平台，会被编译为不同平台的 native 语言，如：

uts 和 ts 很相似，但为了跨端，uts 进行了一些约束和特定平台的增补。

四、uvue渲染引擎

uts 替代的是 js，而 uvue 替代的就是 html 和 css 。或者如果你了解 flutter 的话，也可以理解为 uts 类似 dart ，而 uvue 类似 flutter 。

uvue 是一套基于 uts 的、兼容 vue 语法的、跨平台的、原生渲染引擎。

uvue 渲染引擎包括 uts 版的 vue 框架（组件、数据绑定…）、跨平台基础 ui、css 引擎。

有了 uvue ，开发者就可以使用 vue 语法、css 来快速编写页面，编译为不同平台的、高性能的纯原生界面。

🌰一个 uvue 页面的例子：

<template>
	<view class="content">
		<button @click="buttonClick">{{title}}</button>
	</view>
</template>

<script>
	//这里只能写uts
	export default {
		data() {
			return {
				title: "Hello world"
			}
		},
		onLoad() {
			console.log('onLoad')
		},
		methods: {
			buttonClick: function () {
				uni.showModal({
					"showCancel": false,
					"content": "点了按钮"
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		background-color: white;
	}
</style>

uvue 支持的是 vue3 语法，支持 组合式API 和 选项式API 。详见 vue 语法。

uvue 在 App 端支持的 css 语法，是 web 的子集，类似于但优于 nvue 的 css 。仅支持 flex 布局，但也足以布局出需要的界面。详见 css 语法

使用该 css 子集，可保证跨端。如果把 uvue 页面编译到 web 平台，则 web 的其他 css也都可以使用。

在过去的跨平台方案中，逻辑层和 ui 层的通信始终是痛点。

但这些补丁技术都不治根。过去只有 flutter 解决了 dart 和 ui 层的通信问题。可是这套方案又带来2个问题：

所以一个好的UI层，仍然应该是原生渲染而不是自渲染。只不过需要解决逻辑层和原生（不管是原生UI还是原生能力）的通信问题。

其实不管是 js 还是 dart ，和原生都有通信桥，功能上没有限制，可以调用各种原生能力，但问题就出在 Android 上这个通信性能上不去。

既然通信性能不行，那就干脆不通信。

由于 uts 在 Android 上被编译为 kotlin ，它的逻辑层和UI层都是纯原生的，没有通信问题，所以它的性能真正达到了原生水平。因为本质上它就是换了 vue 写法的原生 kotlin 应用。

在 iOS 上，情况要复杂些。由于 swift 编译 iOS 应用必须依赖 xcode，而 DCloud 的开发者中 windows 占比更高。且 iOS 上 js 和原生通信有解，所以 uni-app x 在iOS 上提供 js 和 swift 双选逻辑层。

js逻辑层swift逻辑层
主应用开发平台windows或mac只能mac
uvue页面代码可使用js但不能直接调用swift API。swift调用需封装在uts插件中只能调用swift不能使用js
uts原生插件开发只能mac只能mac
uts原生插件使用windows下打包后使用，mac下本地直接编译windows下打包后使用，mac下本地直接编译
性能丝滑流畅丝滑流畅

也就是 uts 原生插件作者必须得有 mac 电脑，普通的 App 开发者可以没有 mac 电脑。

虽然理论上 swift 逻辑层的性能要高于 js 逻辑层，但开发者可以放心使用 js 逻辑层。

uni-app x在 iphone 上的 js 逻辑层和原生渲染层的通信经过特殊处理，大幅提升通信效率问题，不再需要 bindingX 这类技术。也不存在 flutter 那种混合渲染问题。

可以体验 hello uni-app x 的iOS版本，在 slider-100、滚动时动态调整 view 的 top 值以维持吸顶等极端场景，均如 Android 一样的丝滑流畅。

使用 js 逻辑层除了能在 windows 下开发，还有一个好处是大幅降低插件生态的建设难度。 插件作者只需要特殊适配 Android 版本，在 iOS 和 Web 端仍使用 ts/js 库，即可快速把 uni-app/web 的生态迁移到 uni-app x 中。

五、uni的组件

uni-app x支持的组件包括：

除了微信小程序，其他端🚫不支持小程序 wxml 组件。

六、API

uni-app x支持的API包括：

  1. uts的API 详见
  2. 全局API，前面不需要加uni.。如getApp、getCurrentPages
  3. uni.xxx的内置API。数量较多，详见
  4. uniCloud.xxx的内置API。详见
  5. dom的API 详见
  6. 原生API

由于 uts 可以直接调用 Android 和 iOS 的 api，所以 OS 和三方 sdk 的能力都可以在 uts 中调用。如下：

<script>
	import Build from 'android.os.Build';
	export default {
		onLoad() {
			console.log(Build.MODEL); //调用原生对象，返回手机型号
			console.log(uni.getSystemInfoSync().deviceModel); //调用uni API，返回手机型号。与上一行返回值相同
		}
	}
</script>

在 uni-app x 里，可以直接调用 OS 的能力，不受限制，语法是 uts 的语法，但需要了解什么功能在原生里是哪个 api 。

使用 uni.getSystemInfoSync 则比较简单，看 uni 的文档即可，且可跨平台。

其实，uni.getSystemInfoSync 的内部实现就是一个 uts 模块，底层使用了一样的代码，也是import 了 android.os.Build 。

uni.的api ，大多是 uts 开发的，它们会陆续开源在 uni-api 。

插件市场也有很多做好的 uts 插件，方便开发者拿来即用。

uni-app js 引擎版，支持 plus API 和 weex API。但 uni-app x 中，🚫不再支持这些API。

七、全局文件

八、插件生态 

uni-app x 编译到web、小程序、以及 iOS 的 js 逻辑层模式时，所有 js 库仍然可用。但在Android 平台或 iOS 的 swift 逻辑层模式时，由于没有 js 引擎，所以无法使用 js 生态（除非使用 web-view 组件或自己集成一个 js 引擎）。

uni-app x App平台的插件生态来源于：

  1. 原生生态。比如上述示例代码中获取手机型号。以及各种原生sdk的直接调用。
  2. ts生态的迁移。很多js库是ts编写的，如果没有使用 uts 不支持的语法，ts代码就可以使用。如果略有不同，也可以稍加改造 ts 以适配 uts 。

uni-app x支持 npm，但 npm 的大多数库是 for web 的，无法跨端，这些库只能在uni-app x编译为 web 时使用。当然如果有兼容 uni-app x 的全端库，可以使用，比如这些库z-paging-x、lwu-css。
uni 插件市场是跨端插件的聚集地，更推荐在这里找插件而不是去 npm。插件市场有2种插件适用于uni-app x。

  1. uts插件（原生插件）
    uts插件封装原生能力，包括os能力或三方 sdk 。可以做API插件，也可以做组件插件。
    uts插件可同时在 uni-app js 引擎版 和 uni-app x 的 app 平台上运行。
    uts插件分类直达：https://ext.dcloud.net.cn/?cat1=8&type=UpdatedDate
    之前 uni-app js 版的 “App原生语言插件”，因依赖 js 引擎和 weex ，所以无法在 uni-app x 中运行。

  2. 前端插件
    uvue 组件、uts sdk、uni-app x前端页面/项目模板。这些前端代码仍然使用 uni-app x 的vue、uts、css来开发。
    在插件市场搜索框下方有uni-app x的checkbox，勾选可见到所有适配uni-app x的插件：https://ext.dcloud.net.cn/?uni-appx=1
    一般情况下，原生库的能力是大于 js 库的。不太可能有一个功能必须使用 js 库才能使用。比如md5，js有库，原生也有库，调用一个 jar 也很方便。
    常见的加密、md5、sha、dayjs等库，插件市场已经有 uts 版本。

🎯提示：如果你一定要使用某个js库，还有一个办法是在uni-app x里的web-view组件，让其运行js并返回值给uts代码。

九、路线图

🎯除上述文档中声明已经完成的，还有如下需要注意：

十、FAQ

如果开发小程序和Web，那使用哪个都差不多。

如果开发App，那uni-app面向的是对体验不敏感，只了解web技术，对开发成本更敏感的前端开发者。而uni-app x则适用于愿意多付出一些开发成本、以追求更好体验的开发者。当然这个多付出的开发成本也远低于原生开发各端的成本。

不管uni-app还是uni-app x，都支持uts插件生态，原生扩展api和插件是复用的。

包括官方的组件和API也是复用的，比如电量API uni.getbatteryinfo，和lottie组件，它们使用uts开发，在 uni-app和uni-app x上，调用的都是一套代码。 所以不必担心官方精力不足，顾此失彼。

十一、技术亮点与实际应用

总结

uniapp x 比 uniapp 性能更高，更接近原生，但是学习成本较高。如果你有一定的 uniapp 基础且想追求更高的性能和用户体验，那么你可以选择uniapp x。

到此这篇关于uni-appx和uni-app的区别以及该如何选择的文章就介绍到这了,更多相关uni-appx和uni-app的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文