H5开发移动端APP基于H5+

写在前面

  一直从事iOS原生APP开发,对H5前端开发那一套因为无知所以一直生畏,所以很长的一段的时间里只做原生的开发,但对跨平台的这种技术操作始终抱有很大兴趣。由于工作需要做个业务相对简单的应用,而又要iOS和Android,所以开始正式着手H5。

后来又做了个自己业余喜欢的小应用(主要是为了安卓,iOS我直接写的原生的【关于这个应用这里有介绍)】,以下的总结介绍也是基于此应用的。

关于H5开发移动端APP

优点:

  • 很大的好处就是快速、简单、方便,一套代码几乎不用怎么修改就可以同时打包iOS、Android安装包。

  • 基于前端各方面应用技术栈成熟,资料齐全。

  • 有不少的平台和开发工具可供选择,集代码编辑、调试、打包几乎一条龙服务 , 基于H5+的环境与原生底层交互越来越多,很多功能界面在效果上几乎和原生的没啥区别。

不足:

  • H5开发APP的不足在与原生的相比,有些场景暴露的很彻底。比如一些过度动画,手势操作,任务异步处理等 , 还有一些访问相册、图片处理底层设备硬件之类的。这些地方表现的有明显的不足。

  • 开发工具框架之类的太多,如果一个不熟悉前端的新人过来,几乎不知道该如何下手。

所以对于一些业务逻辑简单,没有复杂的操作处理的应用,H5开发再好不过。对一些重型的应用还是原生的为主,H5为辅助也是一个很好的搭配。

开始着手

首先开发工具及框架,我选择了 HBuilderX,一个牛逼而又好用的前端开发工具。

mui_logo.png

集成了各种插件工具,基于MUI , H5+强大操作,同时可以在线打包,一键生成iOS、Android应用。文档完善(刚开始看仍然会让你懵逼,就好比一个参考手册,没有一个完善的流程说明,所以学习的时候需要点时间)。具体官网看吧http://www.dcloud.io ,目前还有些不太完善,但不影响我喜欢它!

我用的最新HBuilderX 版本 1.3.2.20181214 , 特此买了个安卓手机荣耀10测试。

经过一段时间的爬坑钻研、学习摸索,基础开发效果我感觉还不错,没发现什么毛病。

  • 在开发过程中,使用了强大的Vue.js作为列表的数据渲染和事件绑定。值得一提的是或许由于初次接触这个框架,它给我一种震撼的感觉,数据绑定、事件处理及关联实在太方便了。
  • 一些图片引入了阿里巴巴字体库 , 关于如何引入自定义的字体库,这一点官方文档写的很清楚。
  • 大多操作使用H5+ 这一强大的基础库,官方号称有50多万个API,几乎涵盖了原生操作的方方面面。

APP效果截图

效果图1.png
效果图2.png

看效果怎么样,是不是和原生的一模一样?😂😂😂
目前已实现了很大一部分的功能,后续有时间还在继续完善。完善后的代码我会放到GitHub上供大家学习参考。

已发布开源详细看这里:

xx头条开源了(纯H5项目) https://www.jianshu.com/p/89fae6aa143f

离线打包操作(新增)

Android : MUI、HBuilderX、H5+开发APP本地打包(Android)

iOS : MUI、HBuilderX、H5+开发APP本地打包(iOS)

总结

  • H5开发的效果无论界面效果上,还是操作体验上,在现在的手机上没有传说中的那么差劲。
  • 跨平台的操作我喜欢,以后学习好原生的同时还会继续跨平台技术栈的学习。
  • 对于不会原生开发的前端小伙伴,这种方式来开发个APP也是个很好的选择。

Hi 大家好!我是Light413,一名iOS开发者,喜欢前端及后台开发,没错,就是全干。简书就是我的阵营,我喜欢在这里学习,在这里分享。
以后文章会不断的更新,介绍关于iOS开发学习总结 , 介绍基于MUI 、H5+ 及H5开发中感悟记录总结。感觉有用就点赞哈,喜欢就大胆的关注。

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