h5移动端app开发工具

  • 时间:
  • 浏览:816
  • 来源:成都艾邦软件开发

使用H5开发移动端app

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

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

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

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

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

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

更多功能查看官方文档
https://www.dcloud.io/mui.html

H5 App设计者需要注意的问题
1.不要在没有流程图之就前开始设计或者画线框图

即便一个简单的H5 APP也要有一个思虑周全的流程图以确保在H5 APP有合乎逻辑的、合理的导航结构。跳过流程图直接进进入开发会让开发变得复杂、不可控很容易让用户迷茫最后选择关掉或者卸载你的App。

2.分工要明确不要忽略开发预算

一个计划好的H5 App可能有一个搜索框设计师预想的是一个产生实时结果的键入搜索但设计师不能是做这个重大决定的唯一决策人。

3.不要随意使用介绍动画

如果你打算使用介绍动画那要让动画时间尽可能短设计尽可能精细以及足够吸引人值得用户花费时间等待。

App加载过程中会先展现图片再过渡至动画。要确保这个过度是平滑的贴切自然的。有的App从加载图片过渡至介绍动画设计的非常蹩脚这就很无趣了。

4.别让用户空等

App加载时间过长很容易让用户以为出现了什么故障也会带来糟糕的用户体验。App加载的时候不要让用户看到空白的屏幕使用加载指示条或者小动画让用户知道App处于正常运行当中。

5、菜单层次太深

菜单项以5~7个为宜如果有二级菜单就要注意合理的菜单分类不能有太多层级的菜单否则很难预期也很难找到寻找和返回都会变得很麻烦。

6、交互流程分支太多

做交互的时候一定要有一个任务流程的概念贯穿始终用户是为了完成某个任务而使用软件的交互设计师除了关注界面元素、跳转逻辑和交互反馈之外还要关注用户任务分得清主要任务和次要人物给主要任务一个畅通无阻的清晰流程不要给予太多可能的分支干扰主要流程。

7、相关的选项离的很远

相关选项一定要具有操作上的延续性如果手机上相关选选离得很远的话用户一是容易迷失找不到下一步操作二是需要移动手指到屏幕另一端触发操作。

8、一次载入太多的数据

如果你的应用不能合理的帮助用户节约流量、电量提升浏览速度和浏览体验保证应用的稳定性能就不要谈什么用户体验。

9、把所有的操作都暴露出来

H5 APP产品交互设计要经历缩减、隐藏、附加、组织的过程千万不要妄图把什么功能、什么操作都暴露出来以彰显强大。你需要把自己应用的所有功能所有操作做个优先级设定那些常用的20%的功能放在界面的主要位置上其他80%的操作放在次要位置或合理归类组织后隐藏起来就可以了。

10、没有空数据界面设计

我们在做设计的时候往往是提供理想化的场景用户都已经进来了我们怎么玩。但是往往应用刚推出的时候是没有用户的甚至当应用有了一定用户基础的时候新进来的用户打开应用的时候应用仍然可能是一种没有数据的状态再或者当用户清楚了全部数据这三种情况下用户都可能遇到空数据的界面。

11、用户引导的滥用

如果是通用的功能、非重点的模块根本就不需要引导;如果是功能告知只需呀轻量级的引导;如果是版本更新说明说明书式的引导可以采用但是要言简意赅。

12、无加载中状态

H5 APP产品只要是需要联网需要交换数据都需要提供一个加载中状态的无论是菊花转还是Toast还是对话框且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。

13.不要忘记手势但不要滥用

不是每个元素都是可视化的比如iPhone Mail app的删除进程。在收件箱内用户可以猛击屏幕显示删除按钮用户就不用点击“编辑”选择信息然后再删除信息。

14.不要觉得每个用户有着跟你一样的App使用方式

可用性测试是必须的不管你的App看起来多么好。找值得信任的人(或者有经验的设计师)进行小范围封闭测试在公开发布之前更新下界面。另一个简单易行的获得用户反馈的方法是在分类网站张贴广告招募合适的人进行焦点小组测试。

15.上线前测试的重要性

对H5测试来说与app测试项并没有什么区别主要都是终端机的配饰问题特别是不同终端浏览器系统和分辨率但一样的是app有安装、启动等步骤相对简单。但在UI自动化测试功能遍历测试并没什么不一样。

写在前面

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

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

关于H5开发移动端APP

优点:

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

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

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

不足:

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

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

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

开始着手

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

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

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

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

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

APP效果截图

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

已发布开源详细看这里:

离线打包操作(新增)

Android :

iOS :

总结

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

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