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拷貝到自己手機使用了,