挨踢部落直播課堂第四期：如何玩轉H5網站快速轉換成App？
原創將H5網站轉換成App，不是簡單套個WebView殼完事，關鍵是達到原生版的功能和體驗。wap2app是一款將H5網站轉換成App的前端開發框架，底層基于HTML5PLUS引擎，可以調用幾十萬原生API，實現更強大的推送、支付、分享、定位等能力，解決M站因API不足而導致的功能缺失。那么，將M站快速轉換成App的前端開發框架如何實現呢？我們特此邀請到DCloud公司CTO崔紅保老師做直播分享。
內容簡介
1、H5網站轉換成App需求說明
2、web App和原生App的體驗差距
3、wap2app框架簡介
4、wap2app實現方案
5、wap2app開發方式
大家好，今天分享的主題是：《將H5網站轉換成原生體驗的App》
一、H5網站轉換成App需求說明
如果我們只有H5網站，沒有App，想要生成App的可選方案有哪些？目前的技術，大概有三個路線：
1. 利用Android/Object-c原生語言，分平臺重新開發；這樣會導致H5、安卓、iOS三端并行，成本***，效率***；
2.利用React Native/weex/mui/Cordova等跨平臺技術，一套代碼覆蓋Android、iOS兩個平臺；這樣需要維護H5、跨平臺App兩套代碼，成本、效率都居中；
3.復用H5網站，直接將H5網站轉換成App，這樣只需要維護H5一套代碼，成本***，效率***。
雖然第三種方案成本***，但要做好，難度***；如果只是使用webview簡單套殼打個包，功能體驗和原生App相比，差距甚遠，最終用戶不買賬。
H5網站轉換成App，關鍵是實現原生版的功能和體驗，這是存在業界很久的一個轉換難題，甚至很多人已經放棄希望。
二、web App和原生App的體驗差距
web App和原生App的體驗差距主要體現在：
窗口動畫：H5網頁在手機瀏覽器上是通過href在當前頁面跳轉的，沒有動畫；但原生App是通過原生View動畫進行切換的，體驗更好；
滾動條通頂：H5網頁的標題欄一般是div方式fix在頂部，頁面滾動條會通頂，把標題欄右側蓋住。這個效果很不原生。雖然使用div滾動也可以解決滾動條通頂，但div滾動在安卓上效率無法商用。
下拉刷新：H5網頁通過DIV模擬的下拉刷新不流暢，甚至很多M站干脆就不做下拉刷新。但App里這是一個常見而重要的交互操作。
選項卡切換：原生App切換選項卡時，選項卡區域不變，僅內容區view變化；但web app切換選項卡時 ，會將整個頁面重新加載，經常出現白屏現象。
返回按鍵處理：若用戶之前操作觸發了彈出層顯示（比如地址選擇），則在用戶按下back鍵時，原生App會先關閉彈出層，并不會直接關閉當前頁面；但web app會直接執行history.back()邏輯，導致整個頁面的后退。
渲染速度：H5網站屬于B/S結構，需要先下載再渲染；而原生App大多為C/S結構，資源從本地加載，可以無需等待立即渲染部分元素，避免白屏現象；
系統能力：HTML5因API限制，很多終端能力無法調用，導致很多功能缺失或不如原生，比如推送、掃碼、分享、支付等；
系統梳理，這樣的體驗差異點還有很多，我們基于多年HTML5開發經驗和大量項目實踐，逐一解決如上的體驗差異點，終于打磨出了wap2app產品。
三、wap2app框架簡介
wap2app是一個將現有HTML5網站快速發布成App的開發框架，通過wap2app框架，進行簡單的配置和必要的編程，即可完成M站的體驗強化，可打包成iOS平臺的ipa、Android平臺的apk，可上線各大應用市場，轉換后的App可媲美原生App。
不信媲美原生？看視頻：https://v.qq.com/x/page/x05025vurui.html
視頻說明：
- 環境：相同的手機設備（小米6，同樣的MIUI版本）、相同的網絡，使用前均清理了內存，原生應用使用***版。
- 結論：wap2app新頁面渲染速度和原生不相上下，在300毫秒的動畫期間即可渲染，而且動畫平順。
wap2app框架具有如下特點：
1. 提供了原生渲染能力，讓界面渲染速度和動畫效果，達到原生體驗
2. 提供豐富的系統原生能力（定位、分享、支付、推送等），達到原生功能
3. 通過json配置頁面規則和強化規則，工作量低，學習成本低
4. M站僅需稍作修改，改造成本低
5. 強化部分和之前的M站解耦合，M站后續升級業務邏輯，生成的App自動含有更新后的業務邏輯
四、wap2app實現方案
wap2app的底層實現很復雜，涉及大量的原生、HTML5優化，針對每個體驗差異問題，我們都有對應的優化方案，例如：
窗口動畫：wap2app底層攔截頁面跳轉，新頁面使用新的webview加載，然后使用view的原生動畫（如slide-in-right或pop-in）切換；
滾動條通頂：使用原生標題欄代替HTML5的標題欄，隨著webview一起創建；支持自動讀取頁面標題，即解決了滾動條通頂，也避免了頁面全白問題。
選項卡切換：將選項卡區域和內容區拆分成兩個單獨的webview，切換選項卡時，選項卡區webview僅切換高亮狀態，然后通知內容區webview加載新的頁面，這樣就可以避免整體白屏現象。
接下來，我們重點講解能力擴展和渲染加速兩個方面。
1、能力擴展
HTML5可用API比原生App少很多，很多和系統設備相關的功能無法實現；wap2app底層基于HTML5 PLUS引擎，可以調用幾十萬原生API，實現更強的推送、分享、支付、定位等系統能力，可實現和原生App一樣的功能要求。
wap2app中可調用的HTML5 PLUS API分兩個部分。
1.1常用的API – HTML5plus
包括二維碼、搖一搖、語音輸入、地圖、支付、分享、文件系統、通訊錄等常用API，封裝成跨平臺的HTML5plus規范，并將規范公開于www.HTML5plus.org ，不做廠商私有API。HTML5中國產業聯盟目前已經成為工信部的下屬單位，而HTML5Plus規范也已經成為行標，并進行了國標立項。
1.2其他原生API – Native.js
原生API在iOS和Android上各自有40多萬，有些API并不常用，而且不具有跨平臺特性，比如ios的game center api。太多的API封裝到HTML5plus里，會過多增加runtime的體積，但若有需求要使用這些api又很麻煩。
我們有一項突破性的技術來解決上述煩惱—Native.js，一種把40w原生API映射為JS API的技術。
![C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\F~8XI6K@)TI]DF)FFPC1(TB.png](https://s4.51cto.com/oss/201711/09/9010b3e355ff8636c76c35f8668c66e1.jpg)
1.3原生擴展示例 - 分享
因HTML5能力限制，H5網站僅支持wap方式的分享，分享體驗很糟糕，如下是一種典型實現（參考下方截圖）：
![C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\ZH]W`Z$TG{7Y3TYNGCJ_%T1.png](https://s2.51cto.com/oss/201711/09/5d91d96e51f6a737927494543d105ae8.jpg)
- 點擊微信分享后，顯示一個二維碼，用戶需要啟動微信掃描二維碼，先在微信中打開這篇文章，然后再通過微信右上角的菜單分享出去；分享路徑太長，操作麻煩；
- 點擊微博分享，需要登錄微博wap站，完成授權后才能分享。
wap2app運行在HTML5 PLUS 引擎下，是可以通過HTML5 PLUS的share模塊直接調起系統原生分享的，同樣場景，稍作改造，在wap2app環境下調用原生分享，則體驗會大大改觀，如下為調用原生分享后的截圖：
![C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\VFUGAPO5@{SL34)(]V7WSY4.png](https://s4.51cto.com/oss/201711/09/cdd371d63b41f891f5dfa6509ac80b70.jpg)
很明顯，wap2app調起原生分享后，分享路徑更短、體驗更好，更有利于內容的分享傳播。
2、接下來講渲染加速
web頁面加載渲染速度相比原生App，有較大的體驗差距，以至于在移動設備上嚴重影響業務體驗。造成這些體驗差距的原因大致有如下幾個：
--渲染時機：web app需要等待服務端Document下載完成后才開始啟動渲染工作，無法提前分區域渲染；而原生App作為C/S結構的應用，僅向服務端請求業務數據，其它布局、樣式大多在本地，故可以在用戶觸發打開新窗口時，立即渲染新窗口部分區域布局，服務端響應數據后，再更新對應區域的內容；
--圖片資源請求時機：web app需要先下載Document，然后再根據Document中的<img>標簽的src屬性去異步加載圖片資源，故在web app中總是先看到文字，然后再逐漸看到圖片；而原生App則無需任務等待，可以直接加載圖片資源，故原生App的圖片顯示會早于web app中的圖片顯示；
--業務數據請求時機：web app的實現若是前后端分離，則需要先下載封裝業務邏輯的js文件，下載完畢后，再由js發起ajax請求；而原生App，則大多將業務邏輯封裝在本地，無需等待下載js文件，可以更早的發起HTTP業務請求。
如何提升web頁面的渲染速度，很多公司都在嘗試，比如Google主導的AMP技術，以及國內百度延伸的MIP技術，這類技術以閱讀類網頁加速為主，不適合JS交互復雜的場景，適用范圍有限。
DCloud在webview的基礎上，提出了subNView技術，這是一種更為通用、可增強任意web頁面渲染體驗的方案。
2.1 subNView介紹
subNView，字面拆開理解就是sub native view，有兩個核心點：
- native：subNView是一種原生繪制的View，和HTML5的DOM無關
- sub：subNView屬于webview的一部分，并不替代完整Webview。和所屬webview保持同樣的生命周期，跟隨webview的close、hide、zindex變化而變化。
subNView作為webview的子控件，一個webview可以包含多個subNView，一個subNView上可以繪制多個圖片（包括圖片輪播）、文字、區域、按鈕等。
subNView在保留HTML5優勢的基礎上，利用原生View發揮原生渲染優勢；當用戶觸發窗口切換時，webview按照原有邏輯繼續加載Document，渲染頁面；但無需等待Document加載完成，可同時在原生View上提前完成如下工作：
- 繪制固定內容區域，或可從前頁獲取數據的區域，例如固定地址圖片、購物車按鈕等，而無需等待Document下載完畢后再去請求加載圖片
- 直接發起業務數據ajax請求，ajax響應后直接在原生View上繪制數據，無需等待業務封裝的JS下載。
如下為一個使用subNView增強后的商品詳情頁示例：
從上圖可看出：
* webview按照原有邏輯，加載Document，渲染頁面，剛開始內容未加載時還是白屏（中間空白區域）
* webview同時創建了2個subNView作為webview的子控件
* subNView 1展示商品詳情輪播圖及商品價格，是通過ajax動態獲取的；輪播圖片支持滑動、點擊放大預覽，用戶可提前查看商品詳情
* subNView 2展示購物車相關功能，屬于固定顯示內容，可直接渲染
* 購物車按鈕點擊后事件透傳給Webview里的購物車按鈕，HTML頁面的所有邏輯，仍然復用。subNView只是簡單的侵入動畫渲染過程，不引發業務邏輯的重新編寫。
如下是使用subNView加速后，頁面切換過程對比：
![C:\Users\hexing\Documents\Tencent Files\211357701\Image\Group\NO)([IOJJW~]][E3456JFWW.png](https://s3.51cto.com/oss/201711/09/74df7218b5d64105e7b9f79c7edef274.jpg)
2.2如何使用subNView
開發者可以通過webview的subNViews屬性創建或修改subNview控件，這里需要傳入復雜的json對象；為簡化開發，DCloud提供了NView模板技術。
NView模板類似于vue的single-file components(單文件組件)，HBuilder中新建NView模板文件，默認代碼如下：
NView模板涉及模板標簽、屬性、樣式定義、數據綁定等概念，詳細移步wap2app官網查看。
五、wap2app開發方式
wap2app開發簡單，主要基于json文件快速配置，規則簡單，學習成本低，工作量少；一個中等規模的M站，一個前端工程師4天左右就可以轉換完成。wap2app同時支持Javascript高級編程，可實現更為復雜的需求開發。
在具體開發過程中，wap2app涉及
1. wap2app本地端的工作：通過框架提供的sitemap文件，描述頁面關系和動畫強化方案，以達到原生的窗體切換效果。當sitemap.json配置無法滿足復雜需求時，可使用app.js編程進行增強處理。
2. H5網站的改造工作：針對App運行環境（UA不同），進行適當的改造，包括去掉一些App里不應該出現的頁面元素（如底部的電腦版鏈接，啟用原生導航條后需隱藏原來HTML5的DIV導航條）。
3. 如果需要調用DCloud的HTML5+擴展能力，比如M站之前無法實現的微信分享、推送、原生支付，進行必要的編程開發，這部分工作可以在本地端實現，也可以在H5網站實現（需要區分是wap2app運行環境）。
one more thing，wap2app 完全免費！
更多信息，請移步wap2app官網：http://dcloud.io/wap2app.html
以下問題是來自51CTO開發者社群小伙伴們的提問和分享：
Q：web_何_南充：wap2app改造后可以直接上線流應用嗎？
A：DCloud-崔老師：可以。
Q：無所謂：NView模板什么時候能在mui框架上？
A：DCloud-崔老師：一般是App開發，基于C/S結構的，html頁面在本地，渲染速度還是可以的，NView模板意義不大。
Q：義本無言：如果已用hbuilder開發完成的app能快速逆向轉到wap么？
A：DCloud-崔老師：DCloud給開發者提供了2種開發模式：
1. 從頭開發，使用mui框架，開發一次，app和wap站都有了；
2. 已有wap站，則使用wap2app框架，把wap站強化為app。
Q：義本無言：這個適用場景是 wap還沒有然后用咱們的開發工具開發 然后可以快速的轉換成app項目 如果已經開發完成的wap項目是不是就不適用了呢 或者說適用是不是工作量會很大。
A：DCloud-崔老師：wap、App都沒有，建議使用mui，一次開發，多端發布
wap已經有了，沒有App，建議使用wap2app快速發布成App。
Q：義本無言： mui和 wap2app 哪個的效果流暢度***呢？
A：DCloud-崔老師：看你目前的階段，好好優化，都會有不錯的體驗?？梢詮膆ttp://liuyingyong.cn/
下載流應用管理器，其中唯品會、大眾點評、手機京東都是基于wap2app實現的，大家可以體驗一下流暢度。
Q：義本無言：問題是我使用的mui + h5+ 開發的app 然后轉wap 但是wap中h5+ 的內容不支持呀
A：DCloud-崔老師：如果要調用5+ 的代碼，就需要注意區分平臺了，判斷是5+環境下再調用，瀏覽器模式下就降級或隱藏該功能
Q：php-互聯網+-上海：崔老師您好，我有2個問題：
問題1：
催老師上文說到：“窗口動畫：wap2app底層攔截頁面跳轉，新頁面使用新的webview加載”
說的是 自動攔截了所有的 a 標簽的 href 跳轉嗎 還是需要特殊的配置？
問題2：
打包后的APK，經過解壓，能看到所有的html/css/js 等前端文件，很容易泄密或者被盜用，請問后續的升級中 ，有沒有考慮防范措施？
A：DCloud-崔老師：wap2app底層會攔截location.href跳轉，不管是a標簽的點擊跳轉，還是js的跳轉。目前打包時有加密選項，
Q1：web_何_南充：那想新做一套移動端系統，覆蓋webapp，流應用，微信公眾號頁面，安卓，IOS，即一次開發，5次發布，應該用什么技術？
Q2：開發-sanbor ：wap2app 只能在流應用中使用咯?
A：DCloud-崔老師：目前支持將wap2app項目打包成原生安裝包（iOS平臺的ipa安裝包、Android平臺的apk安裝包），也支持發布到流應用平臺。
Q：陳永松-信陽：我想實現登錄后判斷不同的權限，從而顯示不同的底部選項卡，能做到不？
A：DCloud-崔老師：這個需求準確描述就是二級頁面的選項卡優化，后續會支持。
Q：廣州-前端-黃小文：mui可以做wap站？不是做app的么？
A：DCloud-崔老師： mui支持多端發布，通過構建工具可以發布到不同平臺。
Q：廣州-前端-黃小文：MUI多端發布不是指ios和安卓么？wap站也能做？mui支持做wap的M站？
A：DCloud-崔老師：你手機瀏覽器或微信訪問：http://dcloud.io/hellomui/
這個代碼其實和ios和安卓的hello mui一套代碼。
Q:大數據-ta-北京：想跑wap2app應用, 還必須安裝插件, 不知道的用戶還以為進了釣魚網站. 這不好吧..
A：DCloud-崔老師：安裝什么插件？目前很多互聯網公司的流應用是基于wap2app實現的，所以需要安裝流應用管理器才能體驗；但也已經由很多創業者自己實現的wap2app項目，打包成了apk/ipa，無需安裝任何插件，可以直接安裝到手機上運行。
Q：php-互聯網+-上海：咱們底層是否對mui做過特別的支持？如果用其他前端框架比如bootstrap，或者自己原生寫的效果，是否意味著不如用mui渲染的更快？
A：DCloud-崔老師：目前沒有私有支持，mui的特點是輕量、原生UI、多端發布。開發者也可以使用其它的UI庫。
Q：PHP-揚-廈門：一些使用前端框架如vue,angular等做的單頁面或非單頁面能否使用wap2app轉換？
A：DCloud-崔老師：wap2app目前主要MPA做了優化，SPA模式效果不明顯，不推薦。
Q：開啟網絡-李生：因現有的wap站有多個頭部，wap2app是否支持原生頭部多個樣式，然后原生頭部有“購物車”按鈕，當購買車里有商品時，會顯示個紅點，現在是不是可以實現的？
A：DCloud-崔老師：可以自定義繪制導航欄，通過plus.webview.WebviewObject.getTitleNView獲得導航view，然后自己繪制。
Q：php-靈感-宿遷：聊天這塊,比如人才網,能獲取到網頁的 企業id嗎？這樣就能聊天了。MPA是啥？SPA是啥？
A：DCloud-崔老師：SPA：single page application
Q1：軟賤攻城獅：其實我對這塊一直有個問題，一些wap網站是用了前端模板的比如jstl,vue,或者jfinal的enjoy，dcloud這個wap2app也能轉？
Q2：前端-廣州： 1. 從頭開發，使用mui框架，開發一次，app和wap站都有了；這是怎樣做的呢？
A：DCloud-崔老師：http://dcloud.io/mui.html建議先了解一下mui的基礎。舉個例子：mui.openWindow()在App中是打開新webview，瀏覽器下降級執行location.href跳轉
Q：前端-廣州：已經用mui做了app,但現在要將app轉wap用于嵌入第三方的app中，如何用mui去實現？目前不清楚第三方app使用什么框架。app頁面打開不是用了原生底層去實現的嗎？
A1：DCloud-崔老師：直接把你開發的app代碼部署到服務器上，然后使用瀏覽器訪問一下，看是否有兼容問題，沒問題就直接用了。
舉個例子：mui.openWindow()在App中是打開新webview，瀏覽器下降級執行location.href跳轉
A2：移動-小雨-北京：普通瀏覽器不支持5+runtime，需要將用到plus相關API的部分，做一下處理。我之前搞過類似的，不過比較簡單。比如跳轉，如果用mui.openWindow的話就不用處理。如果分享用的是原生的，那就得自己注冊h5版的，對不同環境做下兼容。
Q：北京-unicorn-數據：HBuilder、 wap2app 商用的話收費么？ 是否有 與 GraphQL 結合的案例？
A：DCloud-崔老師：免費，不收費。目前我已知的，還沒有結合案例。
Q：php-縱橫-秦皇島：我感覺hb***的問題是沒有html css的混淆，直接原生代碼泄漏了
A：DCloud-崔老師：目前僅支持js加密，不支持html、css加密，不過業務邏輯也應該抽離寫在js中。
【51CTO原創稿件，合作站點轉載請注明原文作者和出處為51CTO.com】
