H5和微信小程式測試區別

語言: CN / TW / HK

點選藍字 關注我們

01

什麼是H5?

H5,也就是“HTML5”,指“HTML”的第5個版本。眾所周知“HTML”是”超文字標記語言”,是一門描述網頁的標準語言,所以HTML5也是一種網頁技術,而且是更高階的網頁技術,包括HTML、CSS和JavaScript在內的一套技術組合。

所以,H5本質上可以理解為是一個網頁,依賴的外殼主要是瀏覽器,因此只要有瀏覽器,就可以使用。比如手機內建的瀏覽器,APP 的 web-view 元件,以及小程式提供的 web-view 元件,都可以開啟 H5 頁面。

02

什麼是微信小程式?

微信小程式,英文mini program。是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,使用者掃一掃或者搜一下即可開啟應用。不用關心是否安裝太多應用的問題。應用將無處不在,隨時可用,但又無需安裝解除安裝。

小程式本質就是一個單頁面應用,所有的頁面渲染和事件處理,都在一個頁面內進行,但又可以通過微信客戶端呼叫原生的各種介面;

它的架構,是資料驅動的架構模式,它的UI和資料是分離的,所有的頁面更新,都需要通過對資料的更改來實現;它從技術講和現有的前端開發差不多,採用JavaScript、WXML、WXSS三種技術進行開發;功能可分為webview和appService兩個部分;webview用來展現UI,appService有來處理業務邏輯、資料及介面呼叫;兩個部分在兩個程序中執行,通過系統層JSBridge實現通訊,實現UI的渲染、事件的處理等。

03

通用商務

從以上的概念的解釋裡我們已經能看出來一些基本的區別了。那麼接下來,我們就從原理和應用等方面,來分別對比一下小程式和H5的不同之處。

從開發的角度

H5和小程式的開發工具就非常不同,小程式都是依賴於微信客戶端的,所以相對來說開發工具沒有H5那麼多;

而且兩者的開發語言也都是不同的,微信小程式有自己的一套標籤與樣式語言,與標準的H5語言是不一樣的;而且還獨立了很多的原生app的元件,所以它在元件封裝上面與H5也都是有所不同的。

因此,開發一個H5,需要從開發工具、前端框架、模組管理工具、任務管理工具,還有UI庫選擇、介面呼叫工具、瀏覽器相容性等等,都需要考慮周到。儘管大多數開發者面對這些工具時,都有了自己的配置模板,但成本依然不低!

微信小程式的開發使用了改自js、CSS、HTML的語言,同時提供了各種自有的元件和API,是一套為微信量身打造的自定義的語法。因此,不用擔心瀏覽器的相容性,不用擔心莫名其妙的bug,而且在微信中小程式的使用體驗比普通H5更加順暢、快捷。

從執行環境來看

01

客戶端執行環境:

H5是網頁,所以執行環境主要是瀏覽器;

微信小程式執行環境是屬於計算機程式,配合自己定義的開發語言標準,大幅提升了小程式的流暢度和效能。

02

伺服器配置:

因為小程式的效能會比H5 高一些,所以伺服器的配置要求上來說,小程式的要求要比H5更高一些。

系統許可權

因為微信能獲取到更多的系統許可權,如網路通訊狀態、資料快取能力等,這些系統級許可權都能與微信小程式無縫銜接,這也就是官方宣稱的微信小程式能夠擁有Native App(原生APP)的流暢效能。

而H5 web應用對系統本身的許可權的獲取則相對少了很多,這一點恰巧是H5 web應用經常被詬病的地方。也因此,H5的大多數應用被圈定在業務邏輯簡單、功能單一的範圍上。

使用者體驗

效能體驗

我們在開啟一個H5頁面的時候,實際上就是開啟一個web網頁,之前在 PC 上瀏覽網頁沒區別,每次要請求各種圖片樣式資源,在瀏覽器核心裡渲染,這個過程叫做載入,無論載入的時間的長短,都會給使用者一種”卡“或者“不靈敏”的感覺,體驗是會比較差一些的;

而小程式是微信內的雲端應用,通過WebSocket 雙向通訊(保證無需重新整理即時通訊)、本地快取(一旦首次開啟小程式可以直接快取很多資源和圖片,降低與伺服器互動延時)以及微信底層技術優化實現了小程式接近原生APP的體驗。所以在使用小程式的時候,同等網路條件下幾乎不用等待,可以像操作普通app一樣流暢。

小程式的優越性體現在既保留了H5開發的便利和靈活性,又可以達到媲美Native體驗。

使用場景

01.

開啟的方式

小程式只能在微信裡開啟,而 H5 頁面可以藉助微信的環境下掃碼或點選連結開啟在任何瀏覽器裡開啟,所以,如果產品需要通過簡訊通知使用者帶上訪問地址,就無法用小程式實現了;而H5可以在簡訊正文中直接用手機內建瀏覽器開啟。

02.

分享的方式

由於微信本身的策略的限制,H5 在微信裡可以直接分享到朋友圈;而小程式就只能生成帶小程式碼的圖片發到朋友圈,不如H5便捷;但是對於分享到好友或群,小程式提供了卡片式的分享介面,資訊多而且看起來很高階,這個效果H5 是無法做到。

03.

支付能力

因為小程式是內嵌在微信裡的,所以支付只支援微信支付;而 H5 裡可以選擇使用其他支付平臺提供的支付方式,因此H5的支付方式更加的多樣化。

04.

追蹤使用者行為

小程式還有一個優勢,就是通過小程式的分享轉發,每一次誰轉發了,到了哪裡,誰點開看了這些資訊我們都是可以知道的,通過此可以知道使用者和身邊朋友對品牌的喜好。這個資訊是過去APP電商、PC網際網路電商做不到的,基於社群化的分享和交流可以知道社群消費力是怎麼樣的情況,喜歡什麼樣的品牌,什麼樣的方式更合適。通過這樣的資訊收集背後有演算法可以比較精確地推薦計算,這些東西的確是在APP上、H5上做不到的。

通過下面的表格我們可以更直觀的看出兩者之前的區別:

測試關注點及差異

01

H5測試

02

小程式測試

總結

從測試人員的角度來看,H5本質上是一個web頁面,所以web測試的方法在H5測試中同樣適用。而小程式本質是一個執行在微信上的應用,所以適用APP的很多測試方法,又因為是依賴微信執行,在與微信之間的資料傳輸功能互動方面需要額外關注。