MUI框架(1)
来源:互联网 发布:服装搭配软件 编辑:程序博客网 时间:2024/05/21 14:50
MUI(Mobile User Interface)是一套基于HTML5的,遵循html5+规范的,中国团队开发的,开源的,用于手机端界面开发的一套框架。mui框架是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。目前,MUI是基于H5的最方便的App开发框架之一!
官网:http://dev.dcloud.net.cn/mui/
通过HBuilder,我们可以快速开发出H5网页,而它跑在MUI框架中的速度非常快。HBuilder内嵌了jquery、bootstrap、angular、mui等常用框架的语法提示库。
HBuilder内置HTML5+ APP开发环境,提供一套完整的移动应用开发解决方案。内置HTML5+ API语法提示,提高开发效率;集成真机运行环境,方便开发后即时在真机上查看运行效果;集成应用云端打包系统,不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
创建HelloWorld应用
“新建”->“移动App”
Manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息,用户可通过HBuilder的可视化界面视图或者源码视图来配置5+移动App的信息。HBuilder打开manifest.json文件后默认显示“可视化视图”,可配置应用的基本信息。
真机运行 run in device
写完代码后,我们可以通过真机运行来查看效果。
运行后,HBuilder中修改页面代码,保存后会自动同步到手机中,如果手机当前展示着被修改的页面,则会刷新页面。
发行打包
完成应用页面的编辑后,需要正式打包为原生的apk或ipa安装包。HBuilder提供的打包有云打包和本地打包两种。
无论云打包还是本地打包,都在HBuilder的菜单-发行中。
本地打包在该菜单下有详细教程,此处仅对云打包进行说明。
MUI开发
在Hbuilder中新建工程项目,需要在首页index.html界面引入:
把官方下载的MUI框架例题包里面的字体fonts文件夹copy到新建的工程项目中。
常用代码块参考http://dev.dcloud.net.cn/mui/snippet/
mui如何增加自定义icon图标
mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标;其次,mui中的图标并不是图片,而是字体。官网参考:http://ask.dcloud.net.cn/article/128
浏览器访问阿里巴巴矢量图标库官网,选择登录方式,可直接使用新浪微博账号登录;http://iconfont.cn/
把生成的新图标下载到本地,为保证和mui目录结构统一,建议将字体文件放在fonts目录下,这样我们需要修改@font-face下得url属性;修改代码如下:
@font-face {font-family: “iconfont”; src:url(‘../fonts/iconfont.ttf’) format(‘truetype’); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ }
将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下,然后即可在mui中引用刚生成的字体图标。
返回上一页的代码实现:
底部选项卡切换:
参考官方案例:tabbar.html
ECharts官网http://echarts.baidu.com/index.html
ECharts图表事例:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据.......... // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body></html>
- MUI框架(1)
- MUI框架(2)
- mui框架
- MUI(1)
- MUI前端框架学习(一)
- MUI前端框架学习(二)
- H5侧拉菜单(MUI框架)
- 移动端下载文件(mui框架)
- 模拟mui框架编码
- MUI框架初级教程
- mui框架学习笔记
- MUI框架入门
- 手机页面框架 MUI
- mui框架通讯录检索
- 二.MUI框架 开始体验MUI
- HybridAPP框架MUI(跨平台移动端应用开发)
- MUI--高性能前端框架
- MUI框架前端开发知识点
- css背景图片自适应
- mysql安装及配置
- POJ: Drying(二分)
- C++设计模式:装饰模式
- M进制转N进制(C++)
- MUI框架(1)
- 0036_Valid Sudoku
- jsx的简单使用教程
- 接口和抽象类的异同
- window下安装numpy出现UnicodeDecodeError
- 策略模式--同一个任务不同的策略
- 简单的动画制作
- 30-31.Android-解析XML(PULL)-解析Json
- java——匿名内部类