h5和native測試時的區別

 

咱們以往的APP是使用原生系統內核的，至關於直接在系統上操做，是咱們傳統意義上的軟件，更加穩定

H5的APP先得調用系統的瀏覽器內核，至關因而在網頁中進行操做，較原生APP穩定性稍差，彷佛尚未百萬級用戶量的H5 APP

H5最大的優勢是能夠跨平臺，開發容易，APP的話須要用ANDROID的語言和IOS的語言各自寫，H5只要開發一套

簡單的說：H5是基於web，native基於客戶端

H5測試應該從哪些方面考慮？

一、業務邏輯相關

除基本的功能測試以外，H5頁面的測試，須要關注如下幾點：

1.1 登錄

目前H5與native各個客戶端都作了互通，因此你們在測試的時候要注意兩點：

A、若客戶端已登陸，那麼進入H5後仍然是登陸狀態。

B、若客戶端未登陸，進入H5，點擊對應按鈕OR連接。

若是須要登陸，須拉起native登陸；

若取消登陸，是否可再次拉起登陸，或者停留在的頁面是否有對應的登陸提示。

1.2 翻頁

遇到翻頁加載的頁面，須要注意內容爲1頁或者多頁的狀況。

A、數據分頁加載時，注意後續頁面請求數據的正確。

ps：這個須要注意在快速操做場景中，請求頁數是否是依次遞增，快速操做

（如第一頁還沒有loading出來的時候仍然繼續上拉操做）時是否發出去對應的請求了。

1.3 刷新與返回

A、下拉刷新是否仍然處於當前頁面

B、用戶主動點擊刷新按鈕是否仍然處於當前頁面

C、點擊返回與back鍵，回退頁面是不是指望頁面

1.4 數據的請求與返回

A：提交了數據，數據是否正確的整理到後臺管理系統。

B：發送了請求，是否正確返回你要求的數據。

二、H5適配相關

H5的適配其實比客戶端的相對來講，要少一些，手機品牌之間的差別不大，因此不用太多關注，最容易出現問題的是android2.3系統，這個要特別關注下：

A、大屏（如720*1280，重點關注頁面背景是否徹底撐開頁面，刷新是否有抖動）、小屏手機（如320*480，重點關注下彈框樣式和文案折行）

B、android2.三、android4.X隨機找一個便可

C、ios五、ios六、ios7

D、瀏覽器上也要可以進行完美展現

三、安全相關

3.1 明確投放渠道都有哪些？

如獨客、主客、wap，是否對未投放渠道作了限制，直接經過url請求是否攔截等

3.2 是否須要接入支付寶實名認證涉及到金錢相關。

如天貓積分，紅包等，爲了防刷，通常都須要判斷是否支付寶實名認證。

之前我在的公司，有一次爲了作推廣~發起了一個數錢的活動，每次都是一毛一毛的數，時間是15秒，出現以下bug：

1)  利用腳本數錢，15秒數出了100多~~-最後出於推廣成本的考慮，就把時間限制爲5秒、

2）轉發一次就能夠獎勵多一次機會數錢，結果沒有作好限制，朋友的朋友推廣，仍是能夠獎勵次數。

四、體驗相關

4.1 資源相關

A、頁面中有圖片的話，淘寶那邊建議圖片通常不大於50kb，本着一個原則，儘可能縮小圖片。

B、資源是否壓縮、是否經過CDN加載。---CDN是什麼？---就近地區訪問，服務速度會更快。

C、如何保證二次發佈後有效更新。

D、對於相似公司名稱、offer名稱長度的問題，在手機上最好能根據屏幕大小自適應而不是截斷，由於手機上是不會有tips能夠看的。

截斷致使大屏幕下也只能顯示幾個字，交互很差

4.2 流量

A、對於一些不會變化的圖片，如遊戲動畫效果相關圖片，不須要每次都請求的東西，作本地緩存。

B、數據較多時是否作了分頁加載。

4.3 頁面展示時間

A、關注頁面首屏加載時間。

4.4 頁面提示

A、弱網絡下，數據加載較慢，是否有對應的loading提示

B、接口獲取異常時，提示是否友好。

C、刷新頁面或者加載新內容時頁面是否有抖動。

4.5 手機操做相關

A、鎖屏以後展現頁面。

B、回退到後臺以後，從新呼出在前臺展現。

C、手指滑動是否流暢，手指點擊時焦點是否認位正確，不一樣機型會不同。焦點地位後點擊是否靈敏。

4.6 弱網絡體驗

五、埋點數據檢查

與前端同窗一塊兒確認埋點狀況。什麼是埋點？

接下來你可能要問，H5測試的工具是什麼？很簡單。

2：谷歌瀏覽器→調試成手機模式來進行測試

下載谷歌瀏覽器，點擊瀏覽器右上角「三」圖標，在下拉選項中選擇→「更多工具」→「開發者工具」，或者直接按F2；

這樣子就能夠開始測試了！是否是超簡單？

Native App

傳統的原生App開發模式，android基於Java語言，底層調用Goolge提供的API，IOS基於Objective c或Swift，底層調用Apple官方提供的Api

優勢：

直接依託於操做系統,交互性最強,性能最好

功能最爲強大,特別是在與系統交互中,幾乎全部功能都能實現

缺點 :

開發成本高,沒法跨平臺,不一樣平臺Android和iOS上都要各自獨立開發

門檻較高,原生人員有必定的入門門檻,相比廣大的前端人員而言,較少 更新緩慢,特別是發佈應用商店後,須要等到審覈週期 維護成本高

Web App

即移動端的網站,將頁面部署在服務器上,而後用戶使用各大瀏覽器訪問,不是獨立APP,沒法安裝和發佈，相似於如今所說的輕應用

優勢：

開發成本低,能夠跨平臺,調試方便

維護成本低 更新無需通知用戶，不須要手動升級 無需安裝App,不會佔用手機內存

缺點：

沒法獲取系統級別的通知，提醒，動效等等

用戶留存率低 設計受限制諸多 體驗較差

Hybrid App

(Hybrid)混合應用程序，在應用程序中嵌入了webview，經過webview訪問網頁，嗯，那webview又是個啥？ webview是一個基於webkit引擎，展示web頁面的控件 做用： 顯示和渲染web界面 直接使用html文件（網絡或Apk資源包assets中）做佈局 可和Java交互調用

優勢：

開發成本較低,能夠跨平臺,調試方便 維護成本低,功能可複用

功能更加完善,性能和體驗要比起web app好太多 更新較爲自由

缺點： 相比原生,性能仍然有較大損耗 不適用於交互性較強的app

tips

如何判斷一個應用界面是native仍是web界面

一、在手機/模擬器中點擊關於手機中的版本號5下，出來開發者選項

二、在開發者選項中勾選上顯示佈局邊界再返回到App界面

三、若是App是Html的界面，那界面不會有佈局邊界顯示，若有則說明是native的