背景：公司目前做一個旅游網的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

后記：今天先簡單介紹到這里，后面有更多的經驗再和大家分享。