mui开发项目流程_mui项目开发环境搭建

mui是Dcloud团队出品，号称是最接近原生app体验的前端框架。

为什么这么说呢？

那是因为mui集成了h5+的api，h5+又是什么呢？这也是Dcloud团队弄出来的，是一个规范，隶属于http://www.html5plus.org，定义了HTML5规范中没有但开发者做App需要的扩展规范。      DCloud的5+ Runtime完整的实现了HTML5+规范。同时5+ Runtime还实现了Native.js，一种通过js调用几十万原生API的技术。而mui仅仅使用了h5+的常用api，然后又封装了一些窗体控件提供给广大开发者，它的定位仅仅是一个应用框架，不是规范。

好了，废话不多说，接下来把开发环境的搭建步骤列出来供大家参考！

第一步：下载安装hbuilderx，地址：

https://www.dcloud.io/hbuilderx.html

下载之后，直接解压，双击exe文件即可使用，可以将此文件发送到桌面快捷方式，方便使用。

第二步：创建一个mui项目(如果已经有了就直接打开文件夹，找到mui项目就可以了)，选择mui项目，mui属于h5+app；

第三步：下载安装手机模拟器，推荐夜神模拟器吧，这个过程就简单了，不再细说。

第四步：模拟器打开开发者模式

1、首先打开设置，注意是模拟器内置的设置app

打开后就看到这个界面

注意第一次打开是没有开发者选项的，点击下面的“关于”，连续点击5次，再重新进入设置，就可以看到开发者选项了。

2、打开usb调试

点击开发者选项，进入后打开usb调试选项，在弹出框选择确定

第五步：将hbuilderx连接到模拟器

找到模拟器快捷键，右键—属性—打开文件所在位置，找到debugReport.bat这个文件，双击打开

打开之后将第一行的端口号复制粘贴备用

打开hbuilderx工具-设置-运行配置，将端口号粘贴替换

到这里，基本上就可以进行基于mui的app开发了，如果在运行时还有连接不上的问题，可以这样解决：

1、找到HBuilderX安装目录下的

D:\soft\IDE\HBuilderX.2.5.1.20200103.full\HBuilderX\plugins\launcher\tools\adbs

2、先备份该录下的除了文件夹外的其他三个文件。      3、然后把1.0.31目录下的文件拷贝到

D:\soft\IDE\HBuilderX.2.5.1.20200103.full\HBuilderX\plugins\launcher\tools\adbs，直接覆盖即可。      4、重启HBuilderX就可以检测到模拟器了。

第六步，最后一步进行app开发的页面调试

用Chrome 浏览器调试移动端网页，在谷歌浏览器输入

chrome://inspect/#devices

可以看到与app对应的当前打开的页面，点击inspect fallback即可像调试web应用一样调试app。