uni-appx 和 uni-app 的区别，该如何选择？

Microi风闲

已于 2025-01-15 22:38:18 修改

阅读量3.1k

点赞数 30

分类专栏：【跨端开发】Uniapp 文章标签： uni-app

于 2025-01-15 22:37:20 首次发布

本文链接：https://blog.csdn.net/mss359681091/article/details/145168886

版权

【跨端开发】Uniapp 专栏收录该内容

25 篇文章

订阅专栏

文章目录

一、前言🍃
二、uni-app x 是什么？
三、uts语言
四、uvue渲染引擎
五、uni的组件
六、API
七、全局文件📃
八、插件生态 🧩
九、路线图
十、FAQ
十一、总结
🎀🎀🎀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 的、跨平台的、新语言。

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

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

Android
Android 端通过开发者工具显示界面元素边界可知界面都是 原生UI ，解包后也不会看到 js 引擎，里面的 html 文件是示例中演示 web-view 组件所用
iOS 获取 ABM（Apple 商务管理）包
使用 iPhone 扫码后会跳转页面需要使用 DCloud 账号登录，登录过后自动分发兑换码在 AppStore 获取安装包，此过程不需要您支付费用。ABM包在Appstore中无法公开搜索到，但安装后可在 AppStore 更新页面进行更新。

三、uts语言

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

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

web/小程序平台，编译为 JavaScript
Android平台，编译为 Kotlin
iOS平台，编译 Swift
鸿蒙next平台，编译为 arkts

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

四、uvue渲染引擎

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

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

Android版于3.99上线
Web版于4.0上线
iOS版于4.11上线

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 层的通信始终是痛点。

所以在 webview 渲染时，增加了 renderjs、wxs 等技术
所以在 nvue 渲染时，增加了 bindingX 技术
所以在 skyline 渲染时，增加了 worklet 技术

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

dart 和原生层通信也还是有延时，对象传递需要序列化，造成性能问题；
自渲染而不是原生渲染，无可避免会引发混合渲染，比如原生的信息流广告内嵌、原生输入法适配，造成内存高和输入障碍。

所以一个好的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 电脑。

js逻辑层已于4.11版上线
swift逻辑层还未上线

虽然理论上 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支持的组件包括：

内置基础组件：如 view、text、image、scroll-view、input…等，详见组件清单
自定义vue组件：使用内置组件和vue组件技术进行封装的组件，支持easycom。
uts组件插件：用于原生sdk的ui以组件的方式嵌入。

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

六、API

uni-app x支持的API包括：

uts的API 详见
全局API，前面不需要加uni.。如getApp、getCurrentPages
uni.xxx的内置API。数量较多，详见
uniCloud.xxx的内置API。详见
dom的API 详见
原生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。

七、全局文件📃

manifest.json 详见
app.uvue 详见
pages.json 不支持app-plus的内容。详见
uni.scss 正常支持。但注意app-uvue仅能使用css子集

八、插件生态 🧩

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

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

原生生态。比如上述示例代码中获取手机型号。以及各种原生sdk的直接调用。
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。

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 中运行。
前端插件
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代码。

九、路线图

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

平台支持：Android、Web、iOS版已发布。小程序、鸿蒙还未支持。虽然 uts 语言支持swift，可以写原生插件，但uvue的iOS版目前只上线了 js 逻辑层，还未发布 swift 逻辑层。
小程序平台：4.41起支持微信小程序。其他小程序还在陆续适配中。
鸿蒙next平台：uni-app已支持鸿蒙next，采用 web-view 渲染；25年初会提供 uni-app x 编译为鸿蒙，采用原生渲染。目前 uni-app 的鸿蒙版，所有API实现均使用 uts 方式，可与uni-app x 复用。
目前不支持国际区账户创建和打包 uni-app x，仅大陆区开发者账户可用。

十、FAQ

uni-app x 支持uvue页面和vue页面混写吗？
仅支持uvue页面。Android平台没有内置js引擎，不能运行vue页面。但历史vue页面可以通过 uni小程序sdk 嵌入到uni-app x中。
uni-app x 的app端能离线打包吗？
可以。详见
uni-app x 的App能热更新吗？
开发期间可以热刷，但打包后不能热更新。
Android作为原生应用，可以使用uni小程序sdk，热更新小程序。当然开发者也可自行封装原生的插件动态加载方案。
iOS平台的js逻辑层模式，未来会推出wgt更新。
uni-app x 能调用所有原生API吗？
可以。在app端，kotlin和swift能调用的，uts就能调。在浏览器端，所有js能调用的，uts也都能调。
uni-app x 能集成原生sdk吗？
可以，通过uts插件，https://uniapp.dcloud.net.cn/plugin/uts-plugin.html
uvue页面里的script可以直接调用原生代码吗？还是必须封装成uni_modules方式的uts原生插件？
uvue的script里写的就是uts，Android端可以直接调原生代码。无所谓它在uni_modules里还是外。但如果是大段的原生代码调用，还是推荐封装为独立的uni_modules。
iOS平台如果是js逻辑层模式，只能在独立uni_modules中才能调用原生。
uni-app x 的开发只能用HBuilderX吗？
是的。为三方ide做插件是一个投资大且充满不确定性的事情，官方有限精力会聚焦在自身产品优化上。但DCloud是开放的，不会限制三方ide的插件支持。欢迎社区投入支持。
uni-app x 支持最低的Android版本多少？浏览器版本多少？
- Android App最低支持Android 5；
- iOS版最低支持iOS12
- Web版发行模式最低支持chrome 64、safari 11.1、firefox 62、edge 79、safari on iOS 12；
- Web版运行模式最低支持chrome 66、safari 11.1、firefox 62、edge 79、safari on iOS 12；另外由于运行时不会对语法进行转化来兼容低版本浏览器，如果使用了一些比较新的语法可能会无法在低版本浏览器上运行。
uni-app x开源吗？
- Web版开源地址：https://github.com/dcloudio/uni-app
- App版的组件和API实现大都开源，持续更新在项目uni-api和uni-component下。
  开发者可以了解组件和API的实现，直接修改或优化源码，修改后的代码以ext api或组件的方式下载到项目中，即可实现在本项目中替换掉官方组件和API。
未来 uni-app js引擎版还维护吗？
维护。服务 js开发者仍然是DCloud的重点。但nvue和5+将不再维护。不再维护不是下线，而是没有重大问题的话（如新手机不兼容）不会再更新了。