HBuilder与MUI的简单教程

来源：互联网发布：html5 websocket php 编辑：程序博客网时间：2024/05/31 06:23

关于移动App开发.

很多人都觉得html5不如原生,并且放弃html5.比较多的原因是因为性能问题.

这是对2者的比较

HTML5开发：兼容性好，成本低，开发周期短，但无法对硬件底层的功能进行调用，性能不如原生。

原生开发: 可访问手机所有功能(GPS、摄像头)，速度更快、性能高、整体用户体验不错,但由于采用一行一行手写代码的方式开发，所以它的开发周期比较长，成本高，并且原生应用没有跨平台兼容的能力。

未来的趋势

虽然html5性能不怎么样,但觉得html5+以后是趋势，why?因为以前手机很少能玩手游的，但最近几年很多手机都能玩手游了,所以以前html5开发的app运行效率虽低，但由于以后手机的性能越来越快，而且html5+开发较原生容易些,开发周期短，成本低，所以以后html5和原生，相信更多人会选择html+.要不也不会出现phonegap.

HBuilder的出现

HBuilder是DCloud（数字天堂）推出一款支持HTML5的Web与移动app开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率，据说HBuilder比其他开发工具至少快5倍，再加上MUI框架虽不能说很完美，但比以前的框架更接近原生。还有最重要的是免费。所以特别适合创业者和有创意的人快速开发一款高效的app.

最近看了一些网友写的HBuilder 和mui 感觉不全，不是只写HBuilder 就是只写mui，也可能是HBuilder 刚出不久吧.所以我打算写全点，本人也是初探.也算是复习.

下载HBuilder

HBuilder http://www.dcloud.io/

界面如下

文件结构只有一个html页面,css和js文件也就是是说只要会html5+css+js就可以开发app了，不需要Android 和IOS

还有刚才写的小Demo

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>    <title></title>    <scriptsrc="js/mui.min.js"></script>    <link href="css/mui.min.css"rel="stylesheet"/>    <script type="text/javascript"charset="utf-8">                            </script>  </head><body>            <button class="mui-btnmui-btn-block">Block button</button><buttonclass="mui-btn mui-btn-primary mui-btn-block">Blockbutton</button><buttonclass="mui-btn mui-btn-positive mui-btn-block">Blockbutton</button><buttonclass="mui-btn mui-btn-negative mui-btn-block">Blockbutton</button> <buttonclass="mui-btn mui-btn-block mui-btn-outlined">Blockbutton</button><buttonclass="mui-btn mui-btn-primary mui-btn-blockmui-btn-outlined">Block button</button><button class="mui-btnmui-btn-positive mui-btn-block mui-btn-outlined">Blockbutton</button><buttonclass="mui-btn mui-btn-negative mui-btn-blockmui-btn-outlined">Block button</button>          </body></html>

效果如下

另一个Demo

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <title></title>    <script src="js/mui.min.js"></script>    <link href="css/mui.min.css" rel="stylesheet"/>    <script type="text/javascript" charset="utf-8">          </script>    <style>              body{position: relative;}              .mui-btn{width:80%; margin: 0 auto; margin-top: 10px; margin-left: 10%;}          </style>  </head><body><ul class="mui-table-view"><li class="mui-table-view-cell mui-hidden">cared<div id="M_Toggle" class="mui-switch mui-active"><div class="mui-switch-handle"></div></div></li><li class="mui-table-view-cell mui-media"><a href="#">  <img class="mui-media-object mui-pull-left" src="3.jpg"><div class="mui-media-body">幸福<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="#"><img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/muwu.jpg"><div class="mui-media-body">木屋<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="#"><img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/cbd.jpg"><div class="mui-media-body">CBD<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="#"><img class="mui-media-object mui-pull-left" src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg"><div class="mui-media-body">远眺<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p></div></a></li></ul></body></html>

效果如下