前言:随着互联网技术的进步,现已衍生出一些基于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的封装

 

八:运行移动模式

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

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

 

九:打包

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

     修改应用名称,即APP名称

     云端获取,登录远端账号

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

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