前端必須了解的H5 和小程序前景

許多做產(chǎn)品的同學(xué)經(jīng)常會(huì)有這樣的疑問(wèn):計(jì)劃開(kāi)發(fā)的移動(dòng)端產(chǎn)品到底是用 H5 好還是用小程序好拴竹?甚至很多開(kāi)發(fā)同學(xué)也搞不清楚這兩者在具體使用中的優(yōu)劣。那么相信讀完此篇剧罩,便可讓你對(duì)二者之優(yōu)劣利弊了然于胸栓拜,再也不必糾結(jié)。
大體上講,H5和小程序并不具備什么可比性幕与。只是很多移動(dòng)端的場(chǎng)景下挑势,這兩種選擇都能實(shí)現(xiàn)產(chǎn)品的大部分功能,加之其各領(lǐng)風(fēng)騷好幾年纽门,就更難抉擇了薛耻。

我們經(jīng)常說(shuō)的 H5 是一種不標(biāo)準(zhǔn)的叫法,可以理解為只是一種技術(shù)赏陵,大家說(shuō)得最多的 H5 主要是指用在移動(dòng)端的網(wǎng)頁(yè)饼齿,其實(shí) PC 電腦版也一樣可以使用 H5 技術(shù)。而小程序蝙搔,這里特指微信小程序缕溉,是在微信 APP 基礎(chǔ)上支持的一種應(yīng)用形式,完全依賴于微信 APP 環(huán)境吃型。

以上证鸥,是大概念上的區(qū)分,下面勤晚,我們就來(lái)詳細(xì)對(duì)比一下其他方面枉层。

一、運(yùn)行環(huán)境

這里的 H5 既然是網(wǎng)頁(yè)赐写,那么依賴的外殼主要是瀏覽器鸟蜡,因此只要有瀏覽器,就可以使用挺邀。比如手機(jī)內(nèi)置的瀏覽器揉忘,APP 的 web-view 組件,以及小程序提供的 web-view 組件端铛,都可以打開(kāi) H5 頁(yè)面泣矛。

注意,小程序的 web-view 可以打開(kāi) H5禾蚕,但并不是小程序“跳轉(zhuǎn)”到了 H5 頁(yè)面您朽,這個(gè) H5 還是小程序的外殼內(nèi),仍然有很多限制换淆。

前面說(shuō)了虚倒,小程序只能依賴微信客戶端,也就是說(shuō)只能在微信里打開(kāi)产舞。那么,如果你的產(chǎn)品需要通過(guò)短信通知用戶帶上訪問(wèn)地址菠剩,就無(wú)法用小程序?qū)崿F(xiàn)了易猫。而 H5 頁(yè)面,則可以在短信正文中直接用手機(jī)內(nèi)置瀏覽器打開(kāi)具壮。

但是准颓,微信本身是跨平臺(tái)的哈蝇,因此無(wú)論是安卓上的微信,蘋果上的微信攘已,都是可以使用小程序的炮赦。甚至 QQ 瀏覽器也支持了部分小程序的入駐。

二样勃、系統(tǒng)權(quán)限

這里的系統(tǒng)權(quán)限吠勘,可以理解為隱私級(jí)別比較高的,如通訊錄峡眶,或能調(diào)用硬件的剧防,比如藍(lán)牙功能等。從這個(gè)角度看辫樱,H5 本身可以說(shuō)幾乎是沒(méi)有什么系統(tǒng)權(quán)限的峭拘。雖然也有攝像頭之類的接口,但是重度依賴瀏覽器能力狮暑,兼容性有限鸡挠。

而小程序,由于依賴微信客戶端本身搬男,所以微信小程序團(tuán)隊(duì)將客戶端的很多能力開(kāi)放給了小程序環(huán)境拣展,當(dāng)然,前提是你給微信也授權(quán)了相關(guān)的能力止后,比如允許訪問(wèn)麥克風(fēng)瞎惫,允許訪問(wèn)相冊(cè)等。

所以译株,如果你的產(chǎn)品重度依賴這些能力瓜喇,那小程序一定是不二之選,因?yàn)?H5 很難做到這些歉糜,對(duì)于很多小程序提供的能力键思,H5 是根本沒(méi)有可能實(shí)現(xiàn)的。

三未斑、能力限制

前面提到了系統(tǒng)權(quán)限層面的差異西疤,其實(shí)也是一種能力限制。除此之外夯缺,還有一些能力是微信本身的策略限制的蚤氏,比如 H5 在微信里可以直接分享朋友圈,而小程序目前就只能轉(zhuǎn)發(fā)好友或群踊兜。對(duì)于朋友圈竿滨,就只能生成帶小程序碼的圖片發(fā)到朋友圈。

而對(duì)于分享到好友或群,小程序又提供了卡片式的分享界面于游,看起來(lái)很高端毁葱,信息也多,并且能追蹤用戶行為贰剥。這一點(diǎn)倾剿,H5 又無(wú)法做到。

再比如支付能力蚌成,小程序只支持微信支付前痘,而 H5 里可以選擇使用其他支付平臺(tái)提供的支付方式。

四笑陈、用戶體驗(yàn)

分享卡片看上去比普通的 H5 鏈接分享體驗(yàn)要好际度;而朋友圈的 H5 分享形式,和圖片識(shí)別小程序碼的形式到底哪個(gè)好也不好說(shuō)涵妥。不過(guò)乖菱,如果你的產(chǎn)品被判定有違規(guī)行為,那么 H5 的鏈接是很容易匹配屏蔽的蓬网,可以直接導(dǎo)致分享 H5 頁(yè)面只能自己可見(jiàn)窒所,別人看不到。

但是帆锋,小程序的分享圖雖然不太可能封禁吵取,但小程序是微信的呀,那還不是分分鐘就關(guān)掉锯厢。所以在抗風(fēng)險(xiǎn)方面皮官,二者各有千秋。如果是 H5实辑,那就多準(zhǔn)備幾個(gè)域名捺氢;如果是小程序,就直接多上線幾個(gè)小程序剪撬,保證封禁時(shí)損失降到最低摄乒。

除了形式上的體驗(yàn)差異,性能上也是有差異的残黑。小程序基于微信客戶端實(shí)現(xiàn)馍佑,對(duì)解析進(jìn)行了優(yōu)化,并且一旦首次打開(kāi)小程序梨水,可以直接緩存很多資源拭荤。因此,在使用小程序時(shí)可以明顯感覺(jué)很流暢疫诽,接近原生 APP 的體驗(yàn)舅世。

而 H5 本質(zhì)上還是網(wǎng)頁(yè)笼恰,跟之前在 PC 上瀏覽網(wǎng)頁(yè)沒(méi)區(qū)別,每次要請(qǐng)求各種圖片樣式資源歇终,在瀏覽器內(nèi)核里渲染,因此體驗(yàn)會(huì)差一些逼龟。

五评凝、訪問(wèn)入口

在訪問(wèn)入口這個(gè)點(diǎn)上,H5 的核心競(jìng)爭(zhēng)力就是能在微信之外玩腺律,不依賴微信本身奕短。而小程序的優(yōu)勢(shì),就是有 50+ 微信提供的場(chǎng)景入口匀钧,并且聊天界面頂部的“最近使用”和“我的小程序”這個(gè)入口翎碑,相對(duì) H5 來(lái)說(shuō)是有絕對(duì)優(yōu)勢(shì)的。

用戶關(guān)閉之后之斯,H5 頁(yè)面如果想繼續(xù)訪問(wèn)日杈,可能會(huì)通過(guò)收藏入口,或者轉(zhuǎn)發(fā)給“文件傳輸助手”等聊天界面保存佑刷,還可以縮小到圖標(biāo)稍后閱讀等等莉擒。本質(zhì)上還是跟 PC 時(shí)代的瀏覽器收藏夾差不多,需要有個(gè)地方把 H5 的鏈接地址保存下來(lái)瘫絮,方便下次訪問(wèn)涨冀。如果沒(méi)有保存,下次就很難找到了麦萤。

至于微信內(nèi)的搜索鹿鳖,是可以同時(shí)搜索 H5 和小程序的,可以根據(jù) H5 的名字和內(nèi)容壮莹、小程序的名字和介紹來(lái)搜索翅帜。這里 H5 有個(gè)天然優(yōu)勢(shì)就是,只要你的鏈接在各大搜索引擎提交過(guò)垛孔,那么使用其他的搜索引擎也能搜出這個(gè) H5藕甩,比如百度搜索。

六周荐、用戶觸達(dá)

H5 本身是沒(méi)有用戶觸達(dá)能力的狭莱,如果用戶關(guān)掉了頁(yè)面,頁(yè)面就再也沒(méi)有辦法主動(dòng)觸達(dá)該用戶了概作。因此腋妙,傳統(tǒng)的營(yíng)銷方式都是采用郵件營(yíng)銷或短信營(yíng)銷等來(lái)觸達(dá)用戶。

后來(lái)讯榕,我們有了微信服務(wù)號(hào)骤素,就多了服務(wù)號(hào)模板消息的觸達(dá)方式匙睹。不管是哪種方式,都是想方設(shè)法把鏈接地址推送給用戶济竹,用戶點(diǎn)擊時(shí)再通過(guò)手機(jī)內(nèi)置瀏覽器或微信內(nèi)置瀏覽器訪問(wèn)頁(yè)面痕檬。

而小程序天然支持模板消息,雖然有一周的推送時(shí)間限制送浊,但是常規(guī)的業(yè)務(wù)已經(jīng)足夠了梦谜。只要用戶使用你的小程序,你就可以通過(guò)某種操作收集 formid袭景,然后即可在一周之內(nèi)的任意時(shí)間觸達(dá)用戶唁桩。

七、開(kāi)發(fā)成本

對(duì)于簡(jiǎn)單功能耸棒,H5 和小程序的開(kāi)發(fā)成本是差不多的荒澡,開(kāi)發(fā)模式和語(yǔ)言風(fēng)格也類似。而對(duì)于前面說(shuō)到的系統(tǒng)能力与殃,可能就只有小程序才能實(shí)現(xiàn)单山,H5 根本做不了。此外奈籽,小程序自成體系饥侵,因此也有一些現(xiàn)成的組件可以使用,如果剛好覆蓋了你的產(chǎn)品功能就能提升效率衣屏。

雖然 H5 也有很多框架組件可以用躏升,但由于過(guò)于龐雜,有選擇成本狼忱,且技術(shù)棧和 UI 五花八門膨疏,可能還有融合和修改的成本。而小程序組件的 UI 大部分已經(jīng)確定钻弄,只有很少的部分可以修改佃却,所以一旦認(rèn)定使用小程序,這部分成本會(huì)低很多窘俺。

總體上來(lái)講饲帅,我覺(jué)得還是可以認(rèn)為小程序的開(kāi)發(fā)成本更低一些。

八瘤泪、迭代周期

開(kāi)發(fā)成本低灶泵,未必迭代周期就短。對(duì)于 H5 我們可以隨時(shí)發(fā)布上線对途,不用受任何牽制赦邻。而小程序的特點(diǎn),就是每次提交版本都要經(jīng)過(guò)微信方面的審核实檀,且審核時(shí)間的長(zhǎng)短很隨機(jī)惶洲,著急上線的項(xiàng)目就很無(wú)奈了按声。

至于其他速度,取決于開(kāi)發(fā)人員技能熟練程度恬吕,系統(tǒng)復(fù)雜度签则,對(duì)基礎(chǔ)能力的依賴等,就不好估算了铐料。

九怀愧、外部限制

由于小程序依賴微信平臺(tái),因此微信平臺(tái)要對(duì)內(nèi)容安全等事項(xiàng)負(fù)責(zé)余赢,比如你想搞個(gè)有 UGC 的產(chǎn)品,用 H5 可能還可以趁著監(jiān)管寬松無(wú)證裸奔一陣哈垢,或者說(shuō)做大了再補(bǔ)證妻柒。

而小程序,就很可能完全不能過(guò)審耘分,根本上不了線举塔。比如試聽(tīng)類,社交類求泰,都有對(duì)應(yīng)的資質(zhì)央渣,而這個(gè)資質(zhì)還可能很難獲得。

類似的渴频,H5 頁(yè)面可以不用搞 HTTPS芽丹,有個(gè)網(wǎng)站就能玩,甚至用工具做個(gè)小活動(dòng)也都可以玩卜朗。但是小程序拔第,從后端開(kāi)始就有限制,要求域名備案+HTTPS场钉,一定程度上也是一點(diǎn)成本蚊俺。

此外,小程序?qū)ξ募笮∫灿邢拗乒渫颍m然現(xiàn)在已經(jīng)支持分包加載泳猬,但是在文件大小方面,H5 本身是沒(méi)有什么限制的宇植。只是實(shí)際開(kāi)發(fā)的時(shí)候得封,要照顧用戶的體驗(yàn),不能讓頁(yè)面打開(kāi)太慢当纱。

綜上所述呛每,H5 和小程序在不同的場(chǎng)景下各有千秋,具體使用哪一種要看你看重哪些能力坡氯。H5 和小程序都是實(shí)現(xiàn)產(chǎn)品的工具晨横,選擇工具最擅長(zhǎng)的能力洋腮,其他方面再想辦法來(lái)彌補(bǔ)即可。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末手形,一起剝皮案震驚了整個(gè)濱河市啥供,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌库糠,老刑警劉巖伙狐,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異瞬欧,居然都是意外死亡贷屎,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門艘虎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)唉侄,“玉大人,你說(shuō)我怎么就攤上這事野建∈艋” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵候生,是天一觀的道長(zhǎng)同眯。 經(jīng)常有香客問(wèn)我,道長(zhǎng)唯鸭,這世上最難降的妖魔是什么须蜗? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮目溉,結(jié)果婚禮上唠粥,老公的妹妹穿的比我還像新娘。我一直安慰自己停做,他們只是感情好晤愧,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著蛉腌,像睡著了一般官份。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上烙丛,一...
    開(kāi)封第一講書(shū)人閱讀 51,231評(píng)論 1 299
  • 那天舅巷,我揣著相機(jī)與錄音,去河邊找鬼河咽。 笑死钠右,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的忘蟹。 我是一名探鬼主播飒房,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼搁凸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了狠毯?” 一聲冷哼從身側(cè)響起护糖,我...
    開(kāi)封第一講書(shū)人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嚼松,沒(méi)想到半個(gè)月后嫡良,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡献酗,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年寝受,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片罕偎。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡羡蛾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出锨亏,到底是詐尸還是另有隱情,我是刑警寧澤忙干,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布器予,位于F島的核電站,受9級(jí)特大地震影響捐迫,放射性物質(zhì)發(fā)生泄漏乾翔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一施戴、第九天 我趴在偏房一處隱蔽的房頂上張望反浓。 院中可真熱鬧,春花似錦赞哗、人聲如沸雷则。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)月劈。三九已至,卻和暖如春藤乙,著一層夾襖步出監(jiān)牢的瞬間猜揪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工坛梁, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留而姐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓划咐,卻偏偏與公主長(zhǎng)得像拴念,于是被迫代替她去往敵國(guó)和親钧萍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容