背景：公司目前做一个旅游网的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
后记：今天先简单介绍到这里，后面有更多的经验再和大家分享。
网友评论