混合開發

隨著移動互聯網的高速發展，常規的開發速度已經漸漸不能滿足市場需求。原生H5混合開發應運而生，目前，市場上許多主流應用都有用到混合開發，例如支付寶、美團等。下面，結合我本人的開發經驗，簡單談一下對混合開發的認識以及實現方式。

HybridApp（混合開發）主要以JS+Native兩者相互調用為主，從開發層面實現“一次開發，多處運行”的機制，成為真正適合跨平臺的開發。HybridApp兼具了NativeApp良好用戶體驗的優勢，也兼具了WebApp使用HTML5跨平臺開發低成本的優勢。

混合開發的優點

優點顯而易見，由前端工程師寫一個頁面，多個平臺都可以運行，省了Android和iOS工程師不少事，無形中提高了開發效率，節約了開發成本。

前端工程師寫一個頁面，可以同時在Android、IOS、Windows上運行，省了Android和iOS工程師不少事，無形中提高了開發效率，節約了開發成；

用戶可以直接使用最新版本（自動更新，不需用戶手動更新）。

開發速度快，不需要了解各個平臺的native開發語言也可以開發輕量級移動應用

缺點

凡是使用過的人都知道，H5的界面顯示在手機上，對點擊、觸摸、滑動等事件的響應并不如原生控件那樣流暢，甚至還會出現卡頓。這樣也很正常，如果體驗跟原生控件一樣好的話，也就沒android（ios）工程師什么事了。

H5的界面顯示在手機上，對點擊、觸摸、滑動等事件的響應并不如原生控件那樣流暢，甚至還會出現卡頓

一些屬性在不同的手機型號上兼容性差距大，需要分別處理

前端代碼容易被盜取

App中使用H5頁面的原因

App里之所以用到H5頁面，多是因為這個頁面上的內容和結構都是屬于高頻變化的，使用Native App頁面來實現的話則需要不斷發布新版本才能實現，這一點不現實。而App都是可以調用原生系統瀏覽器或者集成到App里的瀏覽服務，因

此屬于高頻變化的內容和結構通過web頁面來表現，再通過App來調用H5頁面就可以輕松解決這個問題了。而且，經過優化專門適配移動端的H5界面已經很接近Native App的頁面了，很多時候我都壓根沒有感受出來，也因此H5頁面在

App上被廣泛應用。

屬于高頻變化的內容和結構的頁面多來自產品運營，一般包含：運營活動頁面/廣告/應用內推送消息等。

混合開發框架和層次結構圖

混合開發結構圖

1）移動終端web殼（以下簡稱“殼”）：殼是使用操作系統的API來創建嵌入式HTML的渲染引擎。殼主要功能是定義Android應用程序與網頁之間的接口，允許網頁中的JavaScript調用Android應用程序，提供基于web的應用程序的AndroidAPI，將Web嵌入到Android應用程序中。

2）前端交互js：包括基礎功能js和業務功能js。

3）前端適配器：適配不同的終端：Pad、android、ios、wap。

混合開發層次結構圖

應用場景

一、App推送消息

App的推送消息從打開方式上來說可以分為兩類，第一類是點擊推送消息直接打開指定App頁面，比如多數資訊類App(知乎、澎湃新聞等)；第二類是點擊推送消息打開一個H5頁面，再通過點擊web頁面里的內容模塊打開指定的App頁面。

第二類推送消息在電商類/生活服務類等重運營的App里應用很多。比如圖例中的大眾點評對KTV商戶的一次推送消息，這個推送消息里包含了多家的KTV商戶，用戶根據自己的喜好點擊自己喜歡的KTV商戶，進入該KTV商戶的店鋪詳情

頁面（指定App頁面）

大眾點評的一條KTV推薦的推送消息，打開后可以看到KTV商戶列表

高德地圖里的推送通知消息

二、App內運營活動/廣告Banner

這種web在App上的使用方式同上文的推送消息有異曲同工之妙，主要也是應用在重運營的App上，對電商類App的一次營銷活動，對音樂類App的一個音樂精選集/音樂人的推薦，通過首頁的推薦Banner位引導打開豐富的內容頁面都是一個

很好的方式。

蝦米音樂首頁我是歌手的Banner位

三、作為過渡的Native App頁面的替代品

這一種使用方式不太常見，但是可以作為App早期開發中過程中的一種替代手段。由于web的開發效率相對App來說會高一些，在App開發的初期為了搶占用戶和市場先機而不得不在規定的時間內發布一款功能完整的App時，可以使用這種

方式來進行操作，基礎的核心功能使用Native App頁面來實現，一些非核心功能/使用App頁面實現起來耗費工時的頁面可以使用web頁面來實現，這一點在早期的釘釘App版本里應用很多。

釘釘里的簽到功能，點擊打開后是web頁面

四、App調用第三方服務時

調用第三方服務并且涉及到復雜的數據驗證處理又必須由第三方來完成時，這種方式是一個比較不錯的解決方案，事實上，大量的第三方服務公司也是通過web來提供自己的產品和服務的。支付服務屬于這一類范疇的最常見應用領域，例

如Paypal支付服務，Braintree支付服務，支付寶支付服務等。

集成到楚楚街上的中國銀聯支付

中國銀聯支付頁面

在App里使用web頁面時需要注意哪些事項呢?

僅作為輔助功能，核心功能盡量不使用web來進行代替

web頁面的導航層級不宜超過兩級

　　 從 Native App頁面進入web頁面上時一般都是App的二級或者三級導航的深度了，進入到web頁面后會脫離掉App的導航體系，用戶心理會變得有一些疑惑或者不確定。如果web頁面的層級又比較復雜比較深，會造成用戶很難理解

　　 這個頁面下一步又是什么頁面，怎么回去上一個頁面，在這種疑惑和恐慌中很有可能的情況是用戶會關閉這個web頁面回到Native App上相對熟悉的頁面，導致web頁面的流失率很高。

注意對各種機型的適配

　　　這一點主要是考慮到開發出來的web頁面響應式布局實現上，盡量使web頁面表現的像Native App頁面，同時解決多機型適配的問題，因為在A機型上展示良好的頁面在B機型上可能完全展示不了。我在為Getone App接入Paypal支

　　　付時，開始時沒有留意，后來發現我們選擇使用的新版Paypal支付頁面在大量的機型上都無法顯示（Paypal提供的支付頁面本身存在的適配問題），后來通過及時調整回舊版支付頁面才解決這個問題。

對于長期高頻使用的Web頁面要提供管理后臺，方便運營人員編輯

　　 對于產品運營中要頻繁使用的web頁面最好開發出來管理后臺，提供幾個模板，運營人員每一次只需要編輯和添加內容即可實現需要的web頁面，可以極大提高運營的效率。

參考

怎么在App里正確使用H5頁面，你造嗎？

Hybrid APP混合開發的一些經驗和總結

總結

以上是生活随笔為你收集整理的客户端相关知识学习（一）之混合开发，为什么要在App中使用H5页面以及应用场景、注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。