HBuilder mui入门教程——(1)简介
2017-07-02 15:31
351 查看
从周一开始接触mui框架,到今天完成一个简单app的开发,时间刚好一周,mui框架丰富的插件集成和方便的调用功不可没,但是在开发过程中也遇到了一些坑,为方便以后查看,做个记录,也希望能帮助到别人更好了。以下部分内容摘自官网。
mui框架的有效解决了这些问题,通过mui框架可以用H5快速高效开发出最接近原生效果的APP。
打开左侧中的index.html页面,在body标签中写一行hello word,保存,就可以在右侧的web浏览器中实时看到页面效果。
mui框架简介
APP开发一般可以用Html5和原生开发两种方式,考虑到性能和体验的原因,APP开发一直以来采用原生开发方式。以往H5开发主要问题有切页白屏、浮动元素抖动、下拉刷新不流畅等等。mui框架的有效解决了这些问题,通过mui框架可以用H5快速高效开发出最接近原生效果的APP。
快速体验
官网提供了一个用mui开发的HelloMui App,可以在手机上安装体验一下开发效果,地址:http://dev.dcloud.net.cn/mui/开发工具
使用mui开发APP只需要下载一个开发IDE:Hbuilder,mui框架已经内置在里面了。建立mui项目
HBuilder安装好之后,文件->新建->移动APP,然后在弹出界面选择mui项目就可以创建一个包含mui框架的简单APP项目。打开左侧中的index.html页面,在body标签中写一行hello word,保存,就可以在右侧的web浏览器中实时看到页面效果。
项目框架分析
在左侧的项目管理器中可以看到这个项目结构很简单,css,js,fonts三个文件夹包含了mui框架所须的一些基本文件,下面的manifest.json类似原生安卓开发,包含了应用的图标,启动页,权限等各种设置。相关文章推荐
- HBuilder mui入门教程——(5)登录和访问控制
- HBuilder mui 入门教程——(3)页面传值
- HBuilder mui入门教程——(2)含tab选项卡的首页
- (转)WCF入门教程(一)简介
- Laravel中运行Gulp任务的利器 —— Laravel Elixir简介及入门教程
- jQuery入门简介、教程
- HBuilder开发App教程04-最难搞定的是mui
- GBDT(MART) 迭代决策树入门教程 | 简介
- GBDT(MART) 迭代决策树入门教程 | 简介
- Thrust快速入门教程(一)——简介
- 决策树系列之三 GBDT(MART) 迭代决策树入门教程 | 简介
- 【系列教程1】Gradle入门系列一:简介
- mui初级入门教程(五)— 聊聊即时通讯(IM),基于环信 web im SDK
- GBDT(MART) 迭代决策树入门教程 | 简介
- Kaggle竞赛入门教程之Kaggle简介(新手向)
- 【转】GBDT(MART) 迭代决策树入门教程 | 简介
- GBDT(MART) 迭代决策树入门教程 | 简介
- mui初级入门教程 — 模板页面实现原理及多端适配指南
- LINQ新特性简介及入门教程[转]
- swing入门教程(一) swing简介