將H5網(wǎng)站轉(zhuǎn)換成App，不是簡(jiǎn)單套個(gè)WebView殼完事，關(guān)鍵是達(dá)到原生版的功能和體驗(yàn)。wap2app是一款將H5網(wǎng)站轉(zhuǎn)換成App的前端開(kāi)發(fā)框架，底層基于HTML5PLUS引擎，可以調(diào)用幾十萬(wàn)原生API，實(shí)現(xiàn)更強(qiáng)大的推送、支付、分享、定位等能力，解決M站因API不足而導(dǎo)致的功能缺失。那么，將M站快速轉(zhuǎn)換成App的前端開(kāi)發(fā)框架如何實(shí)現(xiàn)呢？我們特此邀請(qǐng)到DCloud公司CTO崔紅保老師做直播分享。

內(nèi)容簡(jiǎn)介

1、H5網(wǎng)站轉(zhuǎn)換成App需求說(shuō)明

2、web App和原生App的體驗(yàn)差距

3、wap2app框架簡(jiǎn)介

4、wap2app實(shí)現(xiàn)方案

5、wap2app開(kāi)發(fā)方式

大家好，今天分享的主題是：《將H5網(wǎng)站轉(zhuǎn)換成原生體驗(yàn)的App》

一、H5網(wǎng)站轉(zhuǎn)換成App需求說(shuō)明

如果我們只有H5網(wǎng)站，沒(méi)有App，想要生成App的可選方案有哪些？目前的技術(shù)，大概有三個(gè)路線：

1. 利用Android/Object-c原生語(yǔ)言，分平臺(tái)重新開(kāi)發(fā)；這樣會(huì)導(dǎo)致H5、安卓、iOS三端并行，成本***，效率***；

2.利用React Native/weex/mui/Cordova等跨平臺(tái)技術(shù)，一套代碼覆蓋Android、iOS兩個(gè)平臺(tái)；這樣需要維護(hù)H5、跨平臺(tái)App兩套代碼，成本、效率都居中；

3.復(fù)用H5網(wǎng)站，直接將H5網(wǎng)站轉(zhuǎn)換成App，這樣只需要維護(hù)H5一套代碼，成本***，效率***。

雖然第三種方案成本***，但要做好，難度***；如果只是使用webview簡(jiǎn)單套殼打個(gè)包，功能體驗(yàn)和原生App相比，差距甚遠(yuǎn)，最終用戶不買賬。

H5網(wǎng)站轉(zhuǎn)換成App，關(guān)鍵是實(shí)現(xiàn)原生版的功能和體驗(yàn)，這是存在業(yè)界很久的一個(gè)轉(zhuǎn)換難題，甚至很多人已經(jīng)放棄希望。

二、web App和原生App的體驗(yàn)差距

web App和原生App的體驗(yàn)差距主要體現(xiàn)在：

窗口動(dòng)畫(huà)：H5網(wǎng)頁(yè)在手機(jī)瀏覽器上是通過(guò)href在當(dāng)前頁(yè)面跳轉(zhuǎn)的，沒(méi)有動(dòng)畫(huà)；但原生App是通過(guò)原生View動(dòng)畫(huà)進(jìn)行切換的，體驗(yàn)更好；

滾動(dòng)條通頂：H5網(wǎng)頁(yè)的標(biāo)題欄一般是div方式fix在頂部，頁(yè)面滾動(dòng)條會(huì)通頂，把標(biāo)題欄右側(cè)蓋住。這個(gè)效果很不原生。雖然使用div滾動(dòng)也可以解決滾動(dòng)條通頂，但div滾動(dòng)在安卓上效率無(wú)法商用。

下拉刷新：H5網(wǎng)頁(yè)通過(guò)DIV模擬的下拉刷新不流暢，甚至很多M站干脆就不做下拉刷新。但App里這是一個(gè)常見(jiàn)而重要的交互操作。

選項(xiàng)卡切換：原生App切換選項(xiàng)卡時(shí)，選項(xiàng)卡區(qū)域不變，僅內(nèi)容區(qū)view變化；但web app切換選項(xiàng)卡時(shí) ，會(huì)將整個(gè)頁(yè)面重新加載，經(jīng)常出現(xiàn)白屏現(xiàn)象。

返回按鍵處理：若用戶之前操作觸發(fā)了彈出層顯示（比如地址選擇），則在用戶按下back鍵時(shí)，原生App會(huì)先關(guān)閉彈出層，并不會(huì)直接關(guān)閉當(dāng)前頁(yè)面；但web app會(huì)直接執(zhí)行history.back()邏輯，導(dǎo)致整個(gè)頁(yè)面的后退。

渲染速度：H5網(wǎng)站屬于B/S結(jié)構(gòu)，需要先下載再渲染；而原生App大多為C/S結(jié)構(gòu)，資源從本地加載，可以無(wú)需等待立即渲染部分元素，避免白屏現(xiàn)象；

系統(tǒng)能力：HTML5因API限制，很多終端能力無(wú)法調(diào)用，導(dǎo)致很多功能缺失或不如原生，比如推送、掃碼、分享、支付等；

系統(tǒng)梳理，這樣的體驗(yàn)差異點(diǎn)還有很多，我們基于多年HTML5開(kāi)發(fā)經(jīng)驗(yàn)和大量項(xiàng)目實(shí)踐，逐一解決如上的體驗(yàn)差異點(diǎn)，終于打磨出了wap2app產(chǎn)品。

三、wap2app框架簡(jiǎn)介

wap2app是一個(gè)將現(xiàn)有HTML5網(wǎng)站快速發(fā)布成App的開(kāi)發(fā)框架，通過(guò)wap2app框架，進(jìn)行簡(jiǎn)單的配置和必要的編程，即可完成M站的體驗(yàn)強(qiáng)化，可打包成iOS平臺(tái)的ipa、Android平臺(tái)的apk，可上線各大應(yīng)用市場(chǎng)，轉(zhuǎn)換后的App可媲美原生App。

不信媲美原生？看視頻：https://v.qq.com/x/page/x05025vurui.html 

視頻說(shuō)明：

- 環(huán)境：相同的手機(jī)設(shè)備（小米6，同樣的MIUI版本）、相同的網(wǎng)絡(luò)，使用前均清理了內(nèi)存，原生應(yīng)用使用***版。

- 結(jié)論：wap2app新頁(yè)面渲染速度和原生不相上下，在300毫秒的動(dòng)畫(huà)期間即可渲染，而且動(dòng)畫(huà)平順。

wap2app框架具有如下特點(diǎn)：

1. 提供了原生渲染能力，讓界面渲染速度和動(dòng)畫(huà)效果，達(dá)到原生體驗(yàn)

2. 提供豐富的系統(tǒng)原生能力（定位、分享、支付、推送等），達(dá)到原生功能

3. 通過(guò)json配置頁(yè)面規(guī)則和強(qiáng)化規(guī)則，工作量低，學(xué)習(xí)成本低

4. M站僅需稍作修改，改造成本低

5. 強(qiáng)化部分和之前的M站解耦合，M站后續(xù)升級(jí)業(yè)務(wù)邏輯，生成的App自動(dòng)含有更新后的業(yè)務(wù)邏輯

四、wap2app實(shí)現(xiàn)方案

wap2app的底層實(shí)現(xiàn)很復(fù)雜，涉及大量的原生、HTML5優(yōu)化，針對(duì)每個(gè)體驗(yàn)差異問(wèn)題，我們都有對(duì)應(yīng)的優(yōu)化方案，例如：

窗口動(dòng)畫(huà)：wap2app底層攔截頁(yè)面跳轉(zhuǎn)，新頁(yè)面使用新的webview加載，然后使用view的原生動(dòng)畫(huà)（如slide-in-right或pop-in）切換；

滾動(dòng)條通頂：使用原生標(biāo)題欄代替HTML5的標(biāo)題欄，隨著webview一起創(chuàng)建；支持自動(dòng)讀取頁(yè)面標(biāo)題，即解決了滾動(dòng)條通頂，也避免了頁(yè)面全白問(wèn)題。

選項(xiàng)卡切換：將選項(xiàng)卡區(qū)域和內(nèi)容區(qū)拆分成兩個(gè)單獨(dú)的webview，切換選項(xiàng)卡時(shí)，選項(xiàng)卡區(qū)webview僅切換高亮狀態(tài)，然后通知內(nèi)容區(qū)webview加載新的頁(yè)面，這樣就可以避免整體白屏現(xiàn)象。

接下來(lái)，我們重點(diǎn)講解能力擴(kuò)展和渲染加速兩個(gè)方面。

1、能力擴(kuò)展

HTML5可用API比原生App少很多，很多和系統(tǒng)設(shè)備相關(guān)的功能無(wú)法實(shí)現(xiàn)；wap2app底層基于HTML5 PLUS引擎，可以調(diào)用幾十萬(wàn)原生API，實(shí)現(xiàn)更強(qiáng)的推送、分享、支付、定位等系統(tǒng)能力，可實(shí)現(xiàn)和原生App一樣的功能要求。

wap2app中可調(diào)用的HTML5 PLUS API分兩個(gè)部分。

1.1常用的API – HTML5plus

包括二維碼、搖一搖、語(yǔ)音輸入、地圖、支付、分享、文件系統(tǒng)、通訊錄等常用API，封裝成跨平臺(tái)的HTML5plus規(guī)范，并將規(guī)范公開(kāi)于www.HTML5plus.org ，不做廠商私有API。HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟目前已經(jīng)成為工信部的下屬單位，而HTML5Plus規(guī)范也已經(jīng)成為行標(biāo)，并進(jìn)行了國(guó)標(biāo)立項(xiàng)。

1.2其他原生API – Native.js

原生API在iOS和Android上各自有40多萬(wàn)，有些API并不常用，而且不具有跨平臺(tái)特性，比如ios的game center api。太多的API封裝到HTML5plus里，會(huì)過(guò)多增加runtime的體積，但若有需求要使用這些api又很麻煩。

我們有一項(xiàng)突破性的技術(shù)來(lái)解決上述煩惱—Native.js，一種把40w原生API映射為JS API的技術(shù)。

1.3原生擴(kuò)展示例 - 分享

因HTML5能力限制，H5網(wǎng)站僅支持wap方式的分享，分享體驗(yàn)很糟糕，如下是一種典型實(shí)現(xiàn)（參考下方截圖）：

- 點(diǎn)擊微信分享后，顯示一個(gè)二維碼，用戶需要啟動(dòng)微信掃描二維碼，先在微信中打開(kāi)這篇文章，然后再通過(guò)微信右上角的菜單分享出去；分享路徑太長(zhǎng)，操作麻煩；

- 點(diǎn)擊微博分享，需要登錄微博wap站，完成授權(quán)后才能分享。

wap2app運(yùn)行在HTML5 PLUS 引擎下，是可以通過(guò)HTML5 PLUS的share模塊直接調(diào)起系統(tǒng)原生分享的，同樣場(chǎng)景，稍作改造，在wap2app環(huán)境下調(diào)用原生分享，則體驗(yàn)會(huì)大大改觀，如下為調(diào)用原生分享后的截圖：

很明顯，wap2app調(diào)起原生分享后，分享路徑更短、體驗(yàn)更好，更有利于內(nèi)容的分享傳播。

2、接下來(lái)講渲染加速

web頁(yè)面加載渲染速度相比原生App，有較大的體驗(yàn)差距，以至于在移動(dòng)設(shè)備上嚴(yán)重影響業(yè)務(wù)體驗(yàn)。造成這些體驗(yàn)差距的原因大致有如下幾個(gè)：

--渲染時(shí)機(jī)：web app需要等待服務(wù)端Document下載完成后才開(kāi)始啟動(dòng)渲染工作，無(wú)法提前分區(qū)域渲染；而原生App作為C/S結(jié)構(gòu)的應(yīng)用，僅向服務(wù)端請(qǐng)求業(yè)務(wù)數(shù)據(jù)，其它布局、樣式大多在本地，故可以在用戶觸發(fā)打開(kāi)新窗口時(shí)，立即渲染新窗口部分區(qū)域布局，服務(wù)端響應(yīng)數(shù)據(jù)后，再更新對(duì)應(yīng)區(qū)域的內(nèi)容；

--圖片資源請(qǐng)求時(shí)機(jī)：web app需要先下載Document，然后再根據(jù)Document中的<img>標(biāo)簽的src屬性去異步加載圖片資源，故在web app中總是先看到文字，然后再逐漸看到圖片；而原生App則無(wú)需任務(wù)等待，可以直接加載圖片資源，故原生App的圖片顯示會(huì)早于web app中的圖片顯示；

--業(yè)務(wù)數(shù)據(jù)請(qǐng)求時(shí)機(jī)：web app的實(shí)現(xiàn)若是前后端分離，則需要先下載封裝業(yè)務(wù)邏輯的js文件，下載完畢后，再由js發(fā)起ajax請(qǐng)求；而原生App，則大多將業(yè)務(wù)邏輯封裝在本地，無(wú)需等待下載js文件，可以更早的發(fā)起HTTP業(yè)務(wù)請(qǐng)求。

如何提升web頁(yè)面的渲染速度，很多公司都在嘗試，比如Google主導(dǎo)的AMP技術(shù)，以及國(guó)內(nèi)百度延伸的MIP技術(shù)，這類技術(shù)以閱讀類網(wǎng)頁(yè)加速為主，不適合JS交互復(fù)雜的場(chǎng)景，適用范圍有限。

DCloud在webview的基礎(chǔ)上，提出了subNView技術(shù)，這是一種更為通用、可增強(qiáng)任意web頁(yè)面渲染體驗(yàn)的方案。

2.1 subNView介紹

subNView，字面拆開(kāi)理解就是sub native view，有兩個(gè)核心點(diǎn)：

- native：subNView是一種原生繪制的View，和HTML5的DOM無(wú)關(guān)

- sub：subNView屬于webview的一部分，并不替代完整Webview。和所屬webview保持同樣的生命周期，跟隨webview的close、hide、zindex變化而變化。

subNView作為webview的子控件，一個(gè)webview可以包含多個(gè)subNView，一個(gè)subNView上可以繪制多個(gè)圖片（包括圖片輪播）、文字、區(qū)域、按鈕等。

subNView在保留HTML5優(yōu)勢(shì)的基礎(chǔ)上，利用原生View發(fā)揮原生渲染優(yōu)勢(shì)；當(dāng)用戶觸發(fā)窗口切換時(shí)，webview按照原有邏輯繼續(xù)加載Document，渲染頁(yè)面；但無(wú)需等待Document加載完成，可同時(shí)在原生View上提前完成如下工作：

- 繪制固定內(nèi)容區(qū)域，或可從前頁(yè)獲取數(shù)據(jù)的區(qū)域，例如固定地址圖片、購(gòu)物車按鈕等，而無(wú)需等待Document下載完畢后再去請(qǐng)求加載圖片

- 直接發(fā)起業(yè)務(wù)數(shù)據(jù)ajax請(qǐng)求，ajax響應(yīng)后直接在原生View上繪制數(shù)據(jù)，無(wú)需等待業(yè)務(wù)封裝的JS下載。

如下為一個(gè)使用subNView增強(qiáng)后的商品詳情頁(yè)示例：

從上圖可看出：

* webview按照原有邏輯，加載Document，渲染頁(yè)面，剛開(kāi)始內(nèi)容未加載時(shí)還是白屏（中間空白區(qū)域）

* webview同時(shí)創(chuàng)建了2個(gè)subNView作為webview的子控件

* subNView 1展示商品詳情輪播圖及商品價(jià)格，是通過(guò)ajax動(dòng)態(tài)獲取的；輪播圖片支持滑動(dòng)、點(diǎn)擊放大預(yù)覽，用戶可提前查看商品詳情

* subNView 2展示購(gòu)物車相關(guān)功能，屬于固定顯示內(nèi)容，可直接渲染

* 購(gòu)物車按鈕點(diǎn)擊后事件透?jìng)鹘oWebview里的購(gòu)物車按鈕，HTML頁(yè)面的所有邏輯，仍然復(fù)用。subNView只是簡(jiǎn)單的侵入動(dòng)畫(huà)渲染過(guò)程，不引發(fā)業(yè)務(wù)邏輯的重新編寫(xiě)。

如下是使用subNView加速后，頁(yè)面切換過(guò)程對(duì)比：

2.2如何使用subNView

開(kāi)發(fā)者可以通過(guò)webview的subNViews屬性創(chuàng)建或修改subNview控件，這里需要傳入復(fù)雜的json對(duì)象；為簡(jiǎn)化開(kāi)發(fā)，DCloud提供了NView模板技術(shù)。

NView模板類似于vue的single-file components(單文件組件)，HBuilder中新建NView模板文件，默認(rèn)代碼如下：

NView模板涉及模板標(biāo)簽、屬性、樣式定義、數(shù)據(jù)綁定等概念，詳細(xì)移步wap2app官網(wǎng)查看。

五、wap2app開(kāi)發(fā)方式

wap2app開(kāi)發(fā)簡(jiǎn)單，主要基于json文件快速配置，規(guī)則簡(jiǎn)單，學(xué)習(xí)成本低，工作量少；一個(gè)中等規(guī)模的M站，一個(gè)前端工程師4天左右就可以轉(zhuǎn)換完成。wap2app同時(shí)支持Javascript高級(jí)編程，可實(shí)現(xiàn)更為復(fù)雜的需求開(kāi)發(fā)。

在具體開(kāi)發(fā)過(guò)程中，wap2app涉及

1. wap2app本地端的工作：通過(guò)框架提供的sitemap文件，描述頁(yè)面關(guān)系和動(dòng)畫(huà)強(qiáng)化方案，以達(dá)到原生的窗體切換效果。當(dāng)sitemap.json配置無(wú)法滿足復(fù)雜需求時(shí)，可使用app.js編程進(jìn)行增強(qiáng)處理。

2. H5網(wǎng)站的改造工作：針對(duì)App運(yùn)行環(huán)境（UA不同），進(jìn)行適當(dāng)?shù)母脑?，包括去掉一些App里不應(yīng)該出現(xiàn)的頁(yè)面元素（如底部的電腦版鏈接，啟用原生導(dǎo)航條后需隱藏原來(lái)HTML5的DIV導(dǎo)航條）。

3. 如果需要調(diào)用DCloud的HTML5+擴(kuò)展能力，比如M站之前無(wú)法實(shí)現(xiàn)的微信分享、推送、原生支付，進(jìn)行必要的編程開(kāi)發(fā)，這部分工作可以在本地端實(shí)現(xiàn)，也可以在H5網(wǎng)站實(shí)現(xiàn)（需要區(qū)分是wap2app運(yùn)行環(huán)境）。

one more thing，wap2app 完全免費(fèi)！

更多信息，請(qǐng)移步wap2app官網(wǎng)：http://dcloud.io/wap2app.html 

以下問(wèn)題是來(lái)自51CTO開(kāi)發(fā)者社群小伙伴們的提問(wèn)和分享：

Q：web_何_南充：wap2app改造后可以直接上線流應(yīng)用嗎？

A：DCloud-崔老師：可以。

Q：無(wú)所謂：NView模板什么時(shí)候能在mui框架上？

A：DCloud-崔老師：一般是App開(kāi)發(fā)，基于C/S結(jié)構(gòu)的，html頁(yè)面在本地，渲染速度還是可以的，NView模板意義不大。

Q：義本無(wú)言：如果已用hbuilder開(kāi)發(fā)完成的app能快速逆向轉(zhuǎn)到wap么？

A：DCloud-崔老師：DCloud給開(kāi)發(fā)者提供了2種開(kāi)發(fā)模式：

1. 從頭開(kāi)發(fā)，使用mui框架，開(kāi)發(fā)一次，app和wap站都有了；

2. 已有wap站，則使用wap2app框架，把wap站強(qiáng)化為app。

Q：義本無(wú)言：這個(gè)適用場(chǎng)景是  wap還沒(méi)有然后用咱們的開(kāi)發(fā)工具開(kāi)發(fā)  然后可以快速的轉(zhuǎn)換成app項(xiàng)目  如果已經(jīng)開(kāi)發(fā)完成的wap項(xiàng)目是不是就不適用了呢 或者說(shuō)適用是不是工作量會(huì)很大。

A：DCloud-崔老師：wap、App都沒(méi)有，建議使用mui，一次開(kāi)發(fā)，多端發(fā)布

wap已經(jīng)有了，沒(méi)有App，建議使用wap2app快速發(fā)布成App。

Q：義本無(wú)言： mui和 wap2app  哪個(gè)的效果流暢度***呢？

A：DCloud-崔老師：看你目前的階段，好好優(yōu)化，都會(huì)有不錯(cuò)的體驗(yàn)?？梢詮膆ttp://liuyingyong.cn/ 

下載流應(yīng)用管理器，其中唯品會(huì)、大眾點(diǎn)評(píng)、手機(jī)京東都是基于wap2app實(shí)現(xiàn)的，大家可以體驗(yàn)一下流暢度。

Q：義本無(wú)言：?jiǎn)栴}是我使用的mui + h5+ 開(kāi)發(fā)的app  然后轉(zhuǎn)wap  但是wap中h5+ 的內(nèi)容不支持呀

A：DCloud-崔老師：如果要調(diào)用5+ 的代碼，就需要注意區(qū)分平臺(tái)了，判斷是5+環(huán)境下再調(diào)用，瀏覽器模式下就降級(jí)或隱藏該功能

Q：php-互聯(lián)網(wǎng)+-上海：崔老師您好，我有2個(gè)問(wèn)題：

問(wèn)題1：

催老師上文說(shuō)到：“窗口動(dòng)畫(huà)：wap2app底層攔截頁(yè)面跳轉(zhuǎn)，新頁(yè)面使用新的webview加載”

說(shuō)的是 自動(dòng)攔截了所有的 a 標(biāo)簽的 href 跳轉(zhuǎn)嗎 還是需要特殊的配置？

問(wèn)題2：

打包后的APK，經(jīng)過(guò)解壓，能看到所有的html/css/js 等前端文件，很容易泄密或者被盜用，請(qǐng)問(wèn)后續(xù)的升級(jí)中 ，有沒(méi)有考慮防范措施？

A：DCloud-崔老師：wap2app底層會(huì)攔截location.href跳轉(zhuǎn)，不管是a標(biāo)簽的點(diǎn)擊跳轉(zhuǎn)，還是js的跳轉(zhuǎn)。目前打包時(shí)有加密選項(xiàng)，

Q1：web_何_南充：那想新做一套移動(dòng)端系統(tǒng)，覆蓋webapp，流應(yīng)用，微信公眾號(hào)頁(yè)面，安卓，IOS，即一次開(kāi)發(fā)，5次發(fā)布，應(yīng)該用什么技術(shù)？

Q2：開(kāi)發(fā)-sanbor ：wap2app 只能在流應(yīng)用中使用咯?

A：DCloud-崔老師：目前支持將wap2app項(xiàng)目打包成原生安裝包（iOS平臺(tái)的ipa安裝包、Android平臺(tái)的apk安裝包），也支持發(fā)布到流應(yīng)用平臺(tái)。

Q：陳永松-信陽(yáng)：我想實(shí)現(xiàn)登錄后判斷不同的權(quán)限，從而顯示不同的底部選項(xiàng)卡，能做到不？

A：DCloud-崔老師：這個(gè)需求準(zhǔn)確描述就是二級(jí)頁(yè)面的選項(xiàng)卡優(yōu)化，后續(xù)會(huì)支持。

Q：廣州-前端-黃小文：mui可以做wap站？不是做app的么？

A：DCloud-崔老師： mui支持多端發(fā)布，通過(guò)構(gòu)建工具可以發(fā)布到不同平臺(tái)。

Q：廣州-前端-黃小文：MUI多端發(fā)布不是指ios和安卓么？wap站也能做？mui支持做wap的M站？

A：DCloud-崔老師：你手機(jī)瀏覽器或微信訪問(wèn)：http://dcloud.io/hellomui/ 

這個(gè)代碼其實(shí)和ios和安卓的hello mui一套代碼。

Q:大數(shù)據(jù)-ta-北京：想跑wap2app應(yīng)用, 還必須安裝插件, 不知道的用戶還以為進(jìn)了釣魚(yú)網(wǎng)站. 這不好吧..

A：DCloud-崔老師：安裝什么插件？目前很多互聯(lián)網(wǎng)公司的流應(yīng)用是基于wap2app實(shí)現(xiàn)的，所以需要安裝流應(yīng)用管理器才能體驗(yàn)；但也已經(jīng)由很多創(chuàng)業(yè)者自己實(shí)現(xiàn)的wap2app項(xiàng)目，打包成了apk/ipa，無(wú)需安裝任何插件，可以直接安裝到手機(jī)上運(yùn)行。

Q：php-互聯(lián)網(wǎng)+-上海：咱們底層是否對(duì)mui做過(guò)特別的支持？如果用其他前端框架比如bootstrap，或者自己原生寫(xiě)的效果，是否意味著不如用mui渲染的更快？

A：DCloud-崔老師：目前沒(méi)有私有支持，mui的特點(diǎn)是輕量、原生UI、多端發(fā)布。開(kāi)發(fā)者也可以使用其它的UI庫(kù)。

Q：PHP-揚(yáng)-廈門(mén)：一些使用前端框架如vue,angular等做的單頁(yè)面或非單頁(yè)面能否使用wap2app轉(zhuǎn)換？

A：DCloud-崔老師：wap2app目前主要MPA做了優(yōu)化，SPA模式效果不明顯，不推薦。

Q：開(kāi)啟網(wǎng)絡(luò)-李生：因現(xiàn)有的wap站有多個(gè)頭部，wap2app是否支持原生頭部多個(gè)樣式，然后原生頭部有“購(gòu)物車”按鈕，當(dāng)購(gòu)買車?yán)镉猩唐窌r(shí)，會(huì)顯示個(gè)紅點(diǎn)，現(xiàn)在是不是可以實(shí)現(xiàn)的？

A：DCloud-崔老師：可以自定義繪制導(dǎo)航欄，通過(guò)plus.webview.WebviewObject.getTitleNView獲得導(dǎo)航view，然后自己繪制。

Q：php-靈感-宿遷：聊天這塊,比如人才網(wǎng),能獲取到網(wǎng)頁(yè)的 企業(yè)id嗎？這樣就能聊天了。MPA是啥？SPA是啥？

A：DCloud-崔老師：SPA：single page application

Q1：軟賤攻城獅：其實(shí)我對(duì)這塊一直有個(gè)問(wèn)題，一些wap網(wǎng)站是用了前端模板的比如jstl,vue,或者jfinal的enjoy，dcloud這個(gè)wap2app也能轉(zhuǎn)？

Q2：前端-廣州： 1. 從頭開(kāi)發(fā)，使用mui框架，開(kāi)發(fā)一次，app和wap站都有了；這是怎樣做的呢？

A：DCloud-崔老師：http://dcloud.io/mui.html建議先了解一下mui的基礎(chǔ)。舉個(gè)例子：mui.openWindow()在App中是打開(kāi)新webview，瀏覽器下降級(jí)執(zhí)行l(wèi)ocation.href跳轉(zhuǎn)

Q：前端-廣州：已經(jīng)用mui做了app,但現(xiàn)在要將app轉(zhuǎn)wap用于嵌入第三方的app中，如何用mui去實(shí)現(xiàn)？目前不清楚第三方app使用什么框架。app頁(yè)面打開(kāi)不是用了原生底層去實(shí)現(xiàn)的嗎？

A1：DCloud-崔老師：直接把你開(kāi)發(fā)的app代碼部署到服務(wù)器上，然后使用瀏覽器訪問(wèn)一下，看是否有兼容問(wèn)題，沒(méi)問(wèn)題就直接用了。

舉個(gè)例子：mui.openWindow()在App中是打開(kāi)新webview，瀏覽器下降級(jí)執(zhí)行l(wèi)ocation.href跳轉(zhuǎn)

A2：移動(dòng)-小雨-北京：普通瀏覽器不支持5+runtime，需要將用到plus相關(guān)API的部分，做一下處理。我之前搞過(guò)類似的，不過(guò)比較簡(jiǎn)單。比如跳轉(zhuǎn)，如果用mui.openWindow的話就不用處理。如果分享用的是原生的，那就得自己注冊(cè)h5版的，對(duì)不同環(huán)境做下兼容。

Q：北京-unicorn-數(shù)據(jù)：HBuilder、 wap2app 商用的話收費(fèi)么？ 是否有 與 GraphQL 結(jié)合的案例？

A：DCloud-崔老師：免費(fèi)，不收費(fèi)。目前我已知的，還沒(méi)有結(jié)合案例。

Q：php-縱橫-秦皇島：我感覺(jué)hb***的問(wèn)題是沒(méi)有html css的混淆，直接原生代碼泄漏了

A：DCloud-崔老師：目前僅支持js加密，不支持html、css加密，不過(guò)業(yè)務(wù)邏輯也應(yīng)該抽離寫(xiě)在js中。

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】