MUI+H5plus+HBuilder开发app（android，ios）介绍

前言

现在介绍一款只需要懂html+css+js就能开发app的框架，不需要懂原生语言，完全只需要前端web工程师就能独立开发出android和ios的应用，且一套代码搞定，效率很高。（其实更省事可以wap，android和ios一套带走，一下R闪秒3个平台，没毛病）

---

框架介绍

这套框架源于DCloud社区，DCloud的社区工程师们通过对h5的扩张，通过运用js在webview调用原生接口，最后通过DCloud的打包做成和h5+的产品，生成一个app。以app分类来定是Hybrid App。这套框架具备开发工具、调试、打包、ui库和工具库，是一套完整地解决开发app框架，且功能和性能效果接近原生。包括二维码、语言输入、支付、推送、陀螺仪等各种手机设备能力，均可通过JS简单调用。方便懒人们，不用学新语言看看API写app就可以了。

技术架构

HTML5+ 基座扩展采用三层结构，JS层、PluginBridge层和Native层。 三层功能分别是：
JS层： 在Webview页面调用，触发Native层代码，获取执行结果。
PluginBridge层： 将JS层请求进行处理，触发Native层扩展插件代码。
Native层： 插件扩展的平台原生代码，负责执行业务逻辑并执行结果返回到请求页面。如果需要写原生功能，就需要用到Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。

---

开始

1.下载工具

万事皆为工具起，必先利其器。下载hbuilder和H5+sdk，mui。
http://www.dcloud.io/runtime.html

2.helloword

1.新建
开始第一个app吧

2.新建项目
建项目的时候可以选择是否引用mui库，还可以选择编译的js语言版本ES5／ES6。下面还有教程和案例的连接给你看，不懂直接点。再不懂来@我吧。哈哈

3.文件夹介绍
css，fonts和js文件夹就是方mui库的。大家应该都清楚，而我只需要介绍manifest.json。unpakckage就是方编译后文件，这个不用管的。

*什么是manifest.json?

就是要打包的原生应用，其各种配置均在此处，一个配置文件。学过android和ios的朋友们应该不陌生吧。

appid是DCloud给的来用来调试开发用的。如果是需要打包，请填上自己appid。

资源都是经过压缩的，学web开发的朋友们，不用想着自动化什么的？
可以像idea那样直接边敲代码边编译，就编译和构造都交给编辑器吧。可视化编辑工具更加友好。

开发过android和ios的朋友们，都为图标的多个尺寸头疼吧。尤其同事开发2个平台的。直接上传一张256*256尺寸的图片，自动转成19个尺寸，且路径都已经写到配置文件上。继续懒着开发吧。

模块权限配置：打开一个app的时候需要一堆授权。在这里点击你app需要授权的功能。

4.运行app
编写index.html页面。
index.html内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <div>HelloWorld</div>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</head>
<body>

</body>
</html>

写好页面，点击运行->手机运行->找到你刚刚连接的手机，在设备上运行。

5.打包
(1).点击发行->发行为原生安装包。

---

(2).填入自己的证书，证书如果没有可以使用DCloud公用证书的。

---

(3).上传到DCloud进行打包。

---

(4).打包成功！

总结

经过我使用且多次重构后，觉得MUI+H5plus+HBuilder使用起来不太难。遇到问题现百度，不google（国内大神开发的，哈哈），加qq多来聊，通常遇到的都是小问题，基本上文档上都有写清楚的。而开发出来的app动画修改流畅，打包后的文件也很满意（打包前的资源40m打包后20m还减肥不少啊）。也一点都看不出web那种闪啊闪啊，等啊又等的感觉。
最后一点提醒web开发工程师，在开发app的时候，要把思维转换一下。你开发的是一个app必须有app的交互。还有使用的组建，能用原生就尽量调用原生的，别在webview里面用html写个title栏。或者直接写一个webview里面打开一个web做成一个app。这种的app体验性很差，太依赖于网络根本，设计app尽量使用l/s方式。

ps

1.react native对比有什么区别？

react native只使用js，而Mui这套使用的是html+css+js。两者区别最大是no HTML5 和 h5+。这点对于渲染方式要及其大的区别。react native也就是使用js语言编程，但不使用浏览器引擎渲染，而是用独立v8引擎解析指定的js语法，然后由js操作绘制界面。而h5+主要就是靠webview来渲染html界面的。这个渲染方面的区别，还有就是react native是学一套做一套模式，这点就是学ios写ios app，学andriod写android app。这点和Mui app一套双平台，有所区别。

---

2.phoneGap、cordova对比有什么区别？

phonegap出来的很早，phonegap支持平台很多，能支持windows phone、blackberry，Mui做不了这么多平台支持，起码是现在。而两者的渲染方式很接近。但phonegap学习门槛还是Mui这个高，起码需要懂原生这一点就有所难度。不适合web工程师入门学习。

---

3.superwebview对比有什么区别？

之前看到我国开发的另一款 Hybrid App 框架，api不够Mui的多，社区活跃度差点。但我有空也会用它来重构一下，支持一下我国开发项目。

---

4.native app对比有什么区别？
我觉的native app的开发成本比较高，需要同时使用2种语言。而Mui app这点比起来绝对是低廉。而但性能上绝对native app占优。还有其实现在native app和hybrid app都是共同在app占有半边江山。而开发出是native app还是hybrid App更多应该在需求和产品设计来定。多少的成本，多少的资源，app的存活时间等等，都在考虑之内。而我个人虽然懂的开发hybrid App，但我还是会去学习java和Objective-C的。不应该满足能实现一个app而止，还需要多了解原生的东西。