二.MUI框架 开始体验MUI
1、安装新版HBUilder
下载地址: http://www.dcloud.io/
2、新建app项目
文件—新建—移动app—项目名称+mui项目
3、真机调试及运行
不管是iOS还是Android,不管是模拟器还是真机,都可以与HBuilder连接进行真机运行。以往开发App,需要改一个界面,然后打包,然后安装到手机上,然后进入那个界面,看看改对了没。没有的话循环这套动作,非常低效。有了真机运行,改了代码后保存,手机立即看到效果,如果在手机上运行时发生错误,那么日志和错误信息也都可以反馈到HBuilder控制台。有些开发者喜欢alert大法,但事实上在HBuilder的js里敲clog,用打日志来调程序更好。
4、文件结构介绍
|_ css 样式表文件夹|_ fonts 字体文件夹|_ js JavaScript脚本文件夹|_ index.html 入口文件
5.基础布局
(1)、头部核心css mui-bar mui-bar-nav
<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">hello</h1> </header>
(2)、主体部分核心css mui-content
<div class="mui-content">主体部分.... </div>
完整代码演示
<!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> <div> <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">hello</h1> </header> <div class="mui-content">内容部分.... </div> </body> </html>
二.MUI框架 开始体验MUI相关推荐
- MUI框架-03-自定义MUI控件样式
MUI框架-03-自定义MUI控件样式 开发请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 如何自定义MUI控件样式 mui 以 iOS 7的 UI 为基础,补充了 ...
- 连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(最新版)
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的"无为,而无所不为",也无法理解范仲淹的"不以物喜不以己悲".可是再没兴趣,学习还是要继续!!!为 ...
- mui框架移动开发初体验
1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调. 博主是个中度强迫症患者,顶部那个小黑条实在让我不舒服. 首先,我们在HBuilder上新建一个移动A ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
- 懂商业的技术合伙人(14):使用HTML5开发App客户端,HTML5+和MUI框架基本介绍
我非常倾向使用HTML5,搞定PC Web.Mobile Web.Android和iOS.微信小程序等各种UI开发. 作为技术人员,一次学习,处处使用,是个美好的愿望. 本文把2014~2017年,零 ...
- mui框架中dialog框的实现
<script type="text/javascript" charset="utf-8">//mui初始化 mui.init({swipeBac ...
- 连接真机开发安卓(Android)移动app MUI框架 反馈意见、忘记密码、登录、底部选项卡、联系我们、导航等页面代码可拿——混合式开发(六)
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 开头先分享个有趣的 ...
- 连接真机开发安卓(Android)移动app MUI框架 完善购物车订单等页面——混合式开发(五)
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
最新文章
- 【CV秋季划】人脸关键点检测,人脸识别视频更新
- MySQL8.0.16主从同步
- redminote8自动关机怎么回事_红米Note8Pro手机值得入手吗 红米Note8Pro手机全面评测...
- 总算知道怎样从ImageMagick生成的数据转换成HICON: MagickGetImageBlob LookupIconIdFromDirectoryEx...
- EVENT:10218 dump uba of applied undo
- mysql插入反斜杠“\“丢失的解决方法
- virtual studio 2017 配置vistual assist激活
- J1939协议之通俗易懂----简介
- 【软件安装管家】Axure RP 8软件安装包下载地址及安装教程
- 小程序云开发 上传图片到云存储
- 副高相当于副处吗_事单副高职称相当于副处待遇?别逗了,连公务员副科实职都不如...
- todd li 保留_用Todd Motto揭开JavaScript神秘面纱
- php携程源码,Swoole2.0协程的使用和源码解读
- Android studio:select process to attach to...找不到debug调试的目录
- 云脉相册检索,关键词快速定位图片
- Nginx的配置与优化
- 计算机中存储数据最小的单位是什么,计算机中存储数据的最小单位和存储容量的基本单位各是什么?...
- 电脑开机显示“Windows\system\vgaoem.fon”丢失的解决方法
- 数学定理可以这样证明
- GoshawkDB:一个分布式、支持事务与容错的对象存储