写在前面
一直从事iOS原生APP开发,对H5前端开发那一套因为无知所以一直生畏,所以很长的一段的时间里只做原生的开发,但对跨平台的这种技术操作始终抱有很大兴趣。由于工作需要做个业务相对简单的应用,而又要iOS和Android,所以开始正式着手H5。
后来又做了个自己业余喜欢的小应用(主要是为了安卓,iOS我直接写的原生的【关于这个应用这里有介绍)】,以下的总结介绍也是基于此应用的。
关于H5开发移动端APP
优点:
很大的好处就是快速、简单、方便,一套代码几乎不用怎么修改就可以同时打包iOS、Android安装包。
基于前端各方面应用技术栈成熟,资料齐全。
有不少的平台和开发工具可供选择,集代码编辑、调试、打包几乎一条龙服务 , 基于H5+的环境与原生底层交互越来越多,很多功能界面在效果上几乎和原生的没啥区别。
不足:
H5开发APP的不足在与原生的相比,有些场景暴露的很彻底。比如一些过度动画,手势操作,任务异步处理等 , 还有一些访问相册、图片处理底层设备硬件之类的。这些地方表现的有明显的不足。
开发工具框架之类的太多,如果一个不熟悉前端的新人过来,几乎不知道该如何下手。
所以对于一些业务逻辑简单,没有复杂的操作处理的应用,H5开发再好不过。对一些重型的应用还是原生的为主,H5为辅助也是一个很好的搭配。
开始着手
首先开发工具及框架,我选择了 HBuilderX
,一个牛逼而又好用的前端开发工具。
集成了各种插件工具,基于MUI , H5+强大操作,同时可以在线打包,一键生成iOS、Android应用。文档完善(刚开始看仍然会让你懵逼,就好比一个参考手册,没有一个完善的流程说明,所以学习的时候需要点时间)。具体官网看吧http://www.dcloud.io ,目前还有些不太完善,但不影响我喜欢它!
我用的最新HBuilderX 版本 1.3.2.20181214 , 特此买了个安卓手机荣耀10测试。
经过一段时间的爬坑钻研、学习摸索,基础开发效果我感觉还不错,没发现什么毛病。
- 在开发过程中,使用了强大的
Vue.js
作为列表的数据渲染和事件绑定。值得一提的是或许由于初次接触这个框架,它给我一种震撼的感觉,数据绑定、事件处理及关联实在太方便了。 - 一些图片引入了
阿里巴巴字体库
, 关于如何引入自定义的字体库,这一点官方文档写的很清楚。 - 大多操作使用H5+ 这一强大的基础库,官方号称有50多万个API,几乎涵盖了原生操作的方方面面。
APP效果截图
看效果怎么样,是不是和原生的一模一样?😂😂😂
目前已实现了很大一部分的功能,后续有时间还在继续完善。完善后的代码我会放到GitHub上供大家学习参考。
已发布开源详细看这里:
xx头条开源了(纯H5项目) //www.greatytc.com/p/89fae6aa143f
离线打包操作(新增)
Android : MUI、HBuilderX、H5+开发APP本地打包(Android)
iOS : MUI、HBuilderX、H5+开发APP本地打包(iOS)
总结
- H5开发的效果无论界面效果上,还是操作体验上,在现在的手机上没有传说中的那么差劲。
- 跨平台的操作我喜欢,以后学习好原生的同时还会继续跨平台技术栈的学习。
- 对于不会原生开发的前端小伙伴,这种方式来开发个APP也是个很好的选择。
Hi 大家好!我是Light413,一名iOS开发者,喜欢前端及后台开发,没错,就是全干。简书就是我的阵营,我喜欢在这里学习,在这里分享。
以后文章会不断的更新,介绍关于iOS开发学习总结 , 介绍基于MUI 、H5+ 及H5开发中感悟记录总结。感觉有用就点赞哈,喜欢就大胆的关注。