HTML5+開發移動app教程3-mui開發樣本，html53-mui
前言
看了前面兩篇內容是否有點躍躍欲試了？
下面就開始一個簡答的例子，以及mui相關內容
官網：http://dcloudio.github.io/mui/
說明：希望你可以把官網內容通讀一遍，這是以後開發的基礎
在首頁點擊建立移動App，如下：
或者在專案管理器內右鍵建立，或者快速鍵ctrl+n+a
選擇模版這裡選擇mui項目，會自動引入mui的js和css，如下：
預設有以下幾個檔案夾：css，fonts，js，如下：
開啟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>
首先需要串連手機
運行選擇運行——手機運行——在xx裝置上運行
或者使用快速鍵ctrl+r
效果現在你就可以在手機上看效果了
注意需要開啟開發人員模式
選擇發行——App打包——選擇android以及dcloud公用認證，如下：
可能有時候會提示參數配置錯誤，這是你需要開啟項目下manifest.json檔案，並去掉第三方外掛程式，如下：
等待返回上一步的發行打包，點擊打包後會提示你已經到雲端打包，你只需要等待了，
一小會之後就打包好了，這時你就可以把apk拷貝到自己手機使用了，
更多文章請訪問：http://uikoo9.com/blog/list
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
