Hbuilder+MUI初探索（基于react.js的H5移动端

背景：公司目前做一个旅游网的app应用。一同事那边需要用leaflet做地图，担心地图集成到原生安卓里面有问题，老大呢又想把web版本的后台拿过来做一些修改，直接用作app的服务端(听着心累啊)。提出了用Hbuilder和Mui的移动应用开发。老板很温和的问：有没有兴趣研究一下？作为中流砥柱，我知道...这个研究工作的活又得交到我得手上了，OK，舍我其谁，我不如地狱谁入地狱？真正的勇士敢于直面装逼的人生，那就来干吧！

正文：

1.Hbuilder

开始肯定是先下载Hbuilder的IDE开发工具，其实这个还不错，智能提示，快捷键都很强大。http://www.dcloud.io/index.html。

接着可以新建一个项目玩玩，有web和移动app两种。这里可以选择模板，看看里面的demo。

Paste_Image.png

创建完成后，选中项目，在手机端运行就可以用了，这里我是用的genymotion模拟器，部署上去还挺快。

Paste_Image.png

如果在新建的时候是新建的一个mui项目，可以在项目里面新建html文件，选择一些模板体验

Paste_Image.png

接下来，如果要进行开发，我们可以先看看它的目录结构。比如我这里新建Mui+html(底部选项卡)的项目

Paste_Image.png

主要是css文件，js文件。这里模板html里面引用的都是打过包的min文件。我们在开发的时候可以把引用改成mui.css和mui.js，这样如果要查看和修改就很方便了。

我们开发的时候可以打开Chrome控制台查看元素

Paste_Image.png

写一些内容主要是以cs3,h5,js为主。这里最好是不受移动端开发的思维限制，毕竟其实MUI的开发基于react.js就是web前端开发哦。

2.MUI

比如要添加一个搜索框

<div class="mui-input-row mui-search">
               <input type="search" class="mui-input-clear" placeholder="搜索"></input>
            </div>

比如要写一个滚动的页面效果(Listview)

Paste_Image.png

<div class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--这里放置真实显示的DOM内容-->
    </div>
</div>

   <script>
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
        mui.init({
//          swipeBack:false //启用右滑关闭功能
            indicators: false, //是否显示滚动条
        });
    </script>

这里务必引入mui.js和mui.css，否则滑动效果不会出现！！！

诶，那怎么能写这样的效果呢？1.前端非常熟练 2.官方文档

官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll

注意:

(1)初始化等等的操作都是在Js中完成的
(2)配置项是初始化操作中的可写参数！
(3)如果要修改控件效果，可以直接去mui.css里面找。
(4)初始化和init操作要放在body下完成

Paste_Image.png

后记：今天先简单介绍到这里，后面有更多的经验再和大家分享。