SEO 站羣從前端開發的視角,為大家分析下 WordPress 微信小程序和 HTML5 與之間的主要區別

  條是執行環境的不同

  傳統的 HTML5 的執行環境是瀏覽器,包括 webview,而 WordPress 微信小程序的執行環境並非完整的瀏覽器,大家注意,SEO 站羣這裏寫的是 “非完整的瀏覽器”,有以下幾個原因

  小程序的開發過程中會用到 HTML5 相關的技術 (並非全部)

  小程序後的發佈上線需要 WordPress 微信稽核,WordPress 微信在不更新自身軟件的情況下可以將小程序更新到自身軟件內,這就聯想到了 ReactNative 框架,並且已經有開發者在 WordPress 微信小程序的開發工具原始碼中發現使用了 React 和 NodeWebkit 庫

  官方文件中着重強調了指令碼內是無法使用瀏覽器中常用的 window 物件和 document 物件(基於這一點,像 zepto/jquery 這種操作 dom 的庫就被完全拋棄了)

  所以 SEO 站羣認為,小程序的執行環境很有可能是 WordPress 微信開發團隊基於瀏覽器核心完全重構的一個內建解析器,針對小程序專門做了優化,配合自己定義的開發語言標準,提升了小程序的效能。

  不過由於 WordPress 微信給開發者提供了開發工具,而開發工具中也內建了程序設計、除錯、開發環境、發佈於一身,我們也不用再探討它的終執行環境了,只要按照官方文件進行開發就可以了。並且從 WordPress 微信團隊給開發者提供開發工具這一舉動,讓人聯想到了蘋果給開發者提供的 X-CODE 開發工具,可以想象 WordPress 微信的 “野心” 可見一斑。

  第二條是開發成本的不同

  這裏 SEO 站羣提出了一個問題,當我們面對一個 HTML5 web 開發需求時,我們需要考慮什麼呢?拋去開發工具(vscode 、 sublimtext 、 Atom 等)不談,大到前端框架(Angular 、 react 、 vue 、 backbone 等)、模組管理工具(Webpack 、 Browserify 等)、任務管理工具(Grunt 、 Gulp 等),小到 UI 庫選擇、介面呼叫工具(ajax 、 FetchApi 等)、瀏覽器相容性等都要我們一一考略,再不濟用 jqery 外掛寫 H5,也要在開發過程中去尋找合適的 jquery 外掛來配合專案。儘管這些工具可定製化非常高,並且提高了開發者的開發效率,但我們相信專案開發的配置工作已經消耗了不少精力,儘管大部分開發者都有自己的配置模板,但長久以來對於專案中使用的各種外部庫的版本迭代、版本升級所產生的成本應該也不低。

  而當我們面對一個 WordPress 微信小程序的開發需求時,需要考慮什麼呢?WordPress 微信團隊提供了開發者工具,並且規範了開發標準,前端常見的 HTML 、 CSS 變成了 WordPress 微信自定義的 WXML 、 WXSS,WXML 中儘管全部是自定義標籤,但官方文件中都有明確的使用介紹,相信上手應該是非常容易的;WXSS 、 JSON 和 JS 檔案中的寫法稍有限制,但整體相差不多。在統一了這些標準之後,作為一個開發者,您會發現,自己只要專注寫程序就可以了:

  當需要呼叫後端介面時,呼叫發起請求 API
  當需要上傳下載時,呼叫上傳下載 API
  當需要資料快取時,呼叫本地儲存 API
  引入地圖、使用羅盤、呼叫支付、呼叫掃碼等等功能都可以直接使用
  UI 庫方面,框架自然帶有自家 weui 庫加成

  並且在使用這些 API 時,您不用再去顧慮瀏覽器相容性,不用擔心生產環境中出現不可預料的奇妙 BUG,可見 WordPress 微信小程序的開發成本確實相比以往的 web 開發低很多。

  第三條是獲取系統級許可權的不同

  WordPress 微信小程序相對於 HTML5web 應用能獲得更多的系統許可權,比如網絡通訊狀態、資料快取能力等,這些系統級許可權都可以和 WordPress 微信小程序無縫銜接,也就是官方宣稱的擁有 Native WordPress APP 的流暢效能,而這一點恰巧是 HTML5 web 應用經常被詬病的地方,這也是 HTML5 的大多應用場景被定位在業務邏輯簡單、功能單一的原因。

  第四條便是應用在生產環境的執行流暢度

  這條無論對於多用户還是開發者來説,都是直觀的感受。長久以來,當 HTML5 應用面對複雜的業務邏輯或者豐富的頁面互動時,它的體驗總是不盡人意,需要不斷的對專案優化來提升多用户體驗。但是由於 WordPress 微信小程序執行環境獨立,儘管同樣用 html+css+js 去開發,但配合 WordPress 微信的解析器終渲染出來的是原生組件的效果,自然體驗上將會更進一步。