Dcloud開發webApp踩過的坑

Dcloud開發webApp踩過的坑

1、總結

一句話總結：HTML5+擴展了JavaScript對象plus，使得js能夠調用各類瀏覽器沒法實現或實現不佳的系統能力，設備能力如攝像頭、陀螺儀、文件系統等，業務能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。其實我只要把js拿到手，就能夠很方便用在手機開發的網站上面了。

 

一、Dcloud能夠作mobile web項目麼？

能夠，並且感受會比瀏覽器多調用點api

但這就是一個普通的web項目，b/s方式，不可脫線運行，不能調用HTML5Plus的增長api。

其實感受可以把dcloud裏面訪問原生應用的js代碼拿到手，那麼web項目一樣具備了這樣的功能。

 

 

2、Dcloud開發webApp踩過的坑

使用dcloud開發webApp有一段時間了，其中也踩了很多坑，如今總結一些（mui.js版本號，V2.9.0）。

 

1，app啓動後選擇進入那個頁面。

能夠在manifest.json中設置頁面入口，一般設置爲index.html.但有時須要根據業務須要進入其餘頁面。應用場景：根據用戶登陸狀態來選擇進入不一樣的頁面，若是用戶已經登陸，則進入index.html頁面。若是用戶沒有登陸，則進入登陸頁面。

mui.plusReady(function(){

var  CurrentWebview=plus.webview.currentWebview();

if(!logined){

 CurrentWebview.loadURL（"login.html"）;

}

});   最開始嘗試這樣寫，可是效果並很差。後改爲 if(!loggined){

      window.location.href="login.html"; 

      }.達到了預期效果。爲了更加明顯，能夠在啓動設置裏面，設置延時1秒啓動。

 

2，在使用mui彈窗時，若是想自定義樣式，須要使用div模式，即便用h5模式的對話框，能夠對mui.css進行樣式覆蓋。

mui.confirm(str_audit,title, btnArray, function(e) {}，「div」);

 

3，使用mui彈窗時，在彈窗上面滑動，彈窗下面的內容也跟着滾動。

解決辦法，

function setStopContentScroll(){
$("body,html").css({"overflow":"hidden"});
}
function setContentScroll(){
$("body,html").css({
"overflow-y":"scroll",
"overflow-x":"hidden"
});
}

當彈窗出現時，setStopContentScroll().彈窗關閉時，setContentScroll().

 

4，彈窗出現時，禁用手機返回鍵。

 mui.back=function(){

    return false;

 }

當彈窗關閉時，從新設置mui.back爲

     mui.back=function(){

             var currentWebviwe=plus.webview.currentWebview();

             plus.webview.close(currentWebviwe);

        }

 

5，使用miui.closePopup()能夠關閉當前打開的彈窗。使用mui.closePopups()能夠關閉多有對話框。

 

6，mui頁面默認側滑返回。能夠禁止此功能。

var cv=plus.webview.currentWebview();

cv.setStyle({'popGesture':'none'})

 

 

3、dcloud從入門到入坑

dcloud從入門到入坑

 

1、簡介

dcloud是一個webapp雲打包平臺，你能夠經過他擴展你的網頁功能
官方叫他們的產品名字爲

HTML5 Plus移動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App能夠經過擴展的JS API任意調用手機的原生能力，實現與原生App一樣強大的功能和性能。

 

嗯，是一種基於HTML、JS、CSS編寫的運行於手機端的App，那麼具體是怎麼作的呢？
繼續看文檔

HTML5+擴展了JavaScript對象plus，使得js能夠調用各類瀏覽器沒法實現或實現不佳的系統能力，設備能力如攝像頭、陀螺儀、文件系統等，業務能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。

 

擴展了一個plus對象啊，就是說能夠經過dcloud實現的plus對象來調用原生api。
可是dcloud並非把全部的原生api都封裝到時plus對象中。
dcloud把api分爲兩部分

 

1.HTML5Plus規範

經常使用的擴展能力，好比二維碼、語音輸入，都封裝到了規範中，同時實現了Android和iOS的解析引擎，使得開發者的代碼編寫一次，可跨平臺運行。只要調用plus.對象(html5plus規範的對象，詳細請看文檔)
html5plus是常見的原生api，並非全部的原生api，原生的api太多了。可是dcloud也能夠調用其餘api，就是第二部分

2.natave.js

Native.js把幾十萬原生API映射成了js對象，經過js能夠直接調ios和android的原生API。這部分就再也不跨平臺，寫法分別是plus.ios和plus.android，好比調ios game center，或在android手機桌面建立快捷方式，這些都是平臺專有的api。Native.js把幾十萬原生API映射成了js對象，經過js能夠直接調ios和android的原生API。這部分就再也不跨平臺，寫法分別是plus.ios和plus.android，好比調ios game center，或在android手機桌面建立快捷方式，這些都是平臺專有的api。

 

2、5+ App概念解析

首先開發者須要清楚你要作什麼，是一個mobile web項目，運行裏瀏覽器裏？仍是要作一個app，安裝和運行在手機上？或者要把一個mobile web項目打包成app？

1. 作一個mobile web項目

 

在這個模式下，開發者用不到HTML5Plus，使用標準的HTML5語法，運行在瀏覽器裏。這不算5+ App。 此時開發者仍然可使用HBuilder這個開發工具，新建項目時選擇web項目。 開發者也仍然能夠使用DCloud提供的mui開源框架，來簡化ui的開發。 但這就是一個普通的web項目，b/s方式，不可脫線運行，不能調用HTML5Plus的增長api。

 

2. 作一個正統的app

 

傳統意義上的app，是c/s方式的，它的程序要安裝和運行在手機上，不經過瀏覽器在線下載。 此時開發者在HBuilder裏新建項目時，選擇「移動App」。 在移動App項目下編寫的HTML、js等文件，是會被打包到原生的安裝包（Android是apk包、iOS是ipa包）裏的。 此時本地的js和服務器經過ajax交互，由服務器按接口方式給出數據（通常是json），而後客戶端的js文件解析json，並根據本地的業務邏輯來渲染頁面和執行功能。 因此請不要新建一個移動App項目，而後把原本運行在服務器端的php等文件也都丟到這個項目下。 web項目始終是web項目，哪怕要在app項目裏某個界面裏，在線加載一個遠程的網頁，也要把這個遠程網頁的代碼，放到web項目下。 移動App項目下，只有能有html、js、css、json以及一些圖片或數據文件，不能包括php、jsp、py等服務器頁面。

 

3. 使用wap2app打包mobile web項目爲app

 

若是開發者想把一個作好的mobile web站，方便快速的打包成app，那麼要使用DCloud的wap2app框架。 在HBuilder中新建項目時，選wap2app項目，把mobile web站的url輸入進去，參考框架的教程來配置。 wap2app不一樣於普通的web打包技術，wap2app可真正作達到原生應用的功能和性能體驗。 具體教程另見：文檔中心-wap2app，http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244 wap2app屬於5+app，它底層也是強大的HTML5Plus規範和Native.js在支撐。 wap2app項目下的全部文件，也都是打包在本機運行的。 4. 若是你想開發一次，全端覆蓋，那麼須要使用mui框架 具體參考：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/591

官方入門 我拿dcloud都是用來把vue打包後的文件，放到dcloud進行打包，作一些原生api處理，如返回按紐啥的。代碼都寫在index.html裏