原文：http://blog.csdn.net/uikoo9/article/details/43485899
前言
看了前面兩篇內容是否有點躍躍欲試了？
下面就開始一個簡答的例子，以及mui相關內容
mui
官網：http://dcloudio.github.io/mui/
說明：希望你可以把官網內容通讀一遍，這是以後開發的基礎
開始
新建項目
在首頁點擊新建移動App，如下：
或者在項目管理器內右鍵新建，或者快捷鍵ctrl+n+a
選擇模版
這裏選擇mui項目，會自動引入mui的js和css，如下：
文件結構
默認有以下幾個文件夾：css，fonts，js，如下：
簡單開發
header
打開index.html後在body內輸入mh後回車，如下：
body
同樣輸入mbo後回車
list
在mbody中添加一些列表
最後的代碼
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title></title>
- <script src="js/mui.min.js"></script>
- <link href="css/mui.min.css" rel="stylesheet"/>
- <script type="text/javascript" charset="utf-8">
- mui.init();
- </script>
- </head>
- <body>
- <header class="mui-bar mui-bar-nav">
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
- <h1 class="mui-title">我的標題</h1>
- </header>
- <div class="mui-content">
- <ul class="mui-table-view" id="my_task_list">
- <li class="mui-table-view-cell">
- <div class="mui-slider-right mui-disabled">
- <a class="mui-btn mui-btn-red">刪除</a>
- </div>
- <div class="mui-slider-handle">
- 待辦事項1
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-slider-right mui-disabled">
- <a class="mui-btn mui-btn-red">刪除</a>
- </div>
- <div class="mui-slider-handle">
- 待辦事項2
- </div>
- </li>
- </ul>
- </div>
- </body>
- </html>
調試（android爲例）
連接手機
首先需要連接手機
運行
選擇運行——手機運行——在xx設備上運行
或者使用快捷鍵ctrl+r
效果
現在你就可以在手機上看效果了
注意
需要開啓開發者模式
打包
dcloud證書打包
選擇發行——App打包——選擇android以及dcloud公用證書，如下：
參數配置
可能有時候會提示參數配置錯誤，這是你需要打開項目下manifest.json文件，並去掉第三方插件，如下：
等待
返回上一步的發行打包，點擊打包後會提示你已經到雲端打包，你只需要等待了，
一小會之後就打包好了，這時你就可以把apk拷貝到自己手機使用了，
