小程序和網(wǎng)頁(yè)的區(qū)別是:1.兩者運(yùn)行環(huán)境不同;2.開發(fā)成本不同;3.給予用戶的體驗(yàn)感不同;4.策略定位不同等。
具體區(qū)別分析
區(qū)別之一:運(yùn)行環(huán)境不同
網(wǎng)頁(yè)開發(fā)渲染線程和腳本線程是互斥的,這也是為什么長(zhǎng)時(shí)間的腳本運(yùn)行可能會(huì)導(dǎo)致頁(yè)面失去響應(yīng),而在小程序中,二者是分開的,分別運(yùn)行在不同的線程中。網(wǎng)頁(yè)開發(fā)者可以使用到各種瀏覽器暴露出來(lái)的 DOM API,進(jìn)行 DOM 選中和操作。而如上文所述,小程序的邏輯層和渲染層是分開的,邏輯層運(yùn)行在 JSCore 中,并沒(méi)有一個(gè)完整瀏覽器對(duì)象,因而缺少相關(guān)的DOM API和BOM API。這一區(qū)別導(dǎo)致了前端開發(fā)非常熟悉的一些庫(kù),例如 jQuery、 Zepto 等,在小程序中是無(wú)法運(yùn)行的。同時(shí) JSCore 的環(huán)境同 NodeJS 環(huán)境也是不盡相同,所以一些 NPM 的包在小程序中也是無(wú)法運(yùn)行的。
網(wǎng)頁(yè)開發(fā)者需要面對(duì)的環(huán)境是各式各樣的瀏覽器,PC 端需要面對(duì) IE、Chrome、QQ瀏覽器等,在移動(dòng)端需要面對(duì)Safari、Chrome以及 iOS、Android 系統(tǒng)中的各式 WebView 。而小程序開發(fā)過(guò)程中僅需要面對(duì)的是兩大操作系統(tǒng) iOS 和 Android 的微信客戶端,以及用于輔助開發(fā)的小程序開發(fā)者工具,小程序中三大運(yùn)行環(huán)境也是有所區(qū)別的
運(yùn)行環(huán)境 | 邏輯層 | 渲染層 |
iOS | JavaScriptCore | WKWebView |
安卓 | X5 JSCore | X5瀏覽器 |
小程序開發(fā)者工具 | NWJS |
網(wǎng)頁(yè)開發(fā)者在開發(fā)網(wǎng)頁(yè)的時(shí)候,只需要使用到瀏覽器,并且搭配上一些輔助工具或者編輯器即可,上線并不需要審核,體積規(guī)模、運(yùn)營(yíng)規(guī)范、轉(zhuǎn)發(fā)到朋友圈等營(yíng)銷功能也無(wú)限制。小程序的開發(fā)則有所不同,需要經(jīng)過(guò)申請(qǐng)小程序帳號(hào)、安裝小程序開發(fā)者工具、配置項(xiàng)目、提交審核,嚴(yán)格審核通過(guò)后才能上線,上線后運(yùn)營(yíng)中,如果違規(guī)還有可能會(huì)被封號(hào)下架。
區(qū)別之二:開發(fā)成本不同
當(dāng)開發(fā)一個(gè)H5微網(wǎng)站時(shí),除了域名服務(wù)器備案、服務(wù)器開發(fā)語(yǔ)言等,我們還需要考慮開發(fā)工具環(huán)境、前端框架、模塊管理工具、任務(wù)管理工具、團(tuán)隊(duì)協(xié)作代碼提交工具、組件UI庫(kù)、接口調(diào)用工具、各平臺(tái)、各品牌的瀏覽器兼容性等。即使使用jquery插件寫,也要在開發(fā)過(guò)程中去尋找合適的jquery插件來(lái)配合項(xiàng)目。盡管這些工具可定制化非常高,并且提高了開發(fā)者的開發(fā)效率,但我相信項(xiàng)目開發(fā)的配置工作已經(jīng)消耗了不少精力,盡管大部分開發(fā)者都有自己的配置模板,但長(zhǎng)久以來(lái)對(duì)于項(xiàng)目中使用的各種外部庫(kù)的版本迭代、版本升級(jí)所產(chǎn)生的成本應(yīng)該也不低。
而當(dāng)我們面對(duì)一個(gè)微信小程序的開發(fā)需求時(shí),我們需要考慮什么呢?微信團(tuán)隊(duì)提供了開發(fā)者工具,并且規(guī)范了開發(fā)標(biāo)準(zhǔn),前端常見的HTML、CSS變成了微信自定義的WXML、WXSS,WXML中盡管全部是自定義標(biāo)簽,但官方文檔中都有明確的使用介紹,上手非常容易。甚至開發(fā)者可以使用云開發(fā)開發(fā)微信小程序,弱化后端和運(yùn)維概念,從此無(wú)需搭建服務(wù)器,即可使用平臺(tái)提供的 API 進(jìn)行核心業(yè)務(wù)開發(fā),即可實(shí)現(xiàn)快速上線和迭代,同時(shí)這一能力,同開發(fā)者已經(jīng)使用的云服務(wù)相互兼容,并不互斥。在統(tǒng)一了這些標(biāo)準(zhǔn)之后,作為一個(gè)開發(fā)者,你會(huì)發(fā)現(xiàn),自己只要專注寫程序邏輯就可以了!
至于調(diào)用自家服務(wù)器、云開發(fā)接口、微信app中的任何原生能力,都有封裝好的API可供調(diào)用
UI庫(kù)方面,框架自然帶有自家weui庫(kù)
并且在使用這些API時(shí),你不用再去顧慮瀏覽器兼容性,不用擔(dān)心生產(chǎn)環(huán)境中出現(xiàn)不可預(yù)料的奇妙BUG,可見微信小程序的開發(fā)成本確實(shí)相比以往的web開發(fā)低很多。
區(qū)別之三:用戶體驗(yàn)感不同
H5最大詬病在于頁(yè)面之間切換會(huì)有白屏卡頓現(xiàn)象,頻繁在多頁(yè)面之間來(lái)回切換等待時(shí)間較長(zhǎng),受網(wǎng)絡(luò)環(huán)境影響,加載圖片、音視頻耗費(fèi)流量需要加載時(shí)間較多。
小程序雖然本質(zhì)上任然是網(wǎng)頁(yè),但是由于微信小程序運(yùn)行環(huán)境獨(dú)立,盡管同樣用html+css+js去開發(fā),但配合微信的解析器最終渲染出來(lái)的是原生組件的調(diào)用效果,自然體驗(yàn)上將會(huì)更進(jìn)一步,無(wú)白屏卡頓,瀏覽速度很快,帶來(lái)流暢的極致體驗(yàn)效果。
區(qū)別之四:策略定位不同
從營(yíng)銷傳播角度看,H5可以轉(zhuǎn)發(fā)至朋友圈這個(gè)巨大的流量入口,形成一傳十、十傳百的網(wǎng)絡(luò)規(guī)模效應(yīng),其次,H5網(wǎng)站內(nèi)容可以被百度搜索到,H5中的圖文內(nèi)容也可以選擇復(fù)制粘貼出來(lái),而小程序并不符合營(yíng)銷工具的定位,以上說(shuō)的的功能都做不到,更多是做連接,將人與服務(wù)或設(shè)備連接,用完即走,無(wú)需關(guān)注公共號(hào),全程無(wú)營(yíng)銷信息推送的工具。