HTML5+MUI+HBuilder 之初探情人

07,08年那会儿正当Java火爆,C/C++仍是广泛运用的一门语言的时候,所以我的大学都献给了C/C++和Java。当诺基亚的倒闭成为按键机时代衰落的标志时,移动APP的开发也如破堤之洪,爆炸式的崛起了。可惜小弟不才,反映略慢,加上观念陈旧,(C++程序员的通病——觉得前端=低端&移动端=前端),因此并没有打好移动APP的基础。这给后来我和我们兴趣小团队做些创意式项目也带来了难以逾越的坎。现在这会儿,哪个web应用没有移动APP客户端,就好比飞机没有机翼,帅哥没房没车没学历,美女不能生育一样,让人无法接受,且火不起来。令人欣慰的是,我的团队里有人会Android开发,所以我所要担心的就是IOS开发了,于是我自学了IOS上的Xcode开发。现在的我只能说是入门。入门的我发现,IOS的开发太繁琐了,毕竟我不是专门做这个的,要成为熟练的开发者,需要花大量的时间研究开源控件,改写代码等,当然令人费心的还有Xcode奇葩的MVC逻辑(MVC用在web开发很好,但是用在本地应用开发真的适合吗?小弟作为一个Xcode新人吐槽一句:这就相当于当年VC中的MFC!用过Delphi和CBuilder这些RAD的都会喜欢BCB的界面开发,入手简单,所见即所得。所以在Delphi的Anders
Hejlsberg去了微软之后开发出了微软至今最伟大的语言——C#及相关组件,当我第一次使用C#做Windows窗体应用开发的时候,我感觉到了Delphi界面开发的灵魂)。

言归正传,当我正迷茫自己诸多想法皆要毁于巨大的App开发成本时,MUI的出现真正的解放了我的负担。先简单介绍下MUI:

MUI(Mobile User Interface)是一套基于Html5的,遵循Html5+规范的,中国团队(是否有老外我不知道哦)开发的,开源的(遵循MIT 条款),用于手机端界面开发的一套框架。以下内容摘自MUI在Github上的项目介绍:

性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。——摘自MUI在Github上的项目介绍

MUI的出现绝非偶然,小弟就曾经有过类似的完整的设计,所以当MUI出现在我的视野中时,更多的是那种“英雄所见略同”的快感。我曾想过并初探过Xamaria的使用,这玩意一是收费,二是感觉有点半成品,开发环境很繁琐,不适合新手作为一个业余爱好使用。

Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单。Xamarin的产品简化了针对多种平台的应用开发, 包括iOS、Android、Windows Phone和Mac App。Xamarin由许多著名的开源社区开发者创立和参与,而且也是Mono项目的主导者——C#与·NET框架的开源、跨平台实现。——摘自百度百科。

年初(2014)时,我就想过为啥不可以出来一款类似于JVM的,可以运行在安卓,IOS上的虚拟机,然后开发者只需要使用一门语言(Java,Javascript,python等)就可以开发出运行在任何移动平台的软件呢?然后再使用C#开发Winform(等于用BCB/Delphi开发windows应用)的方式来开发APP界面呢?到那个时候,用户只需要拖拖控件,双击添加事件,修改修改样式等属性就可以完成通用的应用。而且,APP的安装包会很小,我们把一些规范的样式和基础控件都放到这个虚拟机中,运行时只需要按照ID来调用。当然,我等草民肯定是没有这个能力,时间,金钱来做这个的。。。

MUI的诞生,绝对是我今年听到的对我最有用的软件行业的消息了!它将极大的提高了草根程序员开发web产品的单兵作战能力。虽然我不熟悉原生APP的开发,或对于HTML,CSS和JS并不能说是精通,但是我不虚啊!!我淡定了啊!!我能hold住啊!!跟Xcode的学习成本比,这算啥!虽然我是xcode菜鸟,不应该黑xcode,不过之前的swfit的出现,让我看到了猪跑···(没吃过猪肉,还没见过猪跑吗?)

MUI是移动端开发的革命者!终将革掉那些高富帅,“土豪劣绅”,大地主(BAT等勿对号入座 ^_^)才能用的起的开发方式的命。也许MUI之后还有更加优秀的类似框架产生,但是不可否认的是,目前(2014年年底),MUI是基于H5的最好的,最有潜力的前(钱)途的框架!

MUI框架的原理图如下:

HTML5+ Runtime即H5的运行环境,它的功能其实就是手机上Web browser,不过要加上一个形容词:高效的! 它执行JS和HTML的速度比IOS自带的Safari可要高多了。通过高效执行HTML5和JS,MUI框架才能实现和Native媲美的速度。

MUI框架目前的产品——HBuilder,也是遵循了H5+规范的H5 IDE。通过HBuilder,我们可以快速开发出H5网页,而它跑在MUI框架中的速度非常快,您不用担心他看起来不像native。另外,HBuilder号称史上最牛的Html+js IDE,提供了各种快捷键,和缩写方式。小弟体验了下,感觉确实不错。不过这个工具做的再好,毕竟意义没有MUI本身大,不过还是非常值得鼓励的。

要使用HBuilder开发和调试移动端APP(且容忍小女子这么称呼吧),只需要:

(1)下载手机端软件:http://dcloud.io/hellomui/

(2)下载Hbuilder,安装,打开。

————————下面是开发阶段了——————

(3)新建,编写一个项目(html,js,css,图片等组成的)。

(4)插上您的手机,连接到电脑,点击运行按钮(具体的方式参见教程),进行调试。

(5)打包发布!

咋样?就这么简单。这快感!!!啧啧。

再来谈谈我对MUI的发展预测:

一开始,MUI最为一个吊丝框架,肯定不敢大摇大摆的要求这要求那的,所以只能把自己的runtime打包到任何一个发布的应用中。所以如果一个用户的手机里装了多个Hbuilder开发的APP,那么会有多个重复的基本库。不过MUI框架是很小的,不用很担心。

随着MUI的推广,样式的丰富,对Runtime和核心包作出了更大更复杂的要求,因此这个包应该会变大,从而推动了H5 + Runtime的平台化和固件化(软件固件),也许过几年,每个手机的操作系统都会自带这个运行环境,基于它开发的APP可能只有几百KB。

至于MUI的钱途命运,要么自成一家,为各大手机商提供服务,索要服务费用,又或者被Apple,三星这样的巨头以重金收购。总之,这项技术是很好的,但是盈利模式和最终命运会和Java类似。

希望MUI的同志再接再厉,做好后续的服务和工作。刚使用了下语音输入功能,好像有点小BUG。

最后引用一句名言,或者说是废话,开个玩笑,听听就行:

草根程序员想要逆袭高富帅,迎娶百富美,就必须使用更加廉价(both in time and money),高效,高端的工具,让我们有时间去关注业务!去思考未来!去享受生活!那些个啥啥啥啥的,老说开发不懂业务不懂爱,程序员那细心的操作,耐心;架构师那缜密的思维,大局观,你真当我们要玩业务玩不过你们么?我们只是穷(both
in time and money)而已(戳到泪点)。——马莎士比亚云。

(本文纯属饭后闲话,勿对号入座,口水满屏) 

时间: 2024-10-23 04:16:48

HTML5+MUI+HBuilder 之初探情人的相关文章

Html5系列——HBuilder+Html5Plus+MUI+流应用:国产最牛逼装备介绍

DCloud首页 DCloud问答及文档 http://my.oschina.net/poorzerg/blog/379924 牛逼的东西不需要多说什么,大家请看完上面两个链接. 我用了一下感觉他现在最大的问题就是打包,什么时候如果能开源打包,并且提升打包速度一定会更火的.

Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview

昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) insertOne({a:1}) 查: db.collections.find({a:1,b:1}) db.collections.findOne({a:1}) 改: db.collections.update({a:1},{$set:{b:2}}) // 官方不推荐了 db.collections.u

HTML5 mui框架(声明方式)(折叠面板)(数字角标)(按钮)

声明方式(HBuilder会自动生成) <!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" /> <

Html5+Mui前端框架,开发记录(三):七牛云 上传图片

1.Html界面: 1 <div id="container"> 2 <label>凭证:</label> 3 <div id="uploadImage" class="mui-btn" style="float: left; margin-top: 5px;text-align: center;padding:10px;width: 100px;">选择图片 4 </di

MUI Hbuilder设置夜神模拟器运行APP项目

1 安装Hbuilder和夜神模拟器 2 Hbuilder  新建移动app项目 3 hbuilder:运行 =>浏览器运行 => 设置web服务器 =>Hbuilder 第三方安卓模拟器端口:62001 4 运行 =>真机运行 =>HBuilder基座运行 5 运行结果 原文地址:https://www.cnblogs.com/coolly/p/8330355.html

移动端开发工具整理

1. App原型工具 原型以一种"粗糙"的方式展现产品的核心功能,是一种最简单和直白的需求表现形式.是以一种图形化的方式展现需求, 需求人员无论是从客户处获取需求,还是老板拍板需求,还是通过调研确定需求,都要确保你知道的需求是"正确"的需求,最快的方式,就是设计出原型,然后作为样本给客户或老板看,验证需求的正确性.制作原型是业务人员应该掌握的一项基本技能. 基于原型的特点,对于制作原型的原型工具就有一个最基本的要求:高效率 原型是需求分析阶段的一个产物,此阶段最主要

MUI(1)

今天小编用HBuilder+MUI开发移动APP,不用Android原生也不用IOS原生,仅仅用HTML5+MUI.小编也是初学者所以如有不准确的地方望大家指出帮助小编改正,同时也可以促进大家的深入学习. HBuilder的下载官网地址:http://www.dcloud.io/:MUI官网下载地址:https://www.muicss.com/. HBuilder是免费的,但是仅仅需要登录,安心注册,方向登录使用,完全免费的. 第一次启动HBuilder需要登录和简单的设置不过很easy啦.启

如此繁荣的移动webapp开发市场:总结当下的一些移动web开发套件

写在前面: 因为移动市场的盛行带动了移动社交.移动购物.手游.智能化硬件等多个新兴领域.智能终端硬件水平越来越高,运行其上的web浏览器能力也越来越强,加上HTML5\JS\CSS的蓬勃发展,Web已经能够展现出非常不错的体验.但是单纯浏览器中的web还是不能代替本地原生应用,因为通用浏览器还不能方便地调用移动设备的本地资源例如硬件设备.本地文件.后来就有人想到了,为啥不能自己做一个可以让web方便访问本地资源的专用浏览器呢?这就有了现在移动Web应用开发套件了.这里面涉及两个东西: 1.运行框

移动开发索引

跨平台 HTML5 App 开发索引  开发工具:http://www.dcloud.io/  UI框架:http://dev.dcloud.net.cn/mui/  HBuilder使用的HTML5规范:http://www.html5plus.org/doc/ 学习资源:http://ask.dcloud.net.cn/docs/ Android App 开发索引 开发工具:Android Studio http://www.android-studio.org/ UI组件库:http://