MUI框架-01-介绍-准备-创建项目
MUI框架-01-介绍-准备-创建项目
- 从0开始快速高效学习 MUI 框架
- 官方文档:UI组件 · MUI
(1)MUI 介绍
- MUI 是什么,解决了什么问题?
- MUI 官方号称最接近原生APP体验的高性能前端框架
- 简单的说就是webapp的以个开发框架
- webapp和原生app性能及体验的差距,一直是移动app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有(如果开发者需要解决这些问题,需要处理很多兼容性问题,需要花费大把的时间和精力);
- 浏览器默认控件样式(prompt、alert)又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。
- 此时,出现了正义的 MUI
- mui框架:一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。有些控件就是原生态的效果,mui起到了桥梁的作用。
- MUI是国产的,北京数字天堂。和它配套的有开发工具 HBuilder,5+runtime
5+runtime:可以将H5打包成native app,原理:利用原生态的webview去承载HTML5
(2)MUI 的特点
- 轻量
追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征;
MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K
可以根据自个的需要,自定义去下载对应的模块。和我们接触的zepto.js类似 - 原生UI
鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标
MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件; - 容易上手
- 不需要其他框架基础:语法上和我们之前 学到用到 的写法是一样的。
- 其他框架:ionic(Angular.js), react(native),vue(发音:view)
vue、react、Angular.js是并列关系。
前端是:vue和react的天下
(3)MUI 存在的问题
(4)开发工具
- HBuilder 下载地址:DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
- mui 有个开发文档预览式 app,下载Hello mui App
点击下载 已打包好的Hello mui 手机app,直接在手机上体验mui的控件UI及能力展示
(5)创建 MUI 项目
- 选择新建“移动APP”,并选择“Hello MUI”工程模板,创建工程;然后通过数据线将手机连接上电脑,点击运行,就可以在手机上体验MUI的各项能力
- 快速构建页面:
- 1.新建含mui的HTML文件
- 在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用
- 2.输入mheader
- 顶部标题栏是每个页面都必需的内容,在Hbuilder中输入mheader,可以快速生成顶部导航栏
- 3.输入mbody
- 除顶部导航、底部选项卡两个控件之外,其它控件都建议放在.mui-content控件内,在Hbuilder中输入mbody,可快速生成包含.mui-content的代码块
- 4.更多开发后面介绍,今天先介绍一些注意事项
- 5.官方文档:UI组件 · MUI
(6)简单页面
(7)HTML 文件
- 打开新建的 html 文件
- 会看到一些预制的设置,meta 标签,css 文件,js 文件
- 然后我们主要的是在 body 中进行一些操作
- 先输入一个: m
- 可以看到触发了关键词,有很多代码块,这也是最常用的方法,我们就可以快速的开发
- 例1:
- 比如我们输入: mh
- 选中 header,然后回车
- 输入标题:MUI 入门
- 很快吧,用 mui 做这种的话就是这么快
- 例2:
- 比如我们输入: ml
- 选中第 2 个图文列表,回车
- 这时候就会有问题了,顶部重叠了,为什么会有这个问题呢,就是因为没有把内容放到主体里面,然后人家还以为你是 header 呢
- 之所以这样,故意遇到这个问题,是因为:
- 除了固定栏之外,其它内容都要包裹在.mui-content 中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从 top:0 的位置开始布局,这样就会被固定栏遮罩,像这样的注意事项还有挺多,我会单独整理一下
- 解决办法:
- 删掉刚才的列表,输入 mbo 找到 body 回车
- 然后在 body 里面输入 ml 图文列表,预览:
- 例3:
- 然后我们在 主体的外面,就是 mui-content 的div的外面
- 我们输入:mt 选择底部栏,回车
- 这时候简单的搭建页面,是不是就已经可以掌握了
- 这时候是不是已经感觉 mui 有时候还是很强大的
- 好,后面我们在继续学习
MUI框架-01-介绍-准备-创建项目相关推荐
- Newbe.Claptrap 框架入门,第二步 —— 创建项目
接上一篇 <Newbe.Claptrap 框架入门,第一步 -- 开发环境准备>,我们继续了解如何创建一个 Newbe.Claptrap 项目. 安装项目模板 打开控制台运行以下命令来安装 ...
- 懂商业的技术合伙人(14):使用HTML5开发App客户端,HTML5+和MUI框架基本介绍
我非常倾向使用HTML5,搞定PC Web.Mobile Web.Android和iOS.微信小程序等各种UI开发. 作为技术人员,一次学习,处处使用,是个美好的愿望. 本文把2014~2017年,零 ...
- Vaadin介绍与开发练习之一(总体介绍与创建项目)
文章目录 Vaadin是什么? Vaadin与JavaScript区别 Vaadin与Java以及GWT的关系 总结 Vaadin 初貌 Vaadin提供的组件 Vaadin 开发概述 创建Vaadi ...
- Django框架(入门超细笔记 创建项目步骤 )
在安装Django之前,我们首先需要安装Python开发的虚拟环境 virtualenv. 一.学习django我们要先下载虚拟环境 1.在cmd中输入命令:pip install v ...
- Android原生集成MUI框架进行混合开发
开发APP中我们经常进行原生结合H5进行混合开发,下面将进行详细讲解Android原生集成MUI框架进行混合开发(项目Demo如下,有需要的可以下载查看),下一篇讲述,Android原生和MUI(也适 ...
- ssm 项目cannot resolve package_前端工程化之创建项目
前言 在我们团队,刚开始创建项目,是直接使用框架的 cli 进行创建项目,并修改相关配置.随着项目的增多,沉淀了两套模板,平台端及移动端.后来,我们自己写了一个简单的 cli,并提供了 create ...
- (E2)ENVI-met模型建立——创建项目及数据库的使用
上一篇我们介绍了ENVI-met免费版本的下载及安装,这篇我们介绍如何创建项目,以及Database Manager(数据库)的使用以及如何自定义创建用户自定义的数据库. 1 创建项目 打开桌面上或者 ...
- 从零开始的Django框架入门到实战教程(内含实战实例) - 01 创建项目与app、加入静态文件、模板语法介绍(学习笔记)
目录 1. 安装Django 2. 创建项目(startproject) 2.1 创建项目 2.2 介绍项目文件 2.3 APP(startapp) 3. 走通流程(urls, views, runs ...
- mui教程1——mui介绍、创建mui项目与初步使用、MUI常用代码提示、webview基本操作、事件管理、mui的内置函数
一.MUI资源索引及MUI介绍 1,资源索引 官网:http://dev.dcloud.net.cn/mui/ MUI官方文档:http://dev.dcloud.net.cn/mui/ui/ 调用手 ...
- 【Django】创建项目及框架介绍,学习笔记(一)
[学习教程] 1.Django基础教程:https://code.ziqiangxuetang.com/django/django-tutorial.html 2.Django博客:http://ww ...
最新文章
- PCL:最小特征值与特征向量为什么可以表示法向量??
- 用ElasticSearch搭建自己的搜索和分析引擎
- SAP FICO AS03显示固定资产主数据
- Facebook收购GrokStyle:布局AI零售
- 讲讲JavaScript的闭包
- python版本差异_python的版本的差别 2,3
- python新建文件夹口令_python编程快速上手—口令保管箱
- 第 10 章 容器监控 - 085 - 如何快速部署 Prometheus?
- Base64编码及其作用
- Exchange Server 2010部署顺序
- 视频教程-SAP S4 HANA财务模块入门到精通-ERP
- C++类对象创建过程(分配空间、赋值和初始化、对象初始化顺序、虚函数表指针)
- android qq音乐无法连接网络连接,qq音乐不能播放_qq音乐为什么老是提示说歌曲无效或网络连接失败呢?...
- 京东618大促,全店商品如何导出?
- 微信小程序 云开发 聊天功能
- Failed to load response data:No data found for resource with given identifier
- HM二次开发 - 外部程序采用socket与HM实现通信
- 一、flink基础之数据读取
- 2020 mse 清华_2020年的北大清华在世界上属于什么水平?
- php mysql自动定时备份_php中实现mysql数据库备份与linux自动定时备份代码