HBuilder完成webApp入門（2）

標籤：uil   包含   電腦   .net   htm   接下來   dev   為什麼   高效能   

一、HBuilder的：http://www.dcloud.io/，點擊那個“DownLoad”就可以 了

二、假設一切順利，啟動HBuilder後，大家會看到如下的介面

點擊建立移動APP：

接下來就會彈出一個選擇模板的對話方塊：

 

預設的模板選項是“空模板”。不包含任何的HBuilder提供的畫面組件，要選擇“mui項目”。它包含了 mui (預設提供的畫面組件，也就是CSS 和 Javascript)。

是不是不知道MUI是什麼了（簡單介紹一下：最接近原生APP體驗的高效能前端架構 具體內容見http://dev.dcloud.net.cn/mui/

在起個項目名字就ok啦。

三、簡介一下工具類

    建好工程以後左側邊欄會顯示一些檔案，如下所示：

   

其中index.html 是入口檔案。 css 是樣式表目錄，fonts 是字型目錄， js 是 javascript目錄，這三個目錄是 mui 內建的。

manifest.json 是設定檔，也就是你的APP的設定檔，例如入口檔案的指定，表徵圖的指定。

四、串連手機啟動APP

     將手機串連到電腦，開啟開發人員選項。

    然後點擊上邊工具列的：

接下來就可以看到手機上運行了你的APP。當然，因為什麼也沒有，畫面是一片空白。如果手機連結不上，請查看：http://ask.dcloud.net.cn/docs#http://ask.dcloud.net.cn/article/97

到此為止，我們已經可以在手機上運行APP了，走出了第一步。

 

HBuilder完成webApp入門（2）