碼上快樂

相關內容    簡體    繁體

基於MUI框架+HTML5PLUS 開發 iOS和Android 應用程序(APP)

本文轉載自   查看原文   2019-10-21 21:24   729 

目錄

事前准備

# 軟件
HBuilder X   Web開發IDE 下載地址:https://www.dcloud.io/hbuilderx.html
        
MUI  前端框架(移動端)    使用文檔:https://dev.dcloud.net.cn/mui/ui/#icon
What is Mui：
    - 移動端布局框架 made in China
    - 模擬移動App,HTML布局框架
    - Css+javascript 模擬出動態效果 CPU瞬時損耗嚴重(以現在手機的性能可以流暢運行)

Mui + HBuilderX 
30+ <50+ 按鍵可以構建出頁面 - HBuilderX 代碼塊        
        
HTML5 plus  		   API參考 https://www.html5plus.org/doc/h5p.html    
移動設備硬件驅動調用 - 震動器 攝像頭 閃光燈 揚聲器 麥克風 藍牙 紅外
Android,iOS系統調用 - 相冊 通訊錄 打電話 短信 彩信 電子郵件 鬧鍾 日歷    
    
# 硬件
電腦 + iOS或Android系統的手機與數據線

創建項目

# 我這里使用的是安卓系統的手機
手機打開usb調試功能,用數據線連接到電腦 (不會打開usb調試,請自行百度)


# 現在就可以,用手機查看 MUI框架 提供的前端組件

利用MUI寫一個簡單的頁面

#新手指南: https://dev.dcloud.net.cn/mui/getting-started/
#使用文檔: https://dev.dcloud.net.cn/mui/ui/#icon
#HTML5 PLUS 手機硬件調用參考 https://www.html5plus.org/doc/h5p.html#
新建一個MUI項目

mdo --> mDoctype(mui-dom結構)

mh -->  mHeader(標題欄)

mb -->  mBody(主體 里面放內容) 

mt -->  mTab(底部選項卡)

效果展示

<!--html代碼-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<!--修改href路徑-->
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">新聞快車</h1>
		</header>
		<div class="mui-content">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item mui-active">
						推薦
					</a>
					<a class="mui-control-item">
						熱點
					</a>
					<a class="mui-control-item">
						北京
					</a>
					<a class="mui-control-item">
						社會
					</a>
					<a class="mui-control-item">
						娛樂
					</a>
					<a class="mui-control-item">
						科技
					</a>
				</div>
			</div>
			<div class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item"><a href="#">無錫高架橋側翻事故已致3死2傷 更多詳情披露<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3494285628,4161714532&fm=179&app=42&f=JPEG?w=320&h=160&s=CEC004C65854345346E1C43403008052" /></a></div>
					<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
					<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
					<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
				</div>
			</div>

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/c995d143ad4bd11312601aa13bb4370a4afb0590.jpeg?token=afd7e0689766caee13abd75166b49f62&s=D79213C100438B470420ED15030050D3">
						<div class="mui-media-body">
							首次公開！中國火星探測器.
							<p class="mui-ellipsis">中國火星探測器“真容”曝光，個頭巨大</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/3812b31bb051f819e8d23907264ad8e82c73e788.png?token=cd10305cdc186424b0940c70e14f3887&s=ACD0C3035B022A4B76F955B403008084">
						<div class="mui-media-body">
							無錫高架橋垮塌9小時
							<p class="mui-ellipsis">無錫高架橋垮塌9小時：值班熱線表示不知詳情 官方微博只字未提</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="https://pics2.baidu.com/feed/c9fcc3cec3fdfc03fc738ac4bb4a1491a4c22639.jpeg?token=f3d326f873b2869049c04fa827efeaca&s=E4A0F058DEA04317981765DF0300D09B">
						<div class="mui-media-body">
							日本緊張備戰強台風
							<p class="mui-ellipsis">日本緊張備戰強台風：電車停運商場關門 膠布賣斷貨.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/c995d143ad4bd11312601aa13bb4370a4afb0590.jpeg?token=afd7e0689766caee13abd75166b49f62&s=D79213C100438B470420ED15030050D3">
						<div class="mui-media-body">
							首次公開！中國火星探測器.
							<p class="mui-ellipsis">中國火星探測器“真容”曝光，個頭巨大</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/3812b31bb051f819e8d23907264ad8e82c73e788.png?token=cd10305cdc186424b0940c70e14f3887&s=ACD0C3035B022A4B76F955B403008084">
						<div class="mui-media-body">
							無錫高架橋垮塌9小時
							<p class="mui-ellipsis">無錫高架橋垮塌9小時：值班熱線表示不知詳情 官方微博只字未提</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/c995d143ad4bd11312601aa13bb4370a4afb0590.jpeg?token=afd7e0689766caee13abd75166b49f62&s=D79213C100438B470420ED15030050D3">
						<div class="mui-media-body">
							首次公開！中國火星探測器.
							<p class="mui-ellipsis">中國火星探測器“真容”曝光，個頭巨大</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/3812b31bb051f819e8d23907264ad8e82c73e788.png?token=cd10305cdc186424b0940c70e14f3887&s=ACD0C3035B022A4B76F955B403008084">
						<div class="mui-media-body">
							無錫高架橋垮塌9小時
							<p class="mui-ellipsis">無錫高架橋垮塌9小時：值班熱線表示不知詳情 官方微博只字未提</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
			</ul>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首頁</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-tab-label">視頻</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-tab-label">段子</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<!--修改src路徑-->
		<script type="text/javascript">
			mui.init()
		</script>
	</body>
</html>

<--簡單的參考,使用文檔做了一個手機端的靜態頁面 效果如下圖-->


關於如何使用mui,及頁面之間的傳參調用直接參考官方文檔.
https://dev.dcloud.net.cn/mui/ui/#icon
后台小型項目推薦使用Flask輕量級框架

關於文件打包

演示app:點擊下載

作 者： 郭楷豐
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角 【推薦】一下。您的鼓勵是博主的最大動力！
自 勉：生活，需要追求；夢想，需要堅持；生命，需要珍惜；但人生的路上，更需要堅強。 帶着感恩的心啟程，學會愛，愛父母，愛自己，愛朋友，愛他人。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 基於Html5 Plus + Vue + Mui 移動App 開發（二） 如何開發Android Wear應用程序 Android開發5：應用程序窗口小部件App Widgets的實現 vue+mui+html5+ plus開發的混合應用底部導航的顯示與隱藏 用HTML5/CSS3/JS開發Android/IOS應用框架大全 Android開發之 Android應用程序目錄結構解析 使用Visual Studio開發跨平台的iOS應用程序 IOS開發 應用程序圖標數字角標 Android應用程序MVC框架實例分析 Html5plus+vue 返回鍵退出應用程序的處理
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM