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开发中感悟记录总结。感觉有用就点赞哈，喜欢就大胆的关注。