一、前言

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

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

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

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

二、uni-app x 是什么？

??一句話定性：uni-app x，是下一代 uni-app，是一個跨平臺應用開發(fā)引擎。

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 代碼，本質(zhì)上是換了 vue 寫法的原生 kotlin 應用，在性能上與原生 kotlin 一致。

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

三、uts語言

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

uts 全稱 uni type script，是一門跨平臺的、高性能的、強類型的現(xiàn)代編程語言。它在不同平臺，會被編譯為不同平臺的 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 框架（組件、數(shù)據(jù)綁定…）、跨平臺基礎 ui、css 引擎。

有了 uvue ，開發(fā)者就可以使用 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 的子集，類似于但優(yōu)于 nvue 的 css 。僅支持 flex 布局，但也足以布局出需要的界面。詳見 css 語法

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

在過去的跨平臺方案中，邏輯層和 ui 層的通信始終是痛點。

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

但這些補丁技術都不治根。過去只有 flutter 解決了 dart 和 ui 層的通信問題。可是這套方案又帶來2個問題：

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

所以一個好的UI層，仍然應該是原生渲染而不是自渲染。只不過需要解決邏輯層和原生（不管是原生UI還是原生能力）的通信問題。

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

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

由于 uts 在 Android 上被編譯為 kotlin ，它的邏輯層和UI層都是純原生的，沒有通信問題，所以它的性能真正達到了原生水平。因為本質(zhì)上它就是換了 vue 寫法的原生 kotlin 應用。

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

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

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

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

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

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

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

五、uni的組件

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

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

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

六、API

uni-app x支持的API包括：

1. uts的API 詳見
2. 全局API，前面不需要加uni.。如getApp、getCurrentPages
3. uni.xxx的內(nèi)置API。數(shù)量較多，詳見
4. uniCloud.xxx的內(nèi)置API。詳見
5. dom的API 詳見
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)用原生對象，返回手機型號
			console.log(uni.getSystemInfoSync().deviceModel); //調(diào)用uni API，返回手機型號。與上一行返回值相同
		}
	}
</script>

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

使用 uni.getSystemInfoSync 則比較簡單，看 uni 的文檔即可，且可跨平臺。

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

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

插件市場也有很多做好的 uts 插件，方便開發(fā)者拿來即用。

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

七、全局文件

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

八、插件生態(tài) 

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

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

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

uni-app x支持 npm，但 npm 的大多數(shù)庫是 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 ?？梢宰鯝PI插件，也可以做組件插件。
   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來開發(fā)。
   在插件市場搜索框下方有uni-app x的checkbox，勾選可見到所有適配uni-app x的插件：https://ext.dcloud.net.cn/?uni-appx=1
   一般情況下，原生庫的能力是大于 js 庫的。不太可能有一個功能必須使用 js 庫才能使用。比如md5，js有庫，原生也有庫，調(diào)用一個 jar 也很方便。
   常見的加密、md5、sha、dayjs等庫，插件市場已經(jīng)有 uts 版本。

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

九、路線圖

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

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

十、FAQ

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

• uni-app x 的app端能離線打包嗎？
  可以。詳見

• uni-app x 的App能熱更新嗎？
  開發(fā)期間可以熱刷，但打包后不能熱更新。
  Android作為原生應用，可以使用uni小程序sdk，熱更新小程序。當然開發(fā)者也可自行封裝原生的插件動態(tài)加載方案。
  iOS平臺的js邏輯層模式，未來會推出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嗎？
  可以，通過uts插件，https://uniapp.dcloud.net.cn/plugin/uts-plugin.html

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

• uni-app x 的開發(fā)只能用HBuilderX嗎？
  是的。為三方ide做插件是一個投資大且充滿不確定性的事情，官方有限精力會聚焦在自身產(chǎn)品優(yōu)化上。但DCloud是開放的，不會限制三方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版運行模式最低支持chrome 66、safari 11.1、firefox 62、edge 79、safari on iOS 12；另外由于運行時不會對語法進行轉(zhuǎn)化來兼容低版本瀏覽器，如果使用了一些比較新的語法可能會無法在低版本瀏覽器上運行。

• uni-app x開源嗎？

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

• 未來 uni-app js引擎版還維護嗎？
  維護。服務 js開發(fā)者仍然是DCloud的重點。但nvue和5+將不再維護。不再維護不是下線，而是沒有重大問題的話（如新手機不兼容）不會再更新了。

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

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

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

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

十一、技術亮點與實際應用

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

總結(jié)

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

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

最新評論