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