混合開(kāi)發(fā)

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

混合開(kāi)發(fā)的優(yōu)點(diǎn)

優(yōu)點(diǎn)顯而易見(jiàn)，由前端工程師寫(xiě)一個(gè)頁(yè)面，多個(gè)平臺(tái)都可以運(yùn)行，省了Android和iOS工程師不少事，無(wú)形中提高了開(kāi)發(fā)效率，節(jié)約了開(kāi)發(fā)成本。

缺點(diǎn)

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

App中使用H5頁(yè)面的原因

App里之所以用到H5頁(yè)面，多是因?yàn)檫@個(gè)頁(yè)面上的內(nèi)容和結(jié)構(gòu)都是屬于高頻變化的，使用Native App頁(yè)面來(lái)實(shí)現(xiàn)的話(huà)則需要不斷發(fā)布新版本才能實(shí)現(xiàn)，這一點(diǎn)不現(xiàn)實(shí)。而App都是可以調(diào)用原生系統(tǒng)瀏覽器或者集成到App里的瀏覽服務(wù)，因

此屬于高頻變化的內(nèi)容和結(jié)構(gòu)通過(guò)web頁(yè)面來(lái)表現(xiàn)，再通過(guò)App來(lái)調(diào)用H5頁(yè)面就可以輕松解決這個(gè)問(wèn)題了。而且，經(jīng)過(guò)優(yōu)化專(zhuān)門(mén)適配移動(dòng)端的H5界面已經(jīng)很接近Native App的頁(yè)面了，很多時(shí)候我都?jí)焊鶝](méi)有感受出來(lái)，也因此H5頁(yè)面在

App上被廣泛應(yīng)用。

屬于高頻變化的內(nèi)容和結(jié)構(gòu)的頁(yè)面多來(lái)自產(chǎn)品運(yùn)營(yíng)，一般包含：運(yùn)營(yíng)活動(dòng)頁(yè)面/廣告/應(yīng)用內(nèi)推送消息等。

應(yīng)用場(chǎng)景

一、App推送消息

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

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

頁(yè)面（指定App頁(yè)面）

大眾點(diǎn)評(píng)的一條KTV推薦的推送消息，打開(kāi)后可以看到KTV商戶(hù)列表

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

二、App內(nèi)運(yùn)營(yíng)活動(dòng)/廣告Banner

這種web在App上的使用方式同上文的推送消息有異曲同工之妙，主要也是應(yīng)用在重運(yùn)營(yíng)的App上，對(duì)電商類(lèi)App的一次營(yíng)銷(xiāo)活動(dòng)，對(duì)音樂(lè)類(lèi)App的一個(gè)音樂(lè)精選集/音樂(lè)人的推薦，通過(guò)首頁(yè)的推薦Banner位引導(dǎo)打開(kāi)豐富的內(nèi)容頁(yè)面都是一個(gè)

很好的方式。

蝦米音樂(lè)首頁(yè)我是歌手的Banner位

三、作為過(guò)渡的Native App頁(yè)面的替代品

這一種使用方式不太常見(jiàn)，但是可以作為App早期開(kāi)發(fā)中過(guò)程中的一種替代手段。由于web的開(kāi)發(fā)效率相對(duì)App來(lái)說(shuō)會(huì)高一些，在App開(kāi)發(fā)的初期為了搶占用戶(hù)和市場(chǎng)先機(jī)而不得不在規(guī)定的時(shí)間內(nèi)發(fā)布一款功能完整的App時(shí)，可以使用這種

方式來(lái)進(jìn)行操作，基礎(chǔ)的核心功能使用Native App頁(yè)面來(lái)實(shí)現(xiàn)，一些非核心功能/使用App頁(yè)面實(shí)現(xiàn)起來(lái)耗費(fèi)工時(shí)的頁(yè)面可以使用web頁(yè)面來(lái)實(shí)現(xiàn)，這一點(diǎn)在早期的釘釘App版本里應(yīng)用很多。

釘釘里的簽到功能，點(diǎn)擊打開(kāi)后是web頁(yè)面

四、App調(diào)用第三方服務(wù)時(shí)

調(diào)用第三方服務(wù)并且涉及到復(fù)雜的數(shù)據(jù)驗(yàn)證處理又必須由第三方來(lái)完成時(shí)，這種方式是一個(gè)比較不錯(cuò)的解決方案，事實(shí)上，大量的第三方服務(wù)公司也是通過(guò)web來(lái)提供自己的產(chǎn)品和服務(wù)的。支付服務(wù)屬于這一類(lèi)范疇的最常見(jiàn)應(yīng)用領(lǐng)域，例

如Paypal支付服務(wù)，Braintree支付服務(wù)，支付寶支付服務(wù)等。

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

中國(guó)銀聯(lián)支付頁(yè)面

在App里使用web頁(yè)面時(shí)需要注意哪些事項(xiàng)呢?

• 僅作為輔助功能，核心功能盡量不使用web來(lái)進(jìn)行代替

• web頁(yè)面的導(dǎo)航層級(jí)不宜超過(guò)兩級(jí)

　　 ?從 Native App頁(yè)面進(jìn)入web頁(yè)面上時(shí)一般都是App的二級(jí)或者三級(jí)導(dǎo)航的深度了，進(jìn)入到web頁(yè)面后會(huì)脫離掉App的導(dǎo)航體系，用戶(hù)心理會(huì)變得有一些疑惑或者不確定。如果web頁(yè)面的層級(jí)又比較復(fù)雜比較深，會(huì)造成用戶(hù)很難理解

　　 ?這個(gè)頁(yè)面下一步又是什么頁(yè)面，怎么回去上一個(gè)頁(yè)面，在這種疑惑和恐慌中很有可能的情況是用戶(hù)會(huì)關(guān)閉這個(gè)web頁(yè)面回到Native App上相對(duì)熟悉的頁(yè)面，導(dǎo)致web頁(yè)面的流失率很高。

• 注意對(duì)各種機(jī)型的適配

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

　　　付時(shí)，開(kāi)始時(shí)沒(méi)有留意，后來(lái)發(fā)現(xiàn)我們選擇使用的新版Paypal支付頁(yè)面在大量的機(jī)型上都無(wú)法顯示（Paypal提供的支付頁(yè)面本身存在的適配問(wèn)題），后來(lái)通過(guò)及時(shí)調(diào)整回舊版支付頁(yè)面才解決這個(gè)問(wèn)題。

• 對(duì)于長(zhǎng)期高頻使用的Web頁(yè)面要提供管理后臺(tái)，方便運(yùn)營(yíng)人員編輯

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

參考

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/kunmomo/p/11556115.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。