在鴻蒙生態(tài)快速發(fā)展的背景下，作為餐飲行業(yè)數(shù)字化先鋒的海底撈，其鴻蒙版應(yīng)用集成在線排隊(duì)、點(diǎn)餐等核心功能，覆蓋全國(guó)超千家門(mén)店。自2024年4月海底撈與華為達(dá)成合作意愿， 6月底全面啟動(dòng)開(kāi)發(fā)工作，9月實(shí)現(xiàn)首版本上架華為應(yīng)用市場(chǎng)，今年1月推出全量功能商用版本?；?a href="http://m.makelele.cn/v/tag/228/" target="_blank">HarmonyOS 5.0，結(jié)合Flutter混編開(kāi)發(fā)的技術(shù)探索，以下內(nèi)容將從功能實(shí)現(xiàn)細(xì)節(jié)、技術(shù)適配經(jīng)驗(yàn)及生態(tài)共建啟示三方面展開(kāi)，為開(kāi)發(fā)者提供可復(fù)用的鴻蒙開(kāi)發(fā)思路。

一、海底撈Flutter適配攻略：從0到1的實(shí)戰(zhàn)分享

Flutter作為跨平臺(tái)開(kāi)發(fā)框架，從應(yīng)用核心功能的流暢呈現(xiàn)，到在不同設(shè)備上的穩(wěn)定運(yùn)行，每一個(gè)環(huán)節(jié)都需要開(kāi)發(fā)者深入鉆研、反復(fù)調(diào)試。接下來(lái)，讓我們通過(guò)海底撈的鴻蒙開(kāi)發(fā)經(jīng)驗(yàn)，一起學(xué)習(xí)從0到1實(shí)現(xiàn)Flutter適配的實(shí)戰(zhàn)秘籍，解鎖那些藏在代碼背后的適配智慧。

1．三方庫(kù)適配知識(shí)：Flutter三方庫(kù)類型

在移動(dòng)跨平臺(tái)開(kāi)發(fā)領(lǐng)域，F(xiàn)lutter的三方庫(kù)生態(tài)如同一個(gè)多元化的工具集市，為開(kāi)發(fā)者提供了豐富的選擇。根據(jù)實(shí)現(xiàn)方式和依賴關(guān)系，這些庫(kù)主要分為三種類型：

首先是純Dart庫(kù)，這類庫(kù)就像是由積木搭建的工具，它們只用Dart語(yǔ)言編寫(xiě)，不依賴任何特定平臺(tái)的原生能力。對(duì)于鴻蒙端Flutter開(kāi)發(fā)者來(lái)說(shuō)，這類庫(kù)就像是即插即用的萬(wàn)能工具，可以直接使用，無(wú)需進(jìn)行任何適配。而鴻蒙版海底撈App則采用了這種庫(kù)。

接下來(lái)是Plugin插件，這類庫(kù)類似于需要接入特定電源的精密儀器，它們?cè)趯?shí)現(xiàn)功能時(shí)調(diào)用了原生平臺(tái)的能力，比如訪問(wèn)設(shè)備硬件、系統(tǒng)服務(wù)等。以WebView插件為例，它需要與操作系統(tǒng)的WebView組件進(jìn)行交互，因此無(wú)法直接在鴻蒙端Flutter上使用，必須替換為專門(mén)針對(duì)鴻蒙系統(tǒng)優(yōu)化的版本，就像給儀器更換適配的電源插頭一樣。

最后是FFI插件，F(xiàn)FI（Foreign Function Interface）插件提供了在Dart代碼中調(diào)用C/C++原生代碼的能力，這類庫(kù)就像是一個(gè)翻譯器，允許Flutter應(yīng)用與用C/C++編寫(xiě)的高性能庫(kù)或系統(tǒng)API進(jìn)行對(duì)話，適用于需要高性能計(jì)算或訪問(wèn)特定C/C++庫(kù)的場(chǎng)景。

2．多渠道引入技巧：整理主流引入方式

了解完Flutter三方庫(kù)的類型后，接下來(lái)看看如何將這些庫(kù)引入到項(xiàng)目中。Flutter框架通過(guò)pubspec.yaml配置文件管理三方依賴，就像一個(gè)智能的倉(cāng)庫(kù)管理員，幫助開(kāi)發(fā)者高效地引入和管理各種庫(kù)。為讓大家快速認(rèn)識(shí)其引入方式，梳理了以下三種主要引入方式：

1)中心倉(cāng)引入：作為最常見(jiàn)的引入方式，就像從大型超市購(gòu)買(mǎi)標(biāo)準(zhǔn)化商品一樣方便。開(kāi)發(fā)者可以從 Pub.dev（Flutter 官方包管理平臺(tái)）直接獲取并引入所需的庫(kù)，只需在pubspec.yaml中指定庫(kù)的名稱和版本號(hào)即可。這種方式適用于大多數(shù)穩(wěn)定的公開(kāi)庫(kù)，能夠確保獲取到最新且經(jīng)過(guò)測(cè)試的版本。

2)Git引入：當(dāng)需要使用尚未發(fā)布到Pub.dev的庫(kù)，或者想要使用特定分支或提交的代碼時(shí)，就可以使用Git引入方式。這種方式就像是從代碼倉(cāng)庫(kù)直接定制購(gòu)買(mǎi)商品，可以精確控制所使用的代碼版本。開(kāi)發(fā)者需要在pubspec.yaml中指定Git倉(cāng)庫(kù)的URL和分支或提交哈希值。

3)本地引入：在開(kāi)發(fā)過(guò)程中，有時(shí)需要使用自己本地開(kāi)發(fā)的庫(kù)，或者對(duì)某個(gè)庫(kù)進(jìn)行定制修改。這時(shí)就可以使用本地引入方式，將庫(kù)文件直接放在項(xiàng)目的本地目錄中，并在pubspec.yaml中指定本地路徑。這種方式類似于使用自己工廠生產(chǎn)的零件，方便進(jìn)行調(diào)試和定制。

當(dāng)前三方庫(kù)主要由華為和開(kāi)源社區(qū)各自獨(dú)立適配，形成了獨(dú)立分支并歸檔在Git代碼倉(cāng)庫(kù)中，因此鴻蒙Flutter項(xiàng)目引用三方庫(kù)時(shí)主要采用Git引入方式，這也是海底撈App適配鴻蒙版本時(shí)所采取的方式。 3．存量Flutter項(xiàng)目的鴻蒙適配攻堅(jiān)

接下來(lái)是海底撈開(kāi)發(fā)團(tuán)隊(duì)Harmony OS Flutter的適配工作經(jīng)驗(yàn)分享。在現(xiàn)階段這項(xiàng)工作主要集中在鴻蒙端插件的適配，就像為一座跨平臺(tái)的橋梁加固特定的橋墩一樣。具體的適配步驟如下：

1)Dart代碼適配：將現(xiàn)有的Flutter版本為 3.19.5，在進(jìn)行鴻蒙適配時(shí)，鴻蒙版海底撈App適配需要降級(jí)Flutter版本以進(jìn)行API適配。這就像是調(diào)整橋梁的某些結(jié)構(gòu)，使其能夠適應(yīng)新的地形。我們適配的時(shí)候需要確保代碼中的API調(diào)用與降級(jí)后的Flutter版本兼容。

2)庫(kù)版本調(diào)整：純Flutter庫(kù)需要降級(jí)為支持Dart 2.19.6的版本，這就像是為橋梁更換合適的建材，確保其穩(wěn)定性。同時(shí)，對(duì)于包含原生平臺(tái)代碼的第三方庫(kù)，我們需要將版本改為適配鴻蒙的版本。例如shared_preferences本地存儲(chǔ)庫(kù)，就需要替換為鴻蒙適配版本。在引用方式上，它可以指定Git倉(cāng)庫(kù)地址和文件夾，就像在定制建材時(shí)指定供應(yīng)商和產(chǎn)品型號(hào)一樣。以 permission_handler 庫(kù)為例，通過(guò)指定Git倉(cāng)庫(kù)的特定分支或提交，來(lái)獲取鴻蒙適配版本。

3)原生插件開(kāi)發(fā)：對(duì)于未適配鴻蒙平臺(tái)的第三方庫(kù)，我們需要使用ArkTS語(yǔ)言進(jìn)行插件開(kāi)發(fā)，這就像是為橋梁建造一個(gè)新的分支，使其能夠連接到鴻蒙這個(gè)新的平臺(tái)。我們需要熟悉ArkTS語(yǔ)言和鴻蒙系統(tǒng)的API，將第三方庫(kù)的功能在鴻蒙平臺(tái)上重新實(shí)現(xiàn)。

4)平臺(tái)配置適配：由于多了一個(gè)鴻蒙平臺(tái)，部分枚舉值以及部分平臺(tái)配置需要進(jìn)行適配。這就像是為橋梁添加特殊的標(biāo)識(shí)和設(shè)施，以適應(yīng)不同的交通規(guī)則和環(huán)境要求。我們需要檢查代碼中的平臺(tái)特定邏輯，確保在鴻蒙平臺(tái)上也能正常工作。

4．海底撈與華為團(tuán)隊(duì)共同攻略三大難關(guān)

1）解決系統(tǒng)兼容性問(wèn)題

在開(kāi)發(fā)過(guò)程中，海底撈開(kāi)發(fā)團(tuán)隊(duì)遇到了如定位權(quán)限控制問(wèn)題等系統(tǒng)層面的bug。針對(duì)這類問(wèn)題，海底撈開(kāi)發(fā)團(tuán)隊(duì)與華為技術(shù)團(tuán)隊(duì)始終保持密切溝通，通過(guò)提交技術(shù)工單的方式推動(dòng)問(wèn)題解決。華為的項(xiàng)目技術(shù)支持迅速協(xié)助海底撈開(kāi)發(fā)團(tuán)隊(duì)定位到問(wèn)題根源，并高效完成了修復(fù)工作，確保問(wèn)題的快速閉環(huán)。

2）自研鴻蒙端Flutter插件

在開(kāi)發(fā)時(shí)期，部分Flutter插件無(wú)法直接在鴻蒙端使用，海底撈開(kāi)發(fā)團(tuán)隊(duì)決定自主開(kāi)發(fā)優(yōu)化用于適配海底撈App鴻蒙端的Flutter插件。在此過(guò)程中，華為技術(shù)團(tuán)隊(duì)提供了詳細(xì)的技術(shù)方案和開(kāi)發(fā)指導(dǎo)，幫助海底撈團(tuán)隊(duì)克服了技術(shù)難題，顯著降低了插件開(kāi)發(fā)的難度。通過(guò)雙方的緊密合作，海底撈開(kāi)發(fā)團(tuán)隊(duì)成功實(shí)現(xiàn)了關(guān)鍵插件的自主可控，為應(yīng)用在鴻蒙系統(tǒng)上的穩(wěn)定運(yùn)行奠定了堅(jiān)實(shí)基礎(chǔ)。

3）確保三端完全一致

在多端適配的攻堅(jiān)過(guò)程中，海底撈開(kāi)發(fā)團(tuán)隊(duì)與華為團(tuán)隊(duì)緊密協(xié)作，致力于實(shí)現(xiàn) iOS、Android、HarmonyOS三端體驗(yàn)的統(tǒng)一。面對(duì)跨平臺(tái)適配的重重挑戰(zhàn)，雙方團(tuán)隊(duì)展開(kāi)了全方位的技術(shù)攻關(guān)：

針對(duì)字體渲染的差異化難題，海底撈開(kāi)發(fā)團(tuán)隊(duì)深入底層參數(shù)進(jìn)行校準(zhǔn)。由于 iOS的San Francisco與鴻蒙的HarmonyOS Sans字體在間距和粗細(xì)表現(xiàn)上存在顯著差異，海底撈開(kāi)發(fā)團(tuán)隊(duì)通過(guò)精細(xì)化調(diào)整，實(shí)現(xiàn)了三端字體視覺(jué)效果的高度一致。

在布局適配方面，海底撈開(kāi)發(fā)團(tuán)隊(duì)對(duì)從折疊屏到劉海屏等各類異形屏幕進(jìn)行了細(xì)致分析，重構(gòu)了響應(yīng)式布局算法。通過(guò)優(yōu)化Flex布局參數(shù)，確保了按鈕點(diǎn)擊熱區(qū)和圖文排版在不同尺寸設(shè)備上的精準(zhǔn)呈現(xiàn)。

動(dòng)畫(huà)性能優(yōu)化過(guò)程中，海底撈開(kāi)發(fā)團(tuán)隊(duì)重點(diǎn)解決了ArkUI與Flutter引擎的幀率同步問(wèn)題，并針對(duì)Android平臺(tái)的GPU渲染特性進(jìn)行了專項(xiàng)優(yōu)化，優(yōu)化了動(dòng)畫(huà)卡頓現(xiàn)象。

色彩管理上，雙方共同建立了跨平臺(tái)色值映射標(biāo)準(zhǔn)，通過(guò)適配各系統(tǒng)的深色模式算法，確保品牌主色調(diào)在任何環(huán)境下都能保持一致的視覺(jué)表現(xiàn)。

手勢(shì)交互層面，海底撈開(kāi)發(fā)團(tuán)隊(duì)統(tǒng)一了三端的返回手勢(shì)邏輯，并對(duì)長(zhǎng)按、拖拽等操作的反饋效果進(jìn)行了標(biāo)準(zhǔn)化處理，提升了用戶操作體驗(yàn)的連貫性。

在華為技術(shù)團(tuán)隊(duì)的深度支持下，海底撈開(kāi)發(fā)團(tuán)隊(duì)對(duì)多端界面進(jìn)行了精細(xì)優(yōu)化，最終實(shí)現(xiàn)了高度一致的界面呈現(xiàn)與流暢的交互體驗(yàn)。這一成果不僅加速了“一次開(kāi)發(fā)，多端部署”的落地，也為用戶帶來(lái)了跨設(shè)備間無(wú)縫銜接的服務(wù)體驗(yàn)。

海底撈APP與鴻蒙創(chuàng)新特性結(jié)合：三大創(chuàng)新功能的技術(shù)拆解

1．華為賬號(hào)一鍵登錄：海底撈會(huì)員快速登入

很多應(yīng)用的部分新用戶因繁瑣的注冊(cè)流程放棄注冊(cè)應(yīng)用內(nèi)新賬號(hào)，而老用戶也常因手機(jī)號(hào)無(wú)法驗(yàn)證、用戶名和密碼遺忘等要進(jìn)行繁瑣的賬戶找回流程。傳統(tǒng)登入方式中，層層跳轉(zhuǎn)的驗(yàn)證頁(yè)面、密碼設(shè)定、實(shí)名認(rèn)證操作等，大大影響了用戶的耐心和體驗(yàn)。

華為賬號(hào)一鍵登錄功能通過(guò)鴻蒙系統(tǒng)底層直連華為賬號(hào)體系，因此應(yīng)用可以通過(guò)華為賬號(hào)一鍵登錄能力方便地獲取華為賬號(hào)用戶的身份標(biāo)識(shí)和手機(jī)號(hào)，得益于系統(tǒng)賬號(hào)的安全性和便利性，用戶無(wú)需輸入賬號(hào)名和密碼，無(wú)需復(fù)雜的安全驗(yàn)證，實(shí)現(xiàn)快速登錄。

鴻蒙版海底撈App接入華為賬號(hào)一鍵登錄，主要步驟如下：

準(zhǔn)備工作：登錄華為開(kāi)發(fā)者聯(lián)盟官網(wǎng)，注冊(cè)成為開(kāi)發(fā)者并創(chuàng)建應(yīng)用，獲取應(yīng)用的Client ID等相關(guān)信息，同時(shí)申請(qǐng)華為賬號(hào)一鍵登錄的相關(guān)權(quán)限。

開(kāi)發(fā)接入：在鴻蒙版海底撈App的開(kāi)發(fā)項(xiàng)目中，導(dǎo)入華為賬號(hào)服務(wù)的SDK依賴，確保項(xiàng)目能夠使用華為賬號(hào)一鍵登錄的相關(guān)功能；在應(yīng)用的代碼中，配置華為賬號(hào)一鍵登錄的參數(shù)，如應(yīng)用的 Client ID、授權(quán)范圍等；在海底撈 App 的登錄界面，添加華為賬號(hào)一鍵登錄的按鈕或入口，讓用戶能夠方便地點(diǎn)擊使用；通過(guò)調(diào)用華為賬號(hào)服務(wù)的 API，實(shí)現(xiàn)一鍵登錄的邏輯。當(dāng)用戶點(diǎn)擊華為賬號(hào)一鍵登錄按鈕時(shí)，應(yīng)用會(huì)向華為賬號(hào)體系發(fā)送請(qǐng)求，在確保用戶信息的安全和隱私后，獲取用戶的身份標(biāo)識(shí)和手機(jī)號(hào)等信息，僅用于登錄海底撈App。

測(cè)試與上線：在開(kāi)發(fā)完成后，進(jìn)行充分的測(cè)試，確保華為賬號(hào)一鍵登錄功能在不同場(chǎng)景下都能正常工作，包括在手機(jī)、平板等不同設(shè)備上，以及網(wǎng)絡(luò)環(huán)境變化等情況下的穩(wěn)定性和兼容性。測(cè)試通過(guò)后，將應(yīng)用提交到華為應(yīng)用市場(chǎng)等平臺(tái)進(jìn)行上線發(fā)布。

通過(guò)以上步驟，海底撈 App 就可以成功接入華為賬號(hào)一鍵登錄功能，為用戶提供快速、便捷、安全的登錄體驗(yàn)。

2．訂座日歷提醒：從“用戶忘訂”到“系統(tǒng)主動(dòng)提醒”的服務(wù)升級(jí)

除了海底撈門(mén)店的入座和等位服務(wù)，鴻蒙版本海底撈APP結(jié)合鴻蒙系統(tǒng)開(kāi)發(fā)上線的訂座日歷同步功能同樣給與了用戶貼心的“管家式”服務(wù)。該功能通過(guò)與鴻蒙系統(tǒng)聯(lián)動(dòng)，自動(dòng)將訂座信息生成標(biāo)準(zhǔn)化日歷事件，無(wú)縫嵌入用戶手機(jī)日歷。用戶無(wú)需額外掃碼或打開(kāi)APP查看，即可直觀獲取時(shí)間、地點(diǎn)等關(guān)鍵信息，并能靈活設(shè)置多時(shí)段提醒、主動(dòng)彈窗提醒快到已訂用餐時(shí)間。

該項(xiàng)結(jié)合打破了傳統(tǒng)餐飲服務(wù)的單一提醒線上訂座模式，通過(guò)與鴻蒙系統(tǒng)的深度融合，為企業(yè)構(gòu)建起全流程、智能化的用戶服務(wù)體驗(yàn)。

3．實(shí)況窗排號(hào)：智能交互的餐飲場(chǎng)景范式

在餐飲消費(fèi)場(chǎng)景中，等位排號(hào)一直是影響用戶體驗(yàn)的關(guān)鍵環(huán)節(jié)，很多用戶在取號(hào)后并不會(huì)在餐廳門(mén)口等待，為避免過(guò)號(hào)用戶需要頻繁掃碼進(jìn)小程序查看進(jìn)展，海底撈鴻蒙版推出排號(hào)實(shí)況窗功能，該功能通過(guò)系統(tǒng)級(jí)窗口與鴻蒙系統(tǒng)實(shí)況窗結(jié)合，將餐廳排號(hào)進(jìn)度實(shí)時(shí)整合至手機(jī)桌面及鎖屏界面。用戶無(wú)需重復(fù)打開(kāi) APP，只需滑動(dòng)屏幕或點(diǎn)亮鎖屏，即可直觀查看當(dāng)前排號(hào)、預(yù)估等待時(shí)間及叫號(hào)動(dòng)態(tài)。這種“免喚醒式”交互設(shè)計(jì)，不僅減少用戶操作步驟和重復(fù)操作，還使等位體驗(yàn)從“被動(dòng)等待”升級(jí)為 “主動(dòng)掌控”，顯著提升了用戶滿意度與服務(wù)感知價(jià)值。

二、與鴻蒙生態(tài)攜手前行

1.餐飲業(yè)與鴻蒙生態(tài)共生：餐飲、服務(wù)與技術(shù)的共同進(jìn)步

在鴻蒙生態(tài)的技術(shù)底座上，餐飲業(yè)正實(shí)現(xiàn)“服務(wù)場(chǎng)景”與“系統(tǒng)能力”的深度耦合。以鴻蒙版海底撈App為例，其核心功能依托于鴻蒙分布式架構(gòu)與系統(tǒng)級(jí)接口開(kāi)發(fā)。華為賬號(hào)一鍵登錄功能依托HarmonyOS Account Kit實(shí)現(xiàn)無(wú)感認(rèn)證，降低了用戶的流失率；訂座日歷功能通過(guò)調(diào)用系統(tǒng)日歷API自動(dòng)同步日程，提升了用戶的履約率；排號(hào)實(shí)況窗功能基于鴻蒙WindowManager服務(wù)，在鎖屏界面實(shí)時(shí)渲染排隊(duì)動(dòng)態(tài)，減少等位階段APP的打開(kāi)頻次。

這種共生模式不僅提升了用戶體驗(yàn)，更優(yōu)化了餐飲行業(yè)的運(yùn)營(yíng)邏輯。當(dāng)餐飲服務(wù)成為鴻蒙系統(tǒng)能力的自然延伸，品牌得以在生態(tài)中建立用戶基礎(chǔ)，實(shí)現(xiàn)服務(wù)從“單一應(yīng)用”到“多場(chǎng)景化”的躍遷。

2.下一代交互體驗(yàn)：重構(gòu)“人-餐-場(chǎng)”的鴻蒙智能模式

在搭載鴻蒙創(chuàng)新特性的鴻蒙版海底撈App下一代交互體驗(yàn)中，依托鴻蒙強(qiáng)大的分布式架構(gòu)與全場(chǎng)景協(xié)同能力，這次升級(jí)帶來(lái)三大新體驗(yàn)。

包括海底撈智能體、實(shí)況窗 2.0、相機(jī)即服務(wù)等新服務(wù)，只需一句“小藝，幫我打開(kāi)海底撈智能體”，隨身餐飲管家即刻上線！查門(mén)店、看時(shí)段、快速排位，還能根據(jù)你的口味偏好推薦招牌菜品組合。排號(hào)時(shí)，點(diǎn)擊“立即取號(hào)”喚醒實(shí)況窗2.0，彈窗實(shí)時(shí)追蹤排隊(duì)進(jìn)度，預(yù)點(diǎn)餐一鍵同步，到店就能開(kāi)吃！到店后更方便，不用打開(kāi)App，直接用系統(tǒng)相機(jī)掃碼，桌位信息自動(dòng)綁定，預(yù)點(diǎn)菜品秒傳后廚。從找店、排隊(duì)到點(diǎn)餐，鴻蒙版海底撈App用“語(yǔ)音交互+實(shí)況窗速覽+相機(jī)直連”三大創(chuàng)新，就能讓用戶享受絲滑流暢的智能用餐新體驗(yàn)！

如今，鴻蒙生態(tài)正以蓬勃發(fā)展的態(tài)勢(shì)吸引著越來(lái)越多的開(kāi)發(fā)者和企業(yè)加入。這是一個(gè)充滿機(jī)遇和挑戰(zhàn)的時(shí)代，也是一個(gè)能夠讓創(chuàng)新夢(mèng)想成真的時(shí)代。我們誠(chéng)摯地邀請(qǐng)廣大開(kāi)發(fā)者積極加入鴻蒙認(rèn)證，發(fā)揮你的技術(shù)專長(zhǎng)和創(chuàng)意靈感，共同為鴻蒙生態(tài)的繁榮添磚加瓦；同時(shí)，也熱烈歡迎各企業(yè)積極投身鴻蒙生態(tài)，在這個(gè)充滿無(wú)限可能的平臺(tái)上，共同探索新的發(fā)展模式，共創(chuàng)智能時(shí)代的美好未來(lái)。讓我們攜手共進(jìn)，在鴻蒙的世界里，開(kāi)啟智能交互的新篇章，為用戶帶來(lái)更加卓越的體驗(yàn)，為行業(yè)發(fā)展注入新的活力！

點(diǎn)擊鏈接即刻開(kāi)啟鴻蒙應(yīng)用開(kāi)發(fā)學(xué)習(xí)之旅，與全球百萬(wàn)開(kāi)發(fā)者同行，共建萬(wàn)物互聯(lián)新生態(tài)！

鴻蒙認(rèn)證通道及更多鴻蒙開(kāi)發(fā)經(jīng)驗(yàn)【一起了解鴻蒙開(kāi)發(fā)吧！】

審核編輯 黃宇