mui学习笔记

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

 

1、为何要学习mui?

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

 

2、mui能干什么？

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

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

　　③：mui以窗口形式加载。

 

3、mui优点

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

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

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

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

 

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

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

 

5、建立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不一样的模板还有更高级的功能，好比自动建立登陆注册等页面。小白同窗必定要知道这些，否则幸好半天写页面否则别人点点点几下。

 

6、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;

　　　　}

 

7、与后台数据交互

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

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

 

八：运行移动模式

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

　　②：参考 https://www.jianshu.com/p/a2631cdfc049

 

九：打包

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

　　　　　修改应用名称，即APP名称

　　　　　云端获取，登陆远端帐号

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

　　　　　ios打包须要帐号，这个是收费的