mui学习笔记

前言：随着互联网技术的进步，现已衍生出一些基于APP开发的前端框架。只需要一套代码就可以打包基于安卓和ios系统的APP。哎，好多安卓和ios工程师要下岗啊！

一、为什么要学习mui?

　　当前三大前端APP主流框架有：mui、ionic、framework7。当然看了数据对比似乎framework7更胜一筹，但是mui学习更简单对后台工程师和全栈来说是福音，更何况是在以前接触过mui的基础上。framework7后期会学习。

二、mui能干什么？

　　①：改变传统模式用安卓、ios两种工程师开发APP的模式。一套代码生成不同的应用程序。

　　②：为解决HTML5在低端 Andorid机上的性能缺陷。mui引入了原生加速，其中最关键的就是webview控件。因此mui若要发挥其全部能力，需要和5+APP配合使用，若脱离5+APP，mui功能会受限制。

　　③：mui以窗口形式加载。

三、mui优势

　　①：文件极小，100k的js文件，60k的css文件。原生编写，不依赖任何三方框架

　　②：极强，xcode和Android studio里所有原生控件都具备

　　③：高性能，精练的代码、适时的5+原生动画调用，达到原生应用的体验

　　④：多端发布，编写一套代码，iOS、Android、浏览器、微信H5、百度直达号、流应用全覆盖

四、开发工具 HBuilder http://www.dcloud.io/hbuilderx.html

　　HBuilder是一款国产开发工具，全中文，有BUG。

五、创建APP模板

　　利用HBuilder创建一个APP项目和传统的Web项目差不多，老版本HBuilder选择创建移动APP，新版本的选择5+APP（H5标准的跨平台APP）或uni-app（开发一次同时发布为andorid、ios、小程序、H5等多个平台）具体文件目录如下：

　　①：css

　　②：fonts 字体图标文件

　　③：js

　　④：unpackage 打包

　　⑤：index.html

　　⑥：manifest.json 设置App的参数，例如APP名称等

　　当然高版本的HBuilder不同的模板还有更高级的功能，比如自动创建登录注册等页面。小白同学一定要知道这些，不然幸亏半天写页面不然别人点点点几下。

六、mui使用组件

　　使用mui引入其css、js、fonts即可。重点部分查看官网http://dev.dcloud.net.cn/mui/ui/ 的组件、窗口管理、事件管理的使用。

　　下面介绍初学mui的三点常识

　　①：在HTML中引入以m开头，比如mui封装的header就加mheader。

　　②：怎么改变元素样式，在class属性名后面空格新增header，在css文件中添加.header属性样式引用即可。

　　③：在网页中出现两个div之间有灰白色空格线的去除方法，body为受影响的元素，可自行选择。

　　　　body{

　　　　　　-webkit-box-shadow:none;

　　　　　　box-shadow:none;

　　　　}

七、与后台数据交互

　　①：Art-template 用于页面的动态渲染，官方文档http://aui.github.io/art-template/docs/syntax.html

　　②：Ajax 向后台请求数据 ,mui有对ajax的封装

八：运行移动模式

　　①：安装手机模拟器：推荐夜神手机模拟器

九：打包

　　　点击HBuilder工具栏的“发行”选择发行为原生安装包

　　　　　修改应用名称，即APP名称

　　　　　云端获取，登录远端账号

　　　　　图标Logo需要.png格式的图片

　　　　　ios打包需要账号，这个是收费的