Web App - MUI框架初体验

二、手机APP开发 - MUI框架

2.1 MUI框架的介绍

MUI是最接近原生APP体验的高性能前端框架

使用MUI框架开发手机APP的优势：
1. 框架轻量，MUI不依赖任何第三方JS库，文件体积小
2. 追求原生APP UI风格
3. 体验流程，在MUI框架内部通过webview解决了DOM元素的卡顿问题
4. MUI框架可以看做是一个UI组件库，而H5+ 才是实现调用设备功能的技术规范
使用MUI框架前的预备知识：html + css + js
MUI官网

MUI的实现，其底层原理与HTML5+、5+Runtime、native.js有着密不可分的关系

HTML5+、native.js、5+Runtime等介绍

2.2 MUI的实现原理 (了解)

HTML5+

**HTML5+也可以称为HTML5 Plus
- HTML5+文档补充
H5开发APP的痛点：
- 无法调用手机硬件上的功能，比如拍照、通讯录等
- 为弥补H5能力的不足，中国成立了HTML5中国产业联盟www.html5plus.org组织，推出HTML5+规范。
什么是 HTML5+ ?
- HTML5+规范是一个开放规范
- HTML5+新增了JavaScript对象plus，使得js可以调用各种浏览器无法实现或实现不佳的设备能力
- 简单来说就是HTML5+可以调用一些设备硬件上的API，如摄像头、陀螺仪、文件系统、通讯录等
HTML5+提供的plus对象
- mui中有个plus对象，他不是简单的使用html5的功能，而是提供了一个叫html5+的API集，并且将他们封装在了这个plus对象中，里面有陀螺仪，map，定位，相机，文件流等等的原生功能调用接口！
- plus对象就必须在***mui.plusReady()***之中使用，，如果不不需要用**HTML5+提供的API，你并不需要使用plusReady方法，只需要在用mui之前mui.init()一下就可以，这也是mui.init()和plusReady()的区别
- mui.plusReady()是为“html5+”而生的，最终需要打包成了app级别才能使用，因为这plus对象里面的东西最终会被映射成为java，objective-c的代码
- 说太多也不好理解，这些底层的实现都已经由dcloud团队领导的“中国html5+产业联盟”（社区）实现了，我们只要知道我们写的plus对象的js代码都会被转化为原生代码，app就能实现很多原生功能的调用。
- plus这些东西在浏览器级别是不支持的，所以不可以在浏览器中调用plusReady，以及plus.xxx.xxx方法等
- 要使用html5+就要求我们打包成app，有5+Runtime运行环境，这样即可运行plus对象下的对象和方法，这个打包可以由hbuilder实现。

Native.js

HTML5+是规范性的，他只实现了一些常用的原生API调用
如果希望调用所有的原生API，则要使用Native技术

如果说Node.js把js扩展到服务器世界，那么Native.js则把js扩展到手机App的原生世界。

**Native.js是另一项创新技术，也简称 NJS
- Native.js把几十万原生APP的API映射成了js对象，通过js可以直接调ios和android的原生API
- 这部分就不再跨平台，写法分别是plus.ios和plus.android
- native.js不是js框架，是技术！
- native.js使得开发H5 APP更加接近原生，因为他可以用原生一样的语法调用原生的对象（映射）
- 与Node不同的是，NJS没有单独的运行环境，而是集成在另一个环境中*(5+Runtime)*
补充：
- 由于NJS是直接调用原生API，需要对原生API有一定了解
- 需要能看懂原生代码并参考原生代码修改为JS代码，否则只能直接copy别人写好的NJS代码。
Native.js文档补充

5+Runtime

5+Runtime：是一种运行环境
- 它是HTML5+规范实现的必要环境
- 也是Native.js技术实现的必要环境
- 目前 Hbuilder X集成了5+Runtime环境
HTML5+ APP 应用架构

H5 APP和H5+ APP的区别

使用H5开发的APP
- 其主要功能与网页相同，只能实现一些简单的APP，无法完成对设备硬件功能的调用
使用H5+开发的APP
- 可以与原生语法一样调用设备硬件的功能，但是要基于HTML5+规范去实现

2.3 开发环境搭配

下载并安装好 Hbuilder X,
通过**Hbuilder X来创建MUI项目工程文件夹

2.4 MUI初体验

新建含mui的HTML文件
- 在Hbuilder X中，新建HTML文件，选择”含mui的HTML“模板，可以快速生成mui页面模板
- 该模板默认处理了mui的js、css资源引用。
输入mheader
- 顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。
输入mbody -> mlis
- 除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。
- 在.mui-content内输入mlis可以快速生成列表的代码块
输入mTab
- 可快速生成底部选项卡

最后实现效果

更多完整代码块快捷键请参考

Web App - MUI框架初体验相关推荐

python的scrapy爬虫模块间进行传参_小猪的Python学习之旅 —— 4.Scrapy爬虫框架初体验...
小猪的Python学习之旅 -- 4.Scrapy爬虫框架初体验 Python 引言: 经过前面两节的学习,我们学会了使用urllib去模拟请求,使用 Beautiful Soup和正则表达式来处理网 ...
自然语言处理NLP星空智能对话机器人系列：Facebook StarSpace框架初体验
自然语言处理NLP星空智能对话机器人系列:Facebook StarSpace框架初体验目录 Facebook StarSpace github StarSpace 安装部署编译星际空间 Face ...
【Flask框架】一. Flask框架初体验（配置环境 + 简单demo样例）
文章目录一. Flask框架初体验(配置环境 + 简单demo样例) 虚拟环境新建项目将Pycharm改为FLASK_DEBUG模式修改FLASK_DEBUG模式的步骤配置文件简单用法 U ...
连接真机开发安卓(Android)移动app MUI框架完善购物车订单等页面——混合式开发（五）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（二）带你项目开发（最新版）
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的"无为,而无所不为",也无法理解范仲淹的"不以物喜不以己悲".可是再没兴趣,学习还是要继续!!!为 ...
A-Frame WEB VR框架初体验
aFrame是一个Web VR框架,底层是基于threejs的,刚好项目也用到了threejs,就用aFrame试了下效果.在网页上看起来,aFrame就是把threejs的的实现包装成一个实体标签. ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（一）（敲详细）
从接触安卓开发的第一天起,我想我已经爱上了开发,哈哈哈,愿你我坚持下去的理由都是热爱,共勉!这几天没有更新博客,是因为我学习去了(没有相见的日子,我在努力哈哈哈).有想过用模拟器来运行的,但是模拟器太 ...
连接真机开发安卓(Android)移动app MUI框架反馈意见、忘记密码、登录、底部选项卡、联系我们、导航等页面代码可拿——混合式开发（六）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 开头先分享个有趣的 ...
Vue3系列(二)之安装依赖与UI框架初体验
目录一.安装常用依赖二.UI框架体验 1.Element-plus 1.1 完整引入 1.2 按需引入 1.3 国际化 - 中文 2.Ant-Design 2.x 2.1 完整引入 2.2 按需引 ...
连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）
这篇发得有点晚了,实属罪过! 以前高中月考的时候有幸进了一个学霸班坐了一个学霸的座位(应该是一位女学霸,桌子上面写着:如果不是因为生气而将事情变得更加严重,那么事情也不是那么的大了) 希望自己可以心情 ...

Web App - MUI框架初体验

二、手机APP开发 - MUI框架

2.1 MUI框架的介绍

2.2 MUI的实现原理 (了解)

HTML5+

Native.js

5+Runtime

H5 APP和H5+ APP的区别

2.3 开发环境搭配

2.4 MUI初体验

Web App - MUI框架初体验相关推荐

最新文章

热门文章