事前准备

  1. # 软件
  2. HBuilder X   Web开发IDE 下载地址:https://www.dcloud.io/hbuilderx.html
  4. MUI  前端框架(移动端)    使用文档:https://dev.dcloud.net.cn/mui/ui/#icon
  5. What is Mui：
  6.     - 移动端布局框架 made in China
  7.     - 模拟移动App,HTML布局框架
  8.     - Css+javascript 模拟出动态效果 CPU瞬时损耗严重(以现在手机的性能可以流畅运行)
  10. Mui + HBuilderX
  11. 30+ <50+ 按键可以构建出页面 - HBuilderX 代码块        
  13. HTML5 plus  		   API参考 https://www.html5plus.org/doc/h5p.html
  14. 移动设备硬件驱动调用 - 震动器 摄像头 闪光灯 扬声器 麦克风 蓝牙 红外
  15. Android,iOS系统调用 - 相册 通讯录 打电话 短信 彩信 电子邮件 闹钟 日历    
  17. # 硬件
  18. 电脑 + iOS或Android系统的手机与数据线

创建项目

  1. # 我这里使用的是安卓系统的手机
  2. 手机打开usb调试功能,用数据线连接到电脑 (不会打开usb调试,请自行百度)

  1. # 现在就可以,用手机查看 MUI框架 提供的前端组件

利用MUI写一个简单的页面

  1. #新手指南: https://dev.dcloud.net.cn/mui/getting-started/
  2. #使用文档: https://dev.dcloud.net.cn/mui/ui/#icon
  3. #HTML5 PLUS 手机硬件调用参考 https://www.html5plus.org/doc/h5p.html#
  4. 新建一个MUI项目
  6. mdo --> mDoctype(mui-dom结构)
  8. mh -->  mHeader(标题栏)
  10. mb -->  mBody(主体 里面放内容) 
  12. mt -->  mTab(底部选项卡)

效果展示

  1. <!--html代码-->
  2. <!doctype html>
  3. <html lang="en">
  4. 	<head>
  5. 		<meta charset="UTF-8" />
  6. 		<title>Document</title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link rel="stylesheet" type="text/css" href="css/mui.css" />
  9. 		<!--修改href路径-->
  10. 	</head>
  11. 	<body>
  12. 		<header class="mui-bar mui-bar-nav">
  13. 			<h1 class="mui-title">新闻快车</h1>
  14. 		</header>
  15. 		<div class="mui-content">
  16. 			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
  17. 				<div class="mui-scroll">
  18. 					<a class="mui-control-item mui-active">
  19. 						推荐
  20. 					</a>
  21. 					<a class="mui-control-item">
  22. 						热点
  23. 					</a>
  24. 					<a class="mui-control-item">
  25. 						北京
  26. 					</a>
  27. 					<a class="mui-control-item">
  28. 						社会
  29. 					</a>
  30. 					<a class="mui-control-item">
  31. 						娱乐
  32. 					</a>
  33. 					<a class="mui-control-item">
  34. 						科技
  35. 					</a>
  36. 				</div>
  37. 			</div>
  38. 			<div class="mui-slider">
  39. 				<div class="mui-slider-group">
  40. 					<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>
  41. 					<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
  42. 					<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
  43. 					<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  44. 				</div>
  45. 			</div>
  47. 			<ul class="mui-table-view">
  48. 				<li class="mui-table-view-cell mui-media">
  49. 					<a href="javascript:;">
  50. 						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/c995d143ad4bd11312601aa13bb4370a4afb0590.jpeg?token=afd7e0689766caee13abd75166b49f62&s=D79213C100438B470420ED15030050D3">
  51. 						<div class="mui-media-body">
  52. 							首次公开！中国火星探测器.
  53. 							<p class="mui-ellipsis">中国火星探测器“真容”曝光，个头巨大</p>
  54. 						</div>
  55. 					</a>
  56. 				</li>
  57. 				<li class="mui-table-view-cell mui-media">
  58. 					<a href="javascript:;">
  59. 						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/3812b31bb051f819e8d23907264ad8e82c73e788.png?token=cd10305cdc186424b0940c70e14f3887&s=ACD0C3035B022A4B76F955B403008084">
  60. 						<div class="mui-media-body">
  61. 							无锡高架桥垮塌9小时
  62. 							<p class="mui-ellipsis">无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提</p>
  63. 						</div>
  64. 					</a>
  65. 				</li>
  66. 				<li class="mui-table-view-cell mui-media">
  67. 					<a href="javascript:;">
  68. 						<img class="mui-media-object mui-pull-right" src="https://pics2.baidu.com/feed/c9fcc3cec3fdfc03fc738ac4bb4a1491a4c22639.jpeg?token=f3d326f873b2869049c04fa827efeaca&s=E4A0F058DEA04317981765DF0300D09B">
  69. 						<div class="mui-media-body">
  70. 							日本紧张备战强台风
  71. 							<p class="mui-ellipsis">日本紧张备战强台风：电车停运商场关门 胶布卖断货.</p>
  72. 						</div>
  73. 					</a>
  74. 				</li>
  75. 				<li class="mui-table-view-cell mui-media">
  76. 					<a href="javascript:;">
  77. 						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/c995d143ad4bd11312601aa13bb4370a4afb0590.jpeg?token=afd7e0689766caee13abd75166b49f62&s=D79213C100438B470420ED15030050D3">
  78. 						<div class="mui-media-body">
  79. 							首次公开！中国火星探测器.
  80. 							<p class="mui-ellipsis">中国火星探测器“真容”曝光，个头巨大</p>
  81. 						</div>
  82. 					</a>
  83. 				</li>
  84. 				<li class="mui-table-view-cell mui-media">
  85. 					<a href="javascript:;">
  86. 						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/3812b31bb051f819e8d23907264ad8e82c73e788.png?token=cd10305cdc186424b0940c70e14f3887&s=ACD0C3035B022A4B76F955B403008084">
  87. 						<div class="mui-media-body">
  88. 							无锡高架桥垮塌9小时
  89. 							<p class="mui-ellipsis">无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提</p>
  90. 						</div>
  91. 					</a>
  92. 				</li>
  93. 				<li class="mui-table-view-cell mui-media">
  94. 				<li class="mui-table-view-cell mui-media">
  95. 					<a href="javascript:;">
  96. 						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/c995d143ad4bd11312601aa13bb4370a4afb0590.jpeg?token=afd7e0689766caee13abd75166b49f62&s=D79213C100438B470420ED15030050D3">
  97. 						<div class="mui-media-body">
  98. 							首次公开！中国火星探测器.
  99. 							<p class="mui-ellipsis">中国火星探测器“真容”曝光，个头巨大</p>
  100. 						</div>
  101. 					</a>
  102. 				</li>
  103. 				<li class="mui-table-view-cell mui-media">
  104. 					<a href="javascript:;">
  105. 						<img class="mui-media-object mui-pull-right" src="https://pics5.baidu.com/feed/3812b31bb051f819e8d23907264ad8e82c73e788.png?token=cd10305cdc186424b0940c70e14f3887&s=ACD0C3035B022A4B76F955B403008084">
  106. 						<div class="mui-media-body">
  107. 							无锡高架桥垮塌9小时
  108. 							<p class="mui-ellipsis">无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提</p>
  109. 						</div>
  110. 					</a>
  111. 				</li>
  112. 				<li class="mui-table-view-cell mui-media">
  113. 			</ul>
  114. 		</div>
  115. 		<nav class="mui-bar mui-bar-tab">
  116. 			<a class="mui-tab-item mui-active">
  117. 				<span class="mui-icon mui-icon-home"></span>
  118. 				<span class="mui-tab-label">首页</span>
  119. 			</a>
  120. 			<a class="mui-tab-item">
  121. 				<span class="mui-tab-label">视频</span>
  122. 			</a>
  123. 			<a class="mui-tab-item">
  124. 				<span class="mui-tab-label">段子</span>
  125. 			</a>
  126. 			<a class="mui-tab-item">
  127. 				<span class="mui-tab-label">我的</span>
  128. 			</a>
  129. 		</nav>
  130. 		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  131. 		<!--修改src路径-->
  132. 		<script type="text/javascript">
  133. 			mui.init()
  134. 		</script>
  135. 	</body>
  136. </html>
  138. <--简单的参考,使用文档做了一个手机端的静态页面 效果如下图-->

  1. 关于如何使用mui,及页面之间的传参调用直接参考官方文档.
  2. https://dev.dcloud.net.cn/mui/ui/#icon
  3. 后台小型项目推荐使用Flask轻量级框架

关于文件打包

演示app:点击下载

作 者：郭楷丰
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力！
自 勉：生活，需要追求；梦想，需要坚持；生命，需要珍惜；但人生的路上，更需要坚强。带着感恩的心启程，学会爱，爱父母，爱自己，爱朋友，爱他人。

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)的更多相关文章

  1. 基于Mui与H5+开发webapp的Android原生工程打包步骤（使用新版本5+SDK与Android studio）（部分内容转自dcloud官网）

    文章背景: dcloud官网给出的打包步骤对于有一定安卓打包基础的同学来说比较容易掌握,但是对于webapp小白来讲有的地方可能没有说的太具体.下面我给大家介绍的详细一点,保证大家按照步骤就能学会打包 ...

  2. javascript开发 ios和android app的简单介绍

    先看几个名词解释: nodejs ionic,Cordova,phoneGap,anjularjs react-native,reactjs nodeJs 的介绍参见这里,写的很好http://www ...

  3. 基于 SailingEase WinForm Framework 开发优秀的客户端应用程序（目录）

    本系统文章将详细阐述客户端应用程序的设计理念,实现方法. 本系列文章以  SailingEase WinForm Framework 为基础进行设计并实现,但其中的设计理念及方法,亦适用于任何类型的客 ...

  4. 基于Asterisk的VoIP开发指南——(2)Asterisk AGI程序编写指南

    原文:基于Asterisk的VoIP开发指南--(2)Asterisk AGI程序编写指南 5. Asterisk AGI程序编写指南 5.1概述 很多时候,我们需要在拨号方案中做某些业务逻辑的判断或 ...

  5. 前端如何低门槛开发iOS、Android、小程序多端应用

    现如今跨平台开发技术已不是什么新鲜话题了,在市面上也有一些开源的框架可供选择,然而技术成熟.产品服务健全的平台并不多,其中也不乏推陈出新的框架值得关注. 比如最近使用的AVM,由APICloud迭代推 ...

  6. 传微软欲收购Xamarin：未来有望通过VS开发iOS和Android应用？

    据CRN报道,其援引匿名人士的消息称,微软将收购一家创建C#移动应用工具的公司或进行注资,并且谈判已经到了最终阶段.这家公司的名字叫做Xamarin,创建于2011年.对于微软来说,收购Xamarin ...

  7. 基于MINA框架快速开发网络应用程序

    1．MINA框架简介 MINA(Multipurpose Infrastructure for Network Applications)是用于开发高性能和高可用性的网络应用程序的基础框架.通过使用M ...

  8. mui框架移动开发初体验

      前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...

  9. Xamarin.Forms 开发IOS、Android、UWP应用

    C#语言特点,简单.快速.高效.本次我们通过C#以及Xaml来做移动开发. 1.开发工具visual studio 2015或visual studio 2017.当然visual studio 20 ...

随机推荐

  1. Dubbo的集群容错与负载均衡策略及自定义（一致性哈希路由的缺点及自定义）

    Dubbo的集群容错策略 正常情况下,当我们进行系统设计时候,不仅要考虑正常逻辑下代码该如何走,还要考虑异常情况下代码逻辑应该怎么走.当服务消费方调用服务提供方的服务出现错误时候,Dubbo提供了多种 ...

  2. Vscode 修改主题颜色

    首先向大家演示如何使用VSCode自带的颜色主题:依次点击左上角的文件-首选项-颜色主题,出现如下的主题选取界面.

  3. Java基础 awt Button 点击按钮后在控制台输出文字

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  4. js---省略花括号{}的几种表达式

    在进行js的书写中,对于常见的if,for,while是可以简写,省略花括号{}的: var a = 10,b = 20; /** * if 简写 */ if(a > b) console.lo ...

  5. Python原生调试工具pdb实践小结

    使用python -m pdb xxx.py进入单步调试模式,默认会在脚本的第一行可执行命令处停止.此时,通过 b function设置之后的函数断点会提示出错,从出错异常栈中可以看出,pdb是将fu ...

  6. docker 国内镜像加速

    CentOS7 对于使用 systemd 的系统,请在 /etc/docker/daemon.json 中写入如下内容(如果文件不存在请新建该文件): {"registry-mirrors& ...

  7. 【Linux基础】vim如何显示文件名称

    前言 使用vim的时候有时候需要查看文件路径或者名称,本文对此进行记录. 操作过程 一般模式下 method1: :f method2: 快捷键CTRL+g/G(大小写均可); method3: 查看 ...

  8. 【MongoDB学习之六】MongoDB集群

    环境 MongoDB 4.0 CentOS 6.5_x64 一.主从复制-Master-Slave这种模式已不再推荐使用了. 二.副本集-Replica Set(用的多)副本集其实一种互为主从的关系, ...

  9. Linux 就该这么学 CH04 VIM编辑器和Shell命令脚本

    0 概述 1 Vim编辑器 在linux 中一切都是文件,而配置一个服务就是修改其配置文件的参数. vim 编辑器有三种模式:命令模式,末行模式和编辑模式. 命令模式:控制光标移动,对文件进行操作. ...

  10. jmeter Dashboard Report

    说明:详情参考:https://jmeter.apache.org/usermanual/generating-dashboard.html JMeter3.0以后引入了Dashboard Repor ...