混合開發(fā)

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

混合開發(fā)的優(yōu)點

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

缺點

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

App中使用H5頁面的原因

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

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

App上被廣泛應用。

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

應用場景

一、App推送消息

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

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

頁面（指定App頁面）

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

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

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

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

很好的方式。

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

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

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

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

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

四、App調用第三方服務時

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

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

集成到楚楚街上的中國銀聯(lián)支付

中國銀聯(lián)支付頁面

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

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

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

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

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

• 注意對各種機型的適配

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

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

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

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

參考

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

?

轉載于:https://www.cnblogs.com/kunmomo/p/11556115.html

總結

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

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