<转载>H5是如何来做移动端的开发的

内容简介

介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~

无所不能的js

最开始js仅仅局限于网页上一些效果,操作网页内容等,

但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃,

native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃。

前端涉及app的两种方式

适应移动端的网页

大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表,

说的简单点就是对移动端做了适配,是的布局样式组件都适合移动端展示,

我的个人网站(uikoo9.com)就是使用bootstrap3做的,手机浏览效果也很好。

缺陷:毕竟不是app,不管怎么样也没办法取代app的便捷和功能强大。

js+html+css+打包技术

比较有名的就是phonegap了,国内的是hbuilder,

大概的意思是html负责页面内容,js负责效果以及调用原生app方法,ui框架负责样式,

最后打包成apk或者ipa。

hbuilder(http://www.dcloud.io/

不谈phonegap,不适用国内国情,

是的,你没有看错,这是一个开发的ide,其实就是对eclipse进行了深度定制。

特点是快捷键比较多,支持移动app开发(h5+方式)。

h5+(http://www.html5plus.org/#home

终于说到正题了,这个就是之前提到的打包技术,

可以说nodejs将js带到后端,h5+将js带到移动端。

原理

上面说过的原理,再次说一遍:

html负责页面,也就是的内容和框架;

js负责调用方法,也就是调用一些移动端原生;

ui负责样式,比较有名的bootstrap,amazeui,jquery mobile,mui

ui比较

上面说的几个ui,做下简单比较,仅代表个人观点,

amazeui,功能和bootstrap重复,官方解释是对中文排版做了优化,个人觉得有点多余,bootstrap就很好。

bootstrap,适合移动端浏览网页适配,移动端浏览效果不错,但是还是网页。

jquery mobile,专门对移动端做定制,看起来就像手机应用一样,js+css(300k),国外的,不推荐,有坑。

mui,这个是推荐的,比较了jqmobile和mui,显然mui效果样式好点,估计也会有坑,但是支持国产吧。

前端搞app

搭建开发环境

不需要搭建ios和android的开发环境,只需要下载hbuilder(估计需要java环境支持),

选定ui

目前推荐mui,效果不错

写事件

通过js调用原生方法实现app效果

写业务逻辑

如题

代码和图片(简单示例)

文字说再多感觉也不是很大,下面来代码和图片,

文件结构:

你没有看错,仅仅需要一个html页面,加一些js,css,这个例子使用的jquery mobile

页面代码:

head部分,仅仅引入一些必须的js和css

[html]view plaincopy

hello world

function helloworld(){

alert("hello world!")

}

document.addEventListener('plusready', function(){

alert("welcome to Html5plus!");

});

body部分,普通的页面

[html]view plaincopy

首页

一些主体内容在这里。。

第一个

第二个

第三个

uikoo9.com

调试

手机连接电脑,然后在hbuilder下运行——手机运行——在设备上运行,

就直接可以在手机上看效果了

效果

打包

在hbuilder中发型——app打包,然后交给云端去打包,打包好后会自动下载,例如

心动了吗?

现在,如果你会html+js+css,那你只需要一个hbuilder就可以开发app了,通吃android和ios

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • 会说话能当饭吃,记住,这句话是真理。我最近在看美剧《纸牌屋》,我看到第三季了,里面的安德伍德一次又一次的通过自...
    妖孽LWL阅读 777评论 0 0
  • 暮雨潇潇日光隐, 云笼星河不再明。 难解阴阳孰可料, 人间路上百鬼行。
    种花家吴岭阅读 279评论 0 1
  • 自媒体如今已经是风风火火,成为互联网产业中不可或缺的内容生产者,越来越多的东西依附着自媒体而存在。 但是,不得不说...
    赚女某体阅读 270评论 0 1
  • 17岁的我并不满意28的自己 ,28岁的我也并不满意17岁的自己。好像时间过了很久,慢慢模糊了最初的自己 。反思,...
    臭猴子不臭阅读 176评论 1 1
  • 1.在安卓市场中,下载apk编辑器; 2.用apk编辑器打开要修改的apk文件,选择Full Edit选项; 3....
    赵福强阅读 3,458评论 0 0