Hbuilder+MUI初探索(基于react.js的H5移動(dòng)端app開發(fā))

背景:公司目前做一個(gè)旅游網(wǎng)的app應(yīng)用。一同事那邊需要用leaflet做地圖,擔(dān)心地圖集成到原生安卓里面有問題,老大呢又想把web版本的后臺拿過來做一些修改,直接用作app的服務(wù)端(聽著心累啊)。提出了用Hbuilder和Mui的移動(dòng)應(yīng)用開發(fā)。老板很溫和的問:有沒有興趣研究一下?作為中流砥柱,我知道...這個(gè)研究工作的活又得交到我得手上了,OK,舍我其誰,我不如地獄誰入地獄?真正的勇士敢于直面裝逼的人生,那就來干吧!

正文:

1.Hbuilder

開始肯定是先下載Hbuilder的IDE開發(fā)工具,其實(shí)這個(gè)還不錯(cuò),智能提示,快捷鍵都很強(qiáng)大。http://www.dcloud.io/index.html

接著可以新建一個(gè)項(xiàng)目玩玩,有web和移動(dòng)app兩種。這里可以選擇模板,看看里面的demo。

Paste_Image.png

創(chuàng)建完成后,選中項(xiàng)目,在手機(jī)端運(yùn)行就可以用了,這里我是用的genymotion模擬器,部署上去還挺快。

Paste_Image.png

如果在新建的時(shí)候是新建的一個(gè)mui項(xiàng)目,可以在項(xiàng)目里面新建html文件,選擇一些模板體驗(yàn)

Paste_Image.png

接下來,如果要進(jìn)行開發(fā),我們可以先看看它的目錄結(jié)構(gòu)。比如我這里新建Mui+html(底部選項(xiàng)卡)的項(xiàng)目

Paste_Image.png

主要是css文件,js文件。這里模板html里面引用的都是打過包的min文件。我們在開發(fā)的時(shí)候可以把引用改成mui.css和mui.js,這樣如果要查看和修改就很方便了。

我們開發(fā)的時(shí)候可以打開Chrome控制臺查看元素

Paste_Image.png

寫一些內(nèi)容主要是以cs3,h5,js為主。這里最好是不受移動(dòng)端開發(fā)的思維限制,畢竟其實(shí)MUI的開發(fā)基于react.js就是web前端開發(fā)哦。

2.MUI

比如要添加一個(gè)搜索框

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

比如要寫一個(gè)滾動(dòng)的頁面效果(Listview)

Paste_Image.png
<div class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--這里放置真實(shí)顯示的DOM內(nèi)容-->
    </div>
</div>

   <script>
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 減速系數(shù),系數(shù)越大,滾動(dòng)速度越慢,滾動(dòng)距離越小,默認(rèn)值0.0006
        });
        mui.init({
//          swipeBack:false //啟用右滑關(guān)閉功能
            indicators: false, //是否顯示滾動(dòng)條
        });
    </script>

這里務(wù)必引入mui.js和mui.css,否則滑動(dòng)效果不會(huì)出現(xiàn)!!!

誒,那怎么能寫這樣的效果呢?1.前端非常熟練 2.官方文檔

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

注意:

(1)初始化等等的操作都是在Js中完成的
(2)配置項(xiàng)是初始化操作中的可寫參數(shù)!
(3)如果要修改控件效果,可以直接去mui.css里面找。
(4)初始化和init操作要放在body下完成


Paste_Image.png

后記:今天先簡單介紹到這里,后面有更多的經(jīng)驗(yàn)再和大家分享。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容