在鴻蒙生態快速發展的背景下,作為餐飲行業數字化先鋒的海底撈,其鴻蒙版應用集成在線排隊、點餐等核心功能,覆蓋全國超千家門店。自2024年4月海底撈與華為達成合作意愿, 6月底全面啟動開發工作,9月實現首版本上架華為應用市場,今年1月推出全量功能商用版本。基于HarmonyOS 5.0,結合Flutter混編開發的技術探索,以下內容將從功能實現細節、技術適配經驗及生態共建啟示三方面展開,為開發者提供可復用的鴻蒙開發思路。
一、海底撈Flutter適配攻略:從0到1的實戰分享
Flutter作為跨平臺開發框架,從應用核心功能的流暢呈現,到在不同設備上的穩定運行,每一個環節都需要開發者深入鉆研、反復調試。接下來,讓我們通過海底撈的鴻蒙開發經驗,一起學習從0到1實現Flutter適配的實戰秘籍,解鎖那些藏在代碼背后的適配智慧。
1.三方庫適配知識:Flutter三方庫類型
在移動跨平臺開發領域,Flutter的三方庫生態如同一個多元化的工具集市,為開發者提供了豐富的選擇。根據實現方式和依賴關系,這些庫主要分為三種類型:
首先是純Dart庫,這類庫就像是由積木搭建的工具,它們只用Dart語言編寫,不依賴任何特定平臺的原生能力。對于鴻蒙端Flutter開發者來說,這類庫就像是即插即用的萬能工具,可以直接使用,無需進行任何適配。而鴻蒙版海底撈App則采用了這種庫。
接下來是Plugin插件,這類庫類似于需要接入特定電源的精密儀器,它們在實現功能時調用了原生平臺的能力,比如訪問設備硬件、系統服務等。以WebView插件為例,它需要與操作系統的WebView組件進行交互,因此無法直接在鴻蒙端Flutter上使用,必須替換為專門針對鴻蒙系統優化的版本,就像給儀器更換適配的電源插頭一樣。
最后是FFI插件,FFI(Foreign Function Interface)插件提供了在Dart代碼中調用C/C++原生代碼的能力,這類庫就像是一個翻譯器,允許Flutter應用與用C/C++編寫的高性能庫或系統API進行對話,適用于需要高性能計算或訪問特定C/C++庫的場景。
2.多渠道引入技巧:整理主流引入方式
了解完Flutter三方庫的類型后,接下來看看如何將這些庫引入到項目中。Flutter框架通過pubspec.yaml配置文件管理三方依賴,就像一個智能的倉庫管理員,幫助開發者高效地引入和管理各種庫。為讓大家快速認識其引入方式,梳理了以下三種主要引入方式:

1)中心倉引入:作為最常見的引入方式,就像從大型超市購買標準化商品一樣方便。開發者可以從 Pub.dev(Flutter 官方包管理平臺)直接獲取并引入所需的庫,只需在pubspec.yaml中指定庫的名稱和版本號即可。這種方式適用于大多數穩定的公開庫,能夠確保獲取到最新且經過測試的版本。

2)Git引入:當需要使用尚未發布到Pub.dev的庫,或者想要使用特定分支或提交的代碼時,就可以使用Git引入方式。這種方式就像是從代碼倉庫直接定制購買商品,可以精確控制所使用的代碼版本。開發者需要在pubspec.yaml中指定Git倉庫的URL和分支或提交哈希值。

3)本地引入:在開發過程中,有時需要使用自己本地開發的庫,或者對某個庫進行定制修改。這時就可以使用本地引入方式,將庫文件直接放在項目的本地目錄中,并在pubspec.yaml中指定本地路徑。這種方式類似于使用自己工廠生產的零件,方便進行調試和定制。

當前三方庫主要由華為和開源社區各自獨立適配,形成了獨立分支并歸檔在Git代碼倉庫中,因此鴻蒙Flutter項目引用三方庫時主要采用Git引入方式,這也是海底撈App適配鴻蒙版本時所采取的方式。 3.存量Flutter項目的鴻蒙適配攻堅
接下來是海底撈開發團隊Harmony OS Flutter的適配工作經驗分享。在現階段這項工作主要集中在鴻蒙端插件的適配,就像為一座跨平臺的橋梁加固特定的橋墩一樣。具體的適配步驟如下:
1)Dart代碼適配:將現有的Flutter版本為 3.19.5,在進行鴻蒙適配時,鴻蒙版海底撈App適配需要降級Flutter版本以進行API適配。這就像是調整橋梁的某些結構,使其能夠適應新的地形。我們適配的時候需要確保代碼中的API調用與降級后的Flutter版本兼容。
2)庫版本調整:純Flutter庫需要降級為支持Dart 2.19.6的版本,這就像是為橋梁更換合適的建材,確保其穩定性。同時,對于包含原生平臺代碼的第三方庫,我們需要將版本改為適配鴻蒙的版本。例如shared_preferences本地存儲庫,就需要替換為鴻蒙適配版本。在引用方式上,它可以指定Git倉庫地址和文件夾,就像在定制建材時指定供應商和產品型號一樣。以 permission_handler 庫為例,通過指定Git倉庫的特定分支或提交,來獲取鴻蒙適配版本。

3)原生插件開發:對于未適配鴻蒙平臺的第三方庫,我們需要使用ArkTS語言進行插件開發,這就像是為橋梁建造一個新的分支,使其能夠連接到鴻蒙這個新的平臺。我們需要熟悉ArkTS語言和鴻蒙系統的API,將第三方庫的功能在鴻蒙平臺上重新實現。
4)平臺配置適配:由于多了一個鴻蒙平臺,部分枚舉值以及部分平臺配置需要進行適配。這就像是為橋梁添加特殊的標識和設施,以適應不同的交通規則和環境要求。我們需要檢查代碼中的平臺特定邏輯,確保在鴻蒙平臺上也能正常工作。
4.海底撈與華為團隊共同攻略三大難關
1)解決系統兼容性問題
在開發過程中,海底撈開發團隊遇到了如定位權限控制問題等系統層面的bug。針對這類問題,海底撈開發團隊與華為技術團隊始終保持密切溝通,通過提交技術工單的方式推動問題解決。華為的項目技術支持迅速協助海底撈開發團隊定位到問題根源,并高效完成了修復工作,確保問題的快速閉環。
2)自研鴻蒙端Flutter插件
在開發時期,部分Flutter插件無法直接在鴻蒙端使用,海底撈開發團隊決定自主開發優化用于適配海底撈App鴻蒙端的Flutter插件。在此過程中,華為技術團隊提供了詳細的技術方案和開發指導,幫助海底撈團隊克服了技術難題,顯著降低了插件開發的難度。通過雙方的緊密合作,海底撈開發團隊成功實現了關鍵插件的自主可控,為應用在鴻蒙系統上的穩定運行奠定了堅實基礎。
3)確保三端完全一致
在多端適配的攻堅過程中,海底撈開發團隊與華為團隊緊密協作,致力于實現 iOS、Android、HarmonyOS三端體驗的統一。面對跨平臺適配的重重挑戰,雙方團隊展開了全方位的技術攻關:
針對字體渲染的差異化難題,海底撈開發團隊深入底層參數進行校準。由于 iOS的San Francisco與鴻蒙的HarmonyOS Sans字體在間距和粗細表現上存在顯著差異,海底撈開發團隊通過精細化調整,實現了三端字體視覺效果的高度一致。
在布局適配方面,海底撈開發團隊對從折疊屏到劉海屏等各類異形屏幕進行了細致分析,重構了響應式布局算法。通過優化Flex布局參數,確保了按鈕點擊熱區和圖文排版在不同尺寸設備上的精準呈現。
動畫性能優化過程中,海底撈開發團隊重點解決了ArkUI與Flutter引擎的幀率同步問題,并針對Android平臺的GPU渲染特性進行了專項優化,優化了動畫卡頓現象。
色彩管理上,雙方共同建立了跨平臺色值映射標準,通過適配各系統的深色模式算法,確保品牌主色調在任何環境下都能保持一致的視覺表現。
手勢交互層面,海底撈開發團隊統一了三端的返回手勢邏輯,并對長按、拖拽等操作的反饋效果進行了標準化處理,提升了用戶操作體驗的連貫性。
在華為技術團隊的深度支持下,海底撈開發團隊對多端界面進行了精細優化,最終實現了高度一致的界面呈現與流暢的交互體驗。這一成果不僅加速了“一次開發,多端部署”的落地,也為用戶帶來了跨設備間無縫銜接的服務體驗。
海底撈APP與鴻蒙創新特性結合:三大創新功能的技術拆解
1.華為賬號一鍵登錄:海底撈會員快速登入
很多應用的部分新用戶因繁瑣的注冊流程放棄注冊應用內新賬號,而老用戶也常因手機號無法驗證、用戶名和密碼遺忘等要進行繁瑣的賬戶找回流程。傳統登入方式中,層層跳轉的驗證頁面、密碼設定、實名認證操作等,大大影響了用戶的耐心和體驗。
華為賬號一鍵登錄功能通過鴻蒙系統底層直連華為賬號體系,因此應用可以通過華為賬號一鍵登錄能力方便地獲取華為賬號用戶的身份標識和手機號,得益于系統賬號的安全性和便利性,用戶無需輸入賬號名和密碼,無需復雜的安全驗證,實現快速登錄。
鴻蒙版海底撈App接入華為賬號一鍵登錄,主要步驟如下:
準備工作:登錄華為開發者聯盟官網,注冊成為開發者并創建應用,獲取應用的Client ID等相關信息,同時申請華為賬號一鍵登錄的相關權限。
開發接入:在鴻蒙版海底撈App的開發項目中,導入華為賬號服務的SDK依賴,確保項目能夠使用華為賬號一鍵登錄的相關功能;在應用的代碼中,配置華為賬號一鍵登錄的參數,如應用的 Client ID、授權范圍等;在海底撈 App 的登錄界面,添加華為賬號一鍵登錄的按鈕或入口,讓用戶能夠方便地點擊使用;通過調用華為賬號服務的 API,實現一鍵登錄的邏輯。當用戶點擊華為賬號一鍵登錄按鈕時,應用會向華為賬號體系發送請求,在確保用戶信息的安全和隱私后,獲取用戶的身份標識和手機號等信息,僅用于登錄海底撈App。
測試與上線:在開發完成后,進行充分的測試,確保華為賬號一鍵登錄功能在不同場景下都能正常工作,包括在手機、平板等不同設備上,以及網絡環境變化等情況下的穩定性和兼容性。測試通過后,將應用提交到華為應用市場等平臺進行上線發布。
通過以上步驟,海底撈 App 就可以成功接入華為賬號一鍵登錄功能,為用戶提供快速、便捷、安全的登錄體驗。
2.訂座日歷提醒:從“用戶忘訂”到“系統主動提醒”的服務升級
除了海底撈門店的入座和等位服務,鴻蒙版本海底撈APP結合鴻蒙系統開發上線的訂座日歷同步功能同樣給與了用戶貼心的“管家式”服務。該功能通過與鴻蒙系統聯動,自動將訂座信息生成標準化日歷事件,無縫嵌入用戶手機日歷。用戶無需額外掃碼或打開APP查看,即可直觀獲取時間、地點等關鍵信息,并能靈活設置多時段提醒、主動彈窗提醒快到已訂用餐時間。
該項結合打破了傳統餐飲服務的單一提醒線上訂座模式,通過與鴻蒙系統的深度融合,為企業構建起全流程、智能化的用戶服務體驗。
3.實況窗排號:智能交互的餐飲場景范式
在餐飲消費場景中,等位排號一直是影響用戶體驗的關鍵環節,很多用戶在取號后并不會在餐廳門口等待,為避免過號用戶需要頻繁掃碼進小程序查看進展,海底撈鴻蒙版推出排號實況窗功能,該功能通過系統級窗口與鴻蒙系統實況窗結合,將餐廳排號進度實時整合至手機桌面及鎖屏界面。用戶無需重復打開 APP,只需滑動屏幕或點亮鎖屏,即可直觀查看當前排號、預估等待時間及叫號動態。這種“免喚醒式”交互設計,不僅減少用戶操作步驟和重復操作,還使等位體驗從“被動等待”升級為 “主動掌控”,顯著提升了用戶滿意度與服務感知價值。
二、與鴻蒙生態攜手前行
1.餐飲業與鴻蒙生態共生:餐飲、服務與技術的共同進步
在鴻蒙生態的技術底座上,餐飲業正實現“服務場景”與“系統能力”的深度耦合。以鴻蒙版海底撈App為例,其核心功能依托于鴻蒙分布式架構與系統級接口開發。華為賬號一鍵登錄功能依托HarmonyOS Account Kit實現無感認證,降低了用戶的流失率;訂座日歷功能通過調用系統日歷API自動同步日程,提升了用戶的履約率;排號實況窗功能基于鴻蒙WindowManager服務,在鎖屏界面實時渲染排隊動態,減少等位階段APP的打開頻次。
這種共生模式不僅提升了用戶體驗,更優化了餐飲行業的運營邏輯。當餐飲服務成為鴻蒙系統能力的自然延伸,品牌得以在生態中建立用戶基礎,實現服務從“單一應用”到“多場景化”的躍遷。
2.下一代交互體驗:重構“人-餐-場”的鴻蒙智能模式
在搭載鴻蒙創新特性的鴻蒙版海底撈App下一代交互體驗中,依托鴻蒙強大的分布式架構與全場景協同能力,這次升級帶來三大新體驗。
包括海底撈智能體、實況窗 2.0、相機即服務等新服務,只需一句“小藝,幫我打開海底撈智能體”,隨身餐飲管家即刻上線!查門店、看時段、快速排位,還能根據你的口味偏好推薦招牌菜品組合。排號時,點擊“立即取號”喚醒實況窗2.0,彈窗實時追蹤排隊進度,預點餐一鍵同步,到店就能開吃!到店后更方便,不用打開App,直接用系統相機掃碼,桌位信息自動綁定,預點菜品秒傳后廚。從找店、排隊到點餐,鴻蒙版海底撈App用“語音交互+實況窗速覽+相機直連”三大創新,就能讓用戶享受絲滑流暢的智能用餐新體驗!
如今,鴻蒙生態正以蓬勃發展的態勢吸引著越來越多的開發者和企業加入。這是一個充滿機遇和挑戰的時代,也是一個能夠讓創新夢想成真的時代。我們誠摯地邀請廣大開發者積極加入鴻蒙認證,發揮你的技術專長和創意靈感,共同為鴻蒙生態的繁榮添磚加瓦;同時,也熱烈歡迎各企業積極投身鴻蒙生態,在這個充滿無限可能的平臺上,共同探索新的發展模式,共創智能時代的美好未來。讓我們攜手共進,在鴻蒙的世界里,開啟智能交互的新篇章,為用戶帶來更加卓越的體驗,為行業發展注入新的活力!
點擊鏈接即刻開啟鴻蒙應用開發學習之旅,與全球百萬開發者同行,共建萬物互聯新生態!
鴻蒙認證通道及更多鴻蒙開發經驗【一起了解鴻蒙開發吧!】
審核編輯 黃宇
-
華為
+關注
關注
218文章
36003瀏覽量
262072 -
鴻蒙
+關注
關注
60文章
2963瀏覽量
45882 -
flutter
+關注
關注
0文章
15瀏覽量
735
發布評論請先 登錄
技術創新 | 開鴻智谷率先實現開源鴻蒙與OpenClaw創新融合
開源鴻蒙開發者的跨界成長之路
Flutter 移動端開發:集成淘寶 API 實現商品數據實時展示 APP
融合AI的OpenHarmony應用軟件開發:ai學習自律輔助軟件
開源鴻蒙RISC-V SIG線下技術融合交流會圓滿收官
中軟國際鴻蒙生態“應用+智慧場景”的創新實踐
Android Studio中的Gemini全面支持Dart和Flutter開發
鴻蒙5開發寶藏案例分享---PC開發案例解析
使用DevEcoStudio 開發、編譯鴻蒙 NEXT_APP 以及使用中文插件
使用 Flutter SDK 3.27.4構建HarmonyOS應用
鴻蒙5開發寶藏案例分享---一多開發實例(地圖導航)
DevEco Studio AI輔助開發工具兩大升級功能 鴻蒙應用開發效率再提升
全鏈路賦能游戲鴻蒙化適配,鴻蒙游戲開發者服務煥新升級
餐飲服務與軟件創新的融合:解析海底撈APP的Flutter鴻蒙開發之路
評論