一、前言

uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到 iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書(shū)/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。

uni-app 在開(kāi)發(fā)者數(shù)量、案例、跨端抹平度、擴(kuò)展靈活性、性能體驗(yàn)、周邊生態(tài)、學(xué)習(xí)成本、開(kāi)發(fā)成本等8大關(guān)鍵指標(biāo)上擁有更強(qiáng)的優(yōu)勢(shì)。

從下面 uni-app 功能框架圖可看出， uni-app 在跨平臺(tái)的過(guò)程中，不犧牲平臺(tái)特色，可優(yōu)雅的調(diào)用平臺(tái)專有能力，真正做到海納百川、各取所長(zhǎng)。

??今日探討主題：uni-appx 和 uniapp 如何選擇？  的問(wèn)題。

二、uni-app x 是什么？

??一句話定性：uni-app x，是下一代 uni-app，是一個(gè)跨平臺(tái)應(yīng)用開(kāi)發(fā)引擎。

uni-app x 是一個(gè)龐大的工程，它包括 uts 語(yǔ)言、uvue 渲染引擎、uni 的組件和 API、以及擴(kuò)展機(jī)制。

??uts 是一門(mén)類 ts 的、跨平臺(tái)的、新語(yǔ)言。

1. 在 iOS 平臺(tái)編譯為 swift
2. 在 Android 平臺(tái)編譯為 kotlin
3. 在 Web 和 小程序平臺(tái)編譯為 js
4. 在 鴻蒙next 平臺(tái)上編譯為 ArkTS。

在 Android 平臺(tái)，uni-app x 的工程被整體編譯為 kotlin 代碼，本質(zhì)上是換了 vue 寫(xiě)法的原生 kotlin 應(yīng)用，在性能上與原生 kotlin 一致。

• Android
  Android 端通過(guò)開(kāi)發(fā)者工具顯示界面元素邊界可知界面都是 原生UI ，解包后也不會(huì)看到 js 引擎，里面的 html 文件是示例中演示 web-view 組件所用
• iOS 獲取 ABM（Apple 商務(wù)管理）包
  使用 iPhone 掃碼后會(huì)跳轉(zhuǎn)頁(yè)面需要使用 DCloud 賬號(hào)登錄，登錄過(guò)后自動(dòng)分發(fā)兌換碼在 AppStore 獲取安裝包，此過(guò)程不需要您支付費(fèi)用。ABM包在Appstore中無(wú)法公開(kāi)搜索到，但安裝后可在 AppStore 更新頁(yè)面進(jìn)行更新。

三、uts語(yǔ)言

?開(kāi)發(fā)者在 uni-app x 中，需使用 uts 而不是 js 。尤其是 Android 端 ??不自帶 js 引擎，無(wú)法運(yùn)行 js 代碼。

uts 全稱 uni type script，是一門(mén)跨平臺(tái)的、高性能的、強(qiáng)類型的現(xiàn)代編程語(yǔ)言。它在不同平臺(tái)，會(huì)被編譯為不同平臺(tái)的 native 語(yǔ)言，如：

• web/小程序平臺(tái)，編譯為 JavaScript
• Android平臺(tái)，編譯為 Kotlin
• iOS平臺(tái)，編譯 Swift
• 鴻蒙next平臺(tái)，編譯為 arkts

uts 和 ts 很相似，但為了跨端，uts 進(jìn)行了一些約束和特定平臺(tái)的增補(bǔ)。

四、uvue渲染引擎

uts 替代的是 js，而 uvue 替代的就是 html 和 css ?；蛘呷绻懔私?flutter 的話，也可以理解為 uts 類似 dart ，而 uvue 類似 flutter 。

uvue 是一套基于 uts 的、兼容 vue 語(yǔ)法的、跨平臺(tái)的、原生渲染引擎。

• Android版于3.99上線
• Web版于4.0上線
• iOS版于4.11上線

uvue 渲染引擎包括 uts 版的 vue 框架（組件、數(shù)據(jù)綁定…）、跨平臺(tái)基礎(chǔ) ui、css 引擎。

有了 uvue ，開(kāi)發(fā)者就可以使用 vue 語(yǔ)法、css 來(lái)快速編寫(xiě)頁(yè)面，編譯為不同平臺(tái)的、高性能的純?cè)缑妗?/p>

??一個(gè) uvue 頁(yè)面的例子：

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

<script>
	//這里只能寫(xiě)uts
	export default {
		data() {
			return {
				title: "Hello world"
			}
		},
		onLoad() {
			console.log('onLoad')
		},
		methods: {
			buttonClick: function () {
				uni.showModal({
					"showCancel": false,
					"content": "點(diǎn)了按鈕"
				})
			}
		}
	}
</script>

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

uvue 支持的是 vue3 語(yǔ)法，支持 組合式API 和 選項(xiàng)式API 。詳見(jiàn) vue 語(yǔ)法。

uvue 在 App 端支持的 css 語(yǔ)法，是 web 的子集，類似于但優(yōu)于 nvue 的 css 。僅支持 flex 布局，但也足以布局出需要的界面。詳見(jiàn) css 語(yǔ)法

使用該 css 子集，可保證跨端。如果把 uvue 頁(yè)面編譯到 web 平臺(tái)，則 web 的其他 css也都可以使用。

在過(guò)去的跨平臺(tái)方案中，邏輯層和 ui 層的通信始終是痛點(diǎn)。

• 所以在 webview 渲染時(shí)，增加了 renderjs、wxs 等技術(shù)
• 所以在 nvue 渲染時(shí)，增加了 bindingX 技術(shù)
• 所以在 skyline 渲染時(shí)，增加了 worklet 技術(shù)

但這些補(bǔ)丁技術(shù)都不治根。過(guò)去只有 flutter 解決了 dart 和 ui 層的通信問(wèn)題。可是這套方案又帶來(lái)2個(gè)問(wèn)題：

• dart 和原生層通信也還是有延時(shí)，對(duì)象傳遞需要序列化，造成性能問(wèn)題；
• 自渲染而不是原生渲染，無(wú)可避免會(huì)引發(fā)混合渲染，比如原生的信息流廣告內(nèi)嵌、原生輸入法適配，造成內(nèi)存高和輸入障礙。

所以一個(gè)好的UI層，仍然應(yīng)該是原生渲染而不是自渲染。只不過(guò)需要解決邏輯層和原生（不管是原生UI還是原生能力）的通信問(wèn)題。

其實(shí)不管是 js 還是 dart ，和原生都有通信橋，功能上沒(méi)有限制，可以調(diào)用各種原生能力，但問(wèn)題就出在 Android 上這個(gè)通信性能上不去。

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

由于 uts 在 Android 上被編譯為 kotlin ，它的邏輯層和UI層都是純?cè)模瑳](méi)有通信問(wèn)題，所以它的性能真正達(dá)到了原生水平。因?yàn)楸举|(zhì)上它就是換了 vue 寫(xiě)法的原生 kotlin 應(yīng)用。

在 iOS 上，情況要復(fù)雜些。由于 swift 編譯 iOS 應(yīng)用必須依賴 xcode，而 DCloud 的開(kāi)發(fā)者中 windows 占比更高。且 iOS 上 js 和原生通信有解，所以 uni-app x 在iOS 上提供 js 和 swift 雙選邏輯層。

也就是 uts 原生插件作者必須得有 mac 電腦，普通的 App 開(kāi)發(fā)者可以沒(méi)有 mac 電腦。

• js邏輯層已于4.11版上線
• swift邏輯層還未上線

雖然理論上 swift 邏輯層的性能要高于 js 邏輯層，但開(kāi)發(fā)者可以放心使用 js 邏輯層。

uni-app x在 iphone 上的 js 邏輯層和原生渲染層的通信經(jīng)過(guò)特殊處理，大幅提升通信效率問(wèn)題，不再需要 bindingX 這類技術(shù)。也不存在 flutter 那種混合渲染問(wèn)題。

可以體驗(yàn) hello uni-app x 的iOS版本，在 slider-100、滾動(dòng)時(shí)動(dòng)態(tài)調(diào)整 view 的 top 值以維持吸頂?shù)葮O端場(chǎng)景，均如 Android 一樣的絲滑流暢。

使用 js 邏輯層除了能在 windows 下開(kāi)發(fā)，還有一個(gè)好處是大幅降低插件生態(tài)的建設(shè)難度。 插件作者只需要特殊適配 Android 版本，在 iOS 和 Web 端仍使用 ts/js 庫(kù)，即可快速把 uni-app/web 的生態(tài)遷移到 uni-app x 中。

五、uni的組件

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

• 內(nèi)置基礎(chǔ)組件：如 view、text、image、scroll-view、input…等，詳見(jiàn)組件清單
• 自定義vue組件：使用內(nèi)置組件和vue組件技術(shù)進(jìn)行封裝的組件，支持easycom。
• uts組件插件：用于原生sdk的ui以組件的方式嵌入。

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

六、API

uni-app x支持的API包括：

1. uts的API 詳見(jiàn)
2. 全局API，前面不需要加uni.。如getApp、getCurrentPages
3. uni.xxx的內(nèi)置API。數(shù)量較多，詳見(jiàn)
4. uniCloud.xxx的內(nèi)置API。詳見(jiàn)
5. dom的API 詳見(jiàn)
6. 原生API

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

<script>
	import Build from 'android.os.Build';
	export default {
		onLoad() {
			console.log(Build.MODEL); //調(diào)用原生對(duì)象，返回手機(jī)型號(hào)
			console.log(uni.getSystemInfoSync().deviceModel); //調(diào)用uni API，返回手機(jī)型號(hào)。與上一行返回值相同
		}
	}
</script>

在 uni-app x 里，可以直接調(diào)用 OS 的能力，不受限制，語(yǔ)法是 uts 的語(yǔ)法，但需要了解什么功能在原生里是哪個(gè) api 。

使用 uni.getSystemInfoSync 則比較簡(jiǎn)單，看 uni 的文檔即可，且可跨平臺(tái)。

其實(shí)，uni.getSystemInfoSync 的內(nèi)部實(shí)現(xiàn)就是一個(gè) uts 模塊，底層使用了一樣的代碼，也是import 了 android.os.Build 。

uni.的api ，大多是 uts 開(kāi)發(fā)的，它們會(huì)陸續(xù)開(kāi)源在 uni-api 。

插件市場(chǎng)也有很多做好的 uts 插件，方便開(kāi)發(fā)者拿來(lái)即用。

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

七、全局文件

• manifest.json 詳見(jiàn)
• app.uvue 詳見(jiàn)
• pages.json 不支持app-plus的內(nèi)容。詳見(jiàn)
• uni.scss 正常支持。但注意app-uvue僅能使用css子集

八、插件生態(tài) 

uni-app x 編譯到web、小程序、以及 iOS 的 js 邏輯層模式時(shí)，所有 js 庫(kù)仍然可用。但在Android 平臺(tái)或 iOS 的 swift 邏輯層模式時(shí)，由于沒(méi)有 js 引擎，所以無(wú)法使用 js 生態(tài)（除非使用 web-view 組件或自己集成一個(gè) js 引擎）。

uni-app x App平臺(tái)的插件生態(tài)來(lái)源于：

1. 原生生態(tài)。比如上述示例代碼中獲取手機(jī)型號(hào)。以及各種原生sdk的直接調(diào)用。
2. ts生態(tài)的遷移。很多js庫(kù)是ts編寫(xiě)的，如果沒(méi)有使用 uts 不支持的語(yǔ)法，ts代碼就可以使用。如果略有不同，也可以稍加改造 ts 以適配 uts 。

uni-app x支持 npm，但 npm 的大多數(shù)庫(kù)是 for web 的，無(wú)法跨端，這些庫(kù)只能在uni-app x編譯為 web 時(shí)使用。當(dāng)然如果有兼容 uni-app x 的全端庫(kù)，可以使用，比如這些庫(kù)z-paging-x、lwu-css。
uni 插件市場(chǎng)是跨端插件的聚集地，更推薦在這里找插件而不是去 npm。插件市場(chǎng)有2種插件適用于uni-app x。

1. uts插件（原生插件）
   uts插件封裝原生能力，包括os能力或三方 sdk ?？梢宰鯝PI插件，也可以做組件插件。
   uts插件可同時(shí)在 uni-app js 引擎版 和 uni-app x 的 app 平臺(tái)上運(yùn)行。
   uts插件分類直達(dá)：https://ext.dcloud.net.cn/?cat1=8&type=UpdatedDate
   之前 uni-app js 版的 “App原生語(yǔ)言插件”，因依賴 js 引擎和 weex ，所以無(wú)法在 uni-app x 中運(yùn)行。

2. 前端插件
   uvue 組件、uts sdk、uni-app x前端頁(yè)面/項(xiàng)目模板。這些前端代碼仍然使用 uni-app x 的vue、uts、css來(lái)開(kāi)發(fā)。
   在插件市場(chǎng)搜索框下方有uni-app x的checkbox，勾選可見(jiàn)到所有適配uni-app x的插件：https://ext.dcloud.net.cn/?uni-appx=1
   一般情況下，原生庫(kù)的能力是大于 js 庫(kù)的。不太可能有一個(gè)功能必須使用 js 庫(kù)才能使用。比如md5，js有庫(kù)，原生也有庫(kù)，調(diào)用一個(gè) jar 也很方便。
   常見(jiàn)的加密、md5、sha、dayjs等庫(kù)，插件市場(chǎng)已經(jīng)有 uts 版本。

??提示：如果你一定要使用某個(gè)js庫(kù)，還有一個(gè)辦法是在uni-app x里的web-view組件，讓其運(yùn)行js并返回值給uts代碼。

九、路線圖

??除上述文檔中聲明已經(jīng)完成的，還有如下需要注意：

• 平臺(tái)支持：Android、Web、iOS版已發(fā)布。小程序、鴻蒙還未支持。雖然 uts 語(yǔ)言支持swift，可以寫(xiě)原生插件，但uvue的iOS版目前只上線了 js 邏輯層，還未發(fā)布 swift 邏輯層。
• 小程序平臺(tái)：4.41起支持微信小程序。其他小程序還在陸續(xù)適配中。
• 鴻蒙next平臺(tái)：uni-app已支持鴻蒙next，采用 web-view 渲染；25年初會(huì)提供 uni-app x 編譯為鴻蒙，采用原生渲染。目前 uni-app 的鴻蒙版，所有API實(shí)現(xiàn)均使用 uts 方式，可與uni-app x 復(fù)用。
• 目前不支持國(guó)際區(qū)賬戶創(chuàng)建和打包 uni-app x，僅大陸區(qū)開(kāi)發(fā)者賬戶可用。

十、FAQ

• uni-app x 支持uvue頁(yè)面和vue頁(yè)面混寫(xiě)嗎？
  僅支持uvue頁(yè)面。Android平臺(tái)沒(méi)有內(nèi)置js引擎，不能運(yùn)行vue頁(yè)面。但歷史vue頁(yè)面可以通過(guò) uni小程序sdk 嵌入到uni-app x中。

• uni-app x 的app端能離線打包嗎？
  可以。詳見(jiàn)

• uni-app x 的App能熱更新嗎？
  開(kāi)發(fā)期間可以熱刷，但打包后不能熱更新。
  Android作為原生應(yīng)用，可以使用uni小程序sdk，熱更新小程序。當(dāng)然開(kāi)發(fā)者也可自行封裝原生的插件動(dòng)態(tài)加載方案。
  iOS平臺(tái)的js邏輯層模式，未來(lái)會(huì)推出wgt更新。

• uni-app x 能調(diào)用所有原生API嗎？
  可以。在app端，kotlin和swift能調(diào)用的，uts就能調(diào)。在瀏覽器端，所有js能調(diào)用的，uts也都能調(diào)。

• uni-app x 能集成原生sdk嗎？
  可以，通過(guò)uts插件，https://uniapp.dcloud.net.cn/plugin/uts-plugin.html

• uvue頁(yè)面里的script可以直接調(diào)用原生代碼嗎？還是必須封裝成uni_modules方式的uts原生插件？
  uvue的script里寫(xiě)的就是uts，Android端可以直接調(diào)原生代碼。無(wú)所謂它在uni_modules里還是外。但如果是大段的原生代碼調(diào)用，還是推薦封裝為獨(dú)立的uni_modules。
  iOS平臺(tái)如果是js邏輯層模式，只能在獨(dú)立uni_modules中才能調(diào)用原生。

• uni-app x 的開(kāi)發(fā)只能用HBuilderX嗎？
  是的。為三方ide做插件是一個(gè)投資大且充滿不確定性的事情，官方有限精力會(huì)聚焦在自身產(chǎn)品優(yōu)化上。但DCloud是開(kāi)放的，不會(huì)限制三方ide的插件支持。歡迎社區(qū)投入支持。

• uni-app x 支持最低的Android版本多少？瀏覽器版本多少？

  • Android App最低支持Android 5；
  • iOS版最低支持iOS12
  • Web版發(fā)行模式最低支持chrome 64、safari 11.1、firefox 62、edge 79、safari on iOS 12；
  • Web版運(yùn)行模式最低支持chrome 66、safari 11.1、firefox 62、edge 79、safari on iOS 12；另外由于運(yùn)行時(shí)不會(huì)對(duì)語(yǔ)法進(jìn)行轉(zhuǎn)化來(lái)兼容低版本瀏覽器，如果使用了一些比較新的語(yǔ)法可能會(huì)無(wú)法在低版本瀏覽器上運(yùn)行。

• uni-app x開(kāi)源嗎？

  • Web版開(kāi)源地址：https://github.com/dcloudio/uni-app
  • App版的組件和API實(shí)現(xiàn)大都開(kāi)源，持續(xù)更新在項(xiàng)目uni-api和uni-component下。
    開(kāi)發(fā)者可以了解組件和API的實(shí)現(xiàn)，直接修改或優(yōu)化源碼，修改后的代碼以ext api或組件的方式下載到項(xiàng)目中，即可實(shí)現(xiàn)在本項(xiàng)目中替換掉官方組件和API。

• 未來(lái) uni-app js引擎版還維護(hù)嗎？
  維護(hù)。服務(wù) js開(kāi)發(fā)者仍然是DCloud的重點(diǎn)。但nvue和5+將不再維護(hù)。不再維護(hù)不是下線，而是沒(méi)有重大問(wèn)題的話（如新手機(jī)不兼容）不會(huì)再更新了。

如果開(kāi)發(fā)小程序和Web，那使用哪個(gè)都差不多。

如果開(kāi)發(fā)App，那uni-app面向的是對(duì)體驗(yàn)不敏感，只了解web技術(shù)，對(duì)開(kāi)發(fā)成本更敏感的前端開(kāi)發(fā)者。而uni-app x則適用于愿意多付出一些開(kāi)發(fā)成本、以追求更好體驗(yàn)的開(kāi)發(fā)者。當(dāng)然這個(gè)多付出的開(kāi)發(fā)成本也遠(yuǎn)低于原生開(kāi)發(fā)各端的成本。

不管uni-app還是uni-app x，都支持uts插件生態(tài)，原生擴(kuò)展api和插件是復(fù)用的。

包括官方的組件和API也是復(fù)用的，比如電量API uni.getbatteryinfo，和lottie組件，它們使用uts開(kāi)發(fā)，在 uni-app和uni-app x上，調(diào)用的都是一套代碼。 所以不必?fù)?dān)心官方精力不足，顧此失彼。

十一、技術(shù)亮點(diǎn)與實(shí)際應(yīng)用

• UTS & uvue 架構(gòu)：UTS 語(yǔ)言編寫(xiě)邏輯，uvue 做視圖與樣式，統(tǒng)一用 Vue 風(fēng)格語(yǔ)法開(kāi)發(fā)，最后編譯為平臺(tái)原生代碼。
• 無(wú)橋接架構(gòu)：不同于跨平臺(tái)框架中常見(jiàn) JS ↔ 原生的通信瓶頸，uni-app X 的 UTS 直接映射原生語(yǔ)言，無(wú)中間橋接。
• 編譯緩存優(yōu)化：引入緩存機(jī)制，提升編譯效率，縮短開(kāi)發(fā)調(diào)試周期。
• 平臺(tái)融合情景：支持深度混編，可將 uni-app X 頁(yè)面嵌入原生 App，同時(shí)便于調(diào)試與原生功能共存。

總結(jié)

uniapp x 比 uniapp 性能更高，更接近原生，但是學(xué)習(xí)成本較高。如果你有一定的 uniapp 基礎(chǔ)且想追求更高的性能和用戶體驗(yàn)，那么你可以選擇uniapp x。

到此這篇關(guān)于uni-appx和uni-app的區(qū)別以及該如何選擇的文章就介紹到這了,更多相關(guān)uni-appx和uni-app的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論