在鴻蒙生態(tài)快速發(fā)展的背景下，作為餐飲行業(yè)數(shù)字化先鋒的海底撈，其鴻蒙版應(yīng)用集成在線排隊(duì)、點(diǎn)餐等核心功能，覆蓋全國超千家門店。自2024年4月海底撈與華為達(dá)成合作意愿， 6月底全面啟動開發(fā)工作，9月實(shí)現(xiàn)首版本上架華為應(yīng)用市場，今年1月推出全量功能商用版本?；贖armonyOS 5.0，結(jié)合Flutter混編開發(fā)的技術(shù)探索，以下內(nèi)容將從功能實(shí)現(xiàn)細(xì)節(jié)、技術(shù)適配經(jīng)驗(yàn)及生態(tài)共建啟示三方面展開，為開發(fā)者提供可復(fù)用的鴻蒙開發(fā)思路。
一、 海底撈Flutter適配攻略：從0到1的實(shí)戰(zhàn)分享
Flutter作為跨平臺開發(fā)框架，從應(yīng)用核心功能的流暢呈現(xiàn)，到在不同設(shè)備上的穩(wěn)定運(yùn)行，每一個環(huán)節(jié)都需要開發(fā)者深入鉆研、反復(fù)調(diào)試。接下來，讓我們通過海底撈的鴻蒙開發(fā)經(jīng)驗(yàn)，一起學(xué)習(xí)從0到1實(shí)現(xiàn)Flutter適配的實(shí)戰(zhàn)秘籍，解鎖那些藏在代碼背后的適配智慧。
1．三方庫適配知識：Flutter三方庫類型
在移動跨平臺開發(fā)領(lǐng)域，F(xiàn)lutter的三方庫生態(tài)如同一個多元化的工具集市，為開發(fā)者提供了豐富的選擇。根據(jù)實(shí)現(xiàn)方式和依賴關(guān)系，這些庫主要分為三種類型：
首先是純Dart庫，這類庫就像是由積木搭建的工具，它們只用Dart語言編寫，不依賴任何特定平臺的原生能力。對于鴻蒙端Flutter開發(fā)者來說，這類庫就像是即插即用的萬能工具，可以直接使用，無需進(jìn)行任何適配。而鴻蒙版海底撈App則采用了這種庫。
接下來是Plugin插件，這類庫類似于需要接入特定電源的精密儀器，它們在實(shí)現(xiàn)功能時(shí)調(diào)用了原生平臺的能力，比如訪問設(shè)備硬件、系統(tǒng)服務(wù)等。以WebView插件為例，它需要與操作系統(tǒng)的WebView組件進(jìn)行交互，因此無法直接在鴻蒙端Flutter上使用，必須替換為專門針對鴻蒙系統(tǒng)優(yōu)化的版本，就像給儀器更換適配的電源插頭一樣。
最后是FFI插件，F(xiàn)FI（Foreign Function Interface）插件提供了在Dart代碼中調(diào)用C/C++原生代碼的能力，這類庫就像是一個翻譯器，允許Flutter應(yīng)用與用C/C++編寫的高性能庫或系統(tǒng)API進(jìn)行對話，適用于需要高性能計(jì)算或訪問特定C/C++庫的場景。
2．多渠道引入技巧：整理主流引入方式
了解完Flutter三方庫的類型后，接下來看看如何將這些庫引入到項(xiàng)目中。Flutter框架通過pubspec.yaml配置文件管理三方依賴，就像一個智能的倉庫管理員，幫助開發(fā)者高效地引入和管理各種庫。為讓大家快速認(rèn)識其引入方式，梳理了以下三種主要引入方式：
1) 中心倉引入：作為最常見的引入方式，就像從大型超市購買標(biāo)準(zhǔn)化商品一樣方便。開發(fā)者可以從 Pub.dev（Flutter 官方包管理平臺）直接獲取并引入所需的庫，只需在pubspec.yaml中指定庫的名稱和版本號即可。這種方式適用于大多數(shù)穩(wěn)定的公開庫，能夠確保獲取到最新且經(jīng)過測試的版本。
2) Git引入：當(dāng)需要使用尚未發(fā)布到Pub.dev的庫，或者想要使用特定分支或提交的代碼時(shí)，就可以使用Git引入方式。這種方式就像是從代碼倉庫直接定制購買商品，可以精確控制所使用的代碼版本。開發(fā)者需要在pubspec.yaml中指定Git倉庫的URL和分支或提交哈希值。
3) 本地引入：在開發(fā)過程中，有時(shí)需要使用自己本地開發(fā)的庫，或者對某個庫進(jìn)行定制修改。這時(shí)就可以使用本地引入方式，將庫文件直接放在項(xiàng)目的本地目錄中，并在pubspec.yaml中指定本地路徑。這種方式類似于使用自己工廠生產(chǎn)的零件，方便進(jìn)行調(diào)試和定制。
當(dāng)前三方庫主要由華為和開源社區(qū)各自獨(dú)立適配，形成了獨(dú)立分支并歸檔在Git代碼倉庫中，因此鴻蒙Flutter項(xiàng)目引用三方庫時(shí)主要采用Git引入方式，這也是海底撈App適配鴻蒙版本時(shí)所采取的方式。 3．存量Flutter項(xiàng)目的鴻蒙適配攻堅(jiān)
接下來是海底撈開發(fā)團(tuán)隊(duì)Harmony OS Flutter的適配工作經(jīng)驗(yàn)分享。在現(xiàn)階段這項(xiàng)工作主要集中在鴻蒙端插件的適配，就像為一座跨平臺的橋梁加固特定的橋墩一樣。具體的適配步驟如下：
1) Dart代碼適配：將現(xiàn)有的Flutter版本為 3.19.5，在進(jìn)行鴻蒙適配時(shí)，鴻蒙版海底撈App適配需要降級Flutter版本以進(jìn)行API適配。這就像是調(diào)整橋梁的某些結(jié)構(gòu)，使其能夠適應(yīng)新的地形。我們適配的時(shí)候需要確保代碼中的API調(diào)用與降級后的Flutter版本兼容。
2) 庫版本調(diào)整：純Flutter庫需要降級為支持Dart 2.19.6的版本，這就像是為橋梁更換合適的建材，確保其穩(wěn)定性。同時(shí)，對于包含原生平臺代碼的第三方庫，我們需要將版本改為適配鴻蒙的版本。例如shared_preferences本地存儲庫，就需要替換為鴻蒙適配版本。在引用方式上，它可以指定Git倉庫地址和文件夾，就像在定制建材時(shí)指定供應(yīng)商和產(chǎn)品型號一樣。以 permission_handler 庫為例，通過指定Git倉庫的特定分支或提交，來獲取鴻蒙適配版本。
6.png
3) 原生插件開發(fā)：對于未適配鴻蒙平臺的第三方庫，我們需要使用ArkTS語言進(jìn)行插件開發(fā)，這就像是為橋梁建造一個新的分支，使其能夠連接到鴻蒙這個新的平臺。我們需要熟悉ArkTS語言和鴻蒙系統(tǒng)的API，將第三方庫的功能在鴻蒙平臺上重新實(shí)現(xiàn)。
4) 平臺配置適配：由于多了一個鴻蒙平臺，部分枚舉值以及部分平臺配置需要進(jìn)行適配。這就像是為橋梁添加特殊的標(biāo)識和設(shè)施，以適應(yīng)不同的交通規(guī)則和環(huán)境要求。我們需要檢查代碼中的平臺特定邏輯，確保在鴻蒙平臺上也能正常工作。
4． 海底撈與華為團(tuán)隊(duì)共同攻略三大難關(guān)
1）解決系統(tǒng)兼容性問題
在開發(fā)過程中，海底撈開發(fā)團(tuán)隊(duì)遇到了如定位權(quán)限控制問題等系統(tǒng)層面的bug。針對這類問題，海底撈開發(fā)團(tuán)隊(duì)與華為技術(shù)團(tuán)隊(duì)始終保持密切溝通，通過提交技術(shù)工單的方式推動問題解決。華為的項(xiàng)目技術(shù)支持迅速協(xié)助海底撈開發(fā)團(tuán)隊(duì)定位到問題根源，并高效完成了修復(fù)工作，確保問題的快速閉環(huán)。
2）自研鴻蒙端Flutter插件
在開發(fā)時(shí)期，部分Flutter插件無法直接在鴻蒙端使用，海底撈開發(fā)團(tuán)隊(duì)決定自主開發(fā)優(yōu)化用于適配海底撈App鴻蒙端的Flutter插件。在此過程中，華為技術(shù)團(tuán)隊(duì)提供了詳細(xì)的技術(shù)方案和開發(fā)指導(dǎo)，幫助海底撈團(tuán)隊(duì)克服了技術(shù)難題，顯著降低了插件開發(fā)的難度。通過雙方的緊密合作，海底撈開發(fā)團(tuán)隊(duì)成功實(shí)現(xiàn)了關(guān)鍵插件的自主可控，為應(yīng)用在鴻蒙系統(tǒng)上的穩(wěn)定運(yùn)行奠定了堅(jiān)實(shí)基礎(chǔ)。
3）確保三端完全一致
在多端適配的攻堅(jiān)過程中，海底撈開發(fā)團(tuán)隊(duì)與華為團(tuán)隊(duì)緊密協(xié)作，致力于實(shí)現(xiàn) iOS、Android、HarmonyOS三端體驗(yàn)的統(tǒng)一。面對跨平臺適配的重重挑戰(zhàn)，雙方團(tuán)隊(duì)展開了全方位的技術(shù)攻關(guān)：
針對字體渲染的差異化難題，海底撈開發(fā)團(tuán)隊(duì)深入底層參數(shù)進(jìn)行校準(zhǔn)。由于 iOS的San Francisco與鴻蒙的HarmonyOS Sans字體在間距和粗細(xì)表現(xiàn)上存在顯著差異，海底撈開發(fā)團(tuán)隊(duì)通過精細(xì)化調(diào)整，實(shí)現(xiàn)了三端字體視覺效果的高度一致。
在布局適配方面，海底撈開發(fā)團(tuán)隊(duì)對從折疊屏到劉海屏等各類異形屏幕進(jìn)行了細(xì)致分析，重構(gòu)了響應(yīng)式布局算法。通過優(yōu)化Flex布局參數(shù)，確保了按鈕點(diǎn)擊熱區(qū)和圖文排版在不同尺寸設(shè)備上的精準(zhǔn)呈現(xiàn)。
動畫性能優(yōu)化過程中，海底撈開發(fā)團(tuán)隊(duì)重點(diǎn)解決了ArkUI與Flutter引擎的幀率同步問題，并針對Android平臺的GPU渲染特性進(jìn)行了專項(xiàng)優(yōu)化，優(yōu)化了動畫卡頓現(xiàn)象。
色彩管理上，雙方共同建立了跨平臺色值映射標(biāo)準(zhǔn)，通過適配各系統(tǒng)的深色模式算法，確保品牌主色調(diào)在任何環(huán)境下都能保持一致的視覺表現(xiàn)。
手勢交互層面，海底撈開發(fā)團(tuán)隊(duì)統(tǒng)一了三端的返回手勢邏輯，并對長按、拖拽等操作的反饋效果進(jìn)行了標(biāo)準(zhǔn)化處理，提升了用戶操作體驗(yàn)的連貫性。
在華為技術(shù)團(tuán)隊(duì)的深度支持下，海底撈開發(fā)團(tuán)隊(duì)對多端界面進(jìn)行了精細(xì)優(yōu)化，最終實(shí)現(xiàn)了高度一致的界面呈現(xiàn)與流暢的交互體驗(yàn)。這一成果不僅加速了“一次開發(fā)，多端部署”的落地，也為用戶帶來了跨設(shè)備間無縫銜接的服務(wù)體驗(yàn)。
海底撈APP與鴻蒙創(chuàng)新特性結(jié)合：三大創(chuàng)新功能的技術(shù)拆解
1． 華為賬號一鍵登錄：海底撈會員快速登入
很多應(yīng)用的部分新用戶因繁瑣的注冊流程放棄注冊應(yīng)用內(nèi)新賬號，而老用戶也常因手機(jī)號無法驗(yàn)證、用戶名和密碼遺忘等要進(jìn)行繁瑣的賬戶找回流程。傳統(tǒng)登入方式中，層層跳轉(zhuǎn)的驗(yàn)證頁面、密碼設(shè)定、實(shí)名認(rèn)證操作等，大大影響了用戶的耐心和體驗(yàn)。
華為賬號一鍵登錄功能通過鴻蒙系統(tǒng)底層直連華為賬號體系，因此應(yīng)用可以通過華為賬號一鍵登錄能力方便地獲取華為賬號用戶的身份標(biāo)識和手機(jī)號，得益于系統(tǒng)賬號的安全性和便利性，用戶無需輸入賬號名和密碼，無需復(fù)雜的安全驗(yàn)證，實(shí)現(xiàn)快速登錄。
鴻蒙版海底撈App接入華為賬號一鍵登錄，主要步驟如下：
準(zhǔn)備工作：登錄華為開發(fā)者聯(lián)盟官網(wǎng)，注冊成為開發(fā)者并創(chuàng)建應(yīng)用，獲取應(yīng)用的Client ID等相關(guān)信息，同時(shí)申請華為賬號一鍵登錄的相關(guān)權(quán)限。
開發(fā)接入：在鴻蒙版海底撈App的開發(fā)項(xiàng)目中，導(dǎo)入華為賬號服務(wù)的SDK依賴，確保項(xiàng)目能夠使用華為賬號一鍵登錄的相關(guān)功能；在應(yīng)用的代碼中，配置華為賬號一鍵登錄的參數(shù)，如應(yīng)用的 Client ID、授權(quán)范圍等；在海底撈 App 的登錄界面，添加華為賬號一鍵登錄的按鈕或入口，讓用戶能夠方便地點(diǎn)擊使用；通過調(diào)用華為賬號服務(wù)的 API，實(shí)現(xiàn)一鍵登錄的邏輯。當(dāng)用戶點(diǎn)擊華為賬號一鍵登錄按鈕時(shí)，應(yīng)用會向華為賬號體系發(fā)送請求，在確保用戶信息的安全和隱私后，獲取用戶的身份標(biāo)識和手機(jī)號等信息，僅用于登錄海底撈App。
測試與上線：在開發(fā)完成后，進(jìn)行充分的測試，確保華為賬號一鍵登錄功能在不同場景下都能正常工作，包括在手機(jī)、平板等不同設(shè)備上，以及網(wǎng)絡(luò)環(huán)境變化等情況下的穩(wěn)定性和兼容性。測試通過后，將應(yīng)用提交到華為應(yīng)用市場等平臺進(jìn)行上線發(fā)布。
通過以上步驟，海底撈 App 就可以成功接入華為賬號一鍵登錄功能，為用戶提供快速、便捷、安全的登錄體驗(yàn)。
2．訂座日歷提醒：從“用戶忘訂”到“系統(tǒng)主動提醒”的服務(wù)升級
除了海底撈門店的入座和等位服務(wù)，鴻蒙版本海底撈APP結(jié)合鴻蒙系統(tǒng)開發(fā)上線的訂座日歷同步功能同樣給與了用戶貼心的“管家式”服務(wù)。該功能通過與鴻蒙系統(tǒng)聯(lián)動，自動將訂座信息生成標(biāo)準(zhǔn)化日歷事件，無縫嵌入用戶手機(jī)日歷。用戶無需額外掃碼或打開APP查看，即可直觀獲取時(shí)間、地點(diǎn)等關(guān)鍵信息，并能靈活設(shè)置多時(shí)段提醒、主動彈窗提醒快到已訂用餐時(shí)間。
該項(xiàng)結(jié)合打破了傳統(tǒng)餐飲服務(wù)的單一提醒線上訂座模式，通過與鴻蒙系統(tǒng)的深度融合，為企業(yè)構(gòu)建起全流程、智能化的用戶服務(wù)體驗(yàn)。
3． 實(shí)況窗排號：智能交互的餐飲場景范式
在餐飲消費(fèi)場景中，等位排號一直是影響用戶體驗(yàn)的關(guān)鍵環(huán)節(jié)，很多用戶在取號后并不會在餐廳門口等待，為避免過號用戶需要頻繁掃碼進(jìn)小程序查看進(jìn)展，海底撈鴻蒙版推出排號實(shí)況窗功能，該功能通過系統(tǒng)級窗口與鴻蒙系統(tǒng)實(shí)況窗結(jié)合，將餐廳排號進(jìn)度實(shí)時(shí)整合至手機(jī)桌面及鎖屏界面。用戶無需重復(fù)打開 APP，只需滑動屏幕或點(diǎn)亮鎖屏，即可直觀查看當(dāng)前排號、預(yù)估等待時(shí)間及叫號動態(tài)。這種“免喚醒式”交互設(shè)計(jì)，不僅減少用戶操作步驟和重復(fù)操作，還使等位體驗(yàn)從“被動等待”升級為 “主動掌控”，顯著提升了用戶滿意度與服務(wù)感知價(jià)值。
二、 與鴻蒙生態(tài)攜手前行
1. 餐飲業(yè)與鴻蒙生態(tài)共生：餐飲、服務(wù)與技術(shù)的共同進(jìn)步
在鴻蒙生態(tài)的技術(shù)底座上，餐飲業(yè)正實(shí)現(xiàn)“服務(wù)場景”與“系統(tǒng)能力”的深度耦合。以鴻蒙版海底撈App為例，其核心功能依托于鴻蒙分布式架構(gòu)與系統(tǒng)級接口開發(fā)。華為賬號一鍵登錄功能依托HarmonyOS Account Kit實(shí)現(xiàn)無感認(rèn)證，降低了用戶的流失率；訂座日歷功能通過調(diào)用系統(tǒng)日歷API自動同步日程，提升了用戶的履約率；排號實(shí)況窗功能基于鴻蒙WindowManager服務(wù)，在鎖屏界面實(shí)時(shí)渲染排隊(duì)動態(tài)，減少等位階段APP的打開頻次。
這種共生模式不僅提升了用戶體驗(yàn)，更優(yōu)化了餐飲行業(yè)的運(yùn)營邏輯。當(dāng)餐飲服務(wù)成為鴻蒙系統(tǒng)能力的自然延伸，品牌得以在生態(tài)中建立用戶基礎(chǔ)，實(shí)現(xiàn)服務(wù)從“單一應(yīng)用”到“多場景化”的躍遷。
2. 下一代交互體驗(yàn)：重構(gòu)“人-餐-場”的鴻蒙智能模式
在搭載鴻蒙創(chuàng)新特性的鴻蒙版海底撈App下一代交互體驗(yàn)中，依托鴻蒙強(qiáng)大的分布式架構(gòu)與全場景協(xié)同能力，這次升級帶來三大新體驗(yàn)。
包括海底撈智能體、實(shí)況窗 2.0、相機(jī)即服務(wù)等新服務(wù)，只需一句“小藝，幫我打開海底撈智能體”，隨身餐飲管家即刻上線！查門店、看時(shí)段、快速排位，還能根據(jù)你的口味偏好推薦招牌菜品組合。排號時(shí)，點(diǎn)擊“立即取號”喚醒實(shí)況窗2.0，彈窗實(shí)時(shí)追蹤排隊(duì)進(jìn)度，預(yù)點(diǎn)餐一鍵同步，到店就能開吃！到店后更方便，不用打開App，直接用系統(tǒng)相機(jī)掃碼，桌位信息自動綁定，預(yù)點(diǎn)菜品秒傳后廚。從找店、排隊(duì)到點(diǎn)餐，鴻蒙版海底撈App用“語音交互+實(shí)況窗速覽+相機(jī)直連”三大創(chuàng)新，就能讓用戶享受絲滑流暢的智能用餐新體驗(yàn)！
如今，鴻蒙生態(tài)正以蓬勃發(fā)展的態(tài)勢吸引著越來越多的開發(fā)者和企業(yè)加入。這是一個充滿機(jī)遇和挑戰(zhàn)的時(shí)代，也是一個能夠讓創(chuàng)新夢想成真的時(shí)代。我們誠摯地邀請廣大開發(fā)者積極加入鴻蒙認(rèn)證，發(fā)揮你的技術(shù)專長和創(chuàng)意靈感，共同為鴻蒙生態(tài)的繁榮添磚加瓦；同時(shí)，也熱烈歡迎各企業(yè)積極投身鴻蒙生態(tài)，在這個充滿無限可能的平臺上，共同探索新的發(fā)展模式，共創(chuàng)智能時(shí)代的美好未來。讓我們攜手共進(jìn)，在鴻蒙的世界里，開啟智能交互的新篇章，為用戶帶來更加卓越的體驗(yàn)，為行業(yè)發(fā)展注入新的活力！
點(diǎn)擊鏈接即刻開啟鴻蒙應(yīng)用開發(fā)學(xué)習(xí)之旅，與全球百萬開發(fā)者同行，共建萬物互聯(lián)新生態(tài)！
鴻蒙認(rèn)證通道及更多鴻蒙開發(fā)經(jīng)驗(yàn)【一起了解鴻蒙開發(fā)吧！】
