首頁 > 開發者 > 手機程式開發

HTML5+開發移動app教程3-mui開發樣本

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

下面就開始一個簡答的例子，以及mui相關內容

 

mui

官網：http://dcloudio.github.io/mui/

說明：http://dev.dcloud.net.cn/mui/ui/index.html#accordion

 

開始建立項目

在首頁點擊建立移動App，如下：

或者在專案管理器內右鍵建立，或者快速鍵ctrl+n+a

選擇模版

這裡選擇mui項目，會自動引入mui的js和css，如下：

檔案結構

預設有以下幾個檔案夾：css，fonts，js，如下：

 

簡單開發header

開啟index.html後在body內輸入mh後斷行符號，如下：

body

同樣輸入mbo後斷行符號

list

在mbody中添加一些列表

最後的代碼 [html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
  6.     <title></title>  
  7.     <script src="js/mui.min.js"></script>  
  8.     <link href="css/mui.min.css" rel="stylesheet"/>  
  9.     <script type="text/javascript" charset="utf-8">  
  10.         mui.init();  
  11.     </script>  
  12. </head>  
  13. <body>  
  14.     <header class="mui-bar mui-bar-nav">  
  15.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
  16.         <h1 class="mui-title">我的標題</h1>  
  17.     </header>  
  18.     <div class="mui-content">  
  19.         <ul class="mui-table-view" id="my_task_list">  
  20.             <li class="mui-table-view-cell">  
  21.                 <div class="mui-slider-right mui-disabled">  
  22.                     <a class="mui-btn mui-btn-red">刪除</a>  
  23.                 </div>  
  24.                 <div class="mui-slider-handle">  
  25.                     待辦事項1  
  26.                 </div>  
  27.             </li>  
  28.             <li class="mui-table-view-cell">  
  29.                 <div class="mui-slider-right mui-disabled">  
  30.                     <a class="mui-btn mui-btn-red">刪除</a>  
  31.                 </div>  
  32.                 <div class="mui-slider-handle">  
  33.                     待辦事項2  
  34.                 </div>  
  35.             </li>  
  36.         </ul>  
  37.     </div>  
  38. </body>  
  39. </html>  

 

調試（android為例）串連手機

首先需要串連手機

運行

選擇運行——手機運行——在xx裝置上運行

或者使用快速鍵ctrl+r

效果

現在你就可以在手機上看效果了

注意

需要開啟開發人員模式

 

打包dcloud認證打包

選擇發行——App打包——選擇Android以及dcloud公用認證，如下：

參數配置

可能有時候會提示參數配置錯誤，這是你需要開啟項目下manifest.json檔案，並去掉第三方外掛程式，如下：

等待

返回上一步的發行打包，點擊打包後會提示你已經到雲端打包，你只需要等待了，

一小會之後就打包好了，這時你就可以把apk拷貝到自己手機使用了，

 

HTML5+開發移動app教程3-mui開發樣本

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More