混合应用从开发到发布

前段时间基于HybridStart开发了一个公司内部APP,重走了一遍混合应用从开发到发布的整个流程,唤起了很多坑的记忆,也为HybridStart修复了不少细节bug,下面简单回顾一下过程中值得一提的几个点。

开发前准备

基于APICloud+HybridStart开发混合应用的门槛是极低的,一个初级水平的前端开发就应该可以从容搞定,这里有一个详细的混合应用新手入门教程;对于有一定经验的开发者,在做好项目准备工作之后,应该排查以下几项东西有没有准备好:

  • APP图标 200x200 png格式
  • APP启动页 1080x1920 格式不限
  • IOS测试证书和发布证书(安卓证书平台可以自动生成)
  • 添加所需模块,移除冗余模块
  • 核对config.xml中的信息,包括appID、权限信息

以上都准备就绪后就可以在平台上打包一个”自定义Loader”,安装到安卓手机上,打开IDE,开启wifi调试,进入无忧无虑的APP开发阶段了。

开发中可能遇到的坑

安卓上的问题自4.4.2之后就比较少了,可能出现的绝大多数问题都属于表现层面上的兼容问题,基本上都是由于ROM厂商对webview的篡改导致的,这次开发的APP面向的主要用户群体是IOS用户,安卓上面没有做大规模的测试,仅在开发中遇到了一个页面切换闪白色块的问题,表现为返回到部分页面时屏幕上会随机闪现大块的白色色块,页面进场后消失。首先排查模块,发现不是模块导致的,加上受影响的页面很固定,所以猜测问题出在webview上,可能是问题页面的部分样式写法触发了渲染bug,经过对样式的排查,果然找到原因了,是一个绝对定位的伪元素引起的,加上transform:translate3d(0,0,0);强制开启硬件加速之后解决了问题。

IOS上的问题历来是不多,但很奇葩,这次遇到的问题也算IOS上的一个经典问题了,就是把滚动元素的事件委托在body上无效,只能委托在body内的一个容器元素上,而且body的高度还必须自动,如果body高度100%,那么会出现更奇葩的情况,当前屏幕范围内的元素事件可以触发,滚动后新进入屏幕的元素事件不会触发,只能理解为滚动后相当于把body整体上移了,导致点击事件没有落在body元素上,而这毫无疑问是个bug。

IOS上架

开发完成后最大的一个难关就是IOS上架了,这次上架总体还算顺利,被驳回一次是因为自己的疏忽,申请了一个没有必要的权限,因为HybridStart默认集成了百度地图插件并开发了定位相关的功能演示,所以在config.xml里申请了一个后台定位的权限,新APP并不需要定位和地图相关功能,因此将模块及相关代码都移除了,但百密一疏忘了将config.xml的权限删掉,导致被驳回,这里也给大家提个醒,如果要上架的话这些细节一定记得检查。

混合应用IOS上架另一个最常犯的错误就是忘了屏蔽自动更新,自动更新太方便了,基本所有的APP都会做,但如果IOS版要上架苹果商店,一定记得在IOS里隐藏相关功能按钮,否则一定上不了架的。

后记

经过这次项目的检验HybridStart已经准备好了应对各种类型的混合应用开发,代码仍在持续维护,文档主要内容已完成,解决方案部分和细节修缮我会抽时间完成。

附:

  1. HybridStart项目主页
  2. 混合应用新手入门教程
  3. 本次项目部分截屏

此处输入图片的描述
此处输入图片的描述
此处输入图片的描述
此处输入图片的描述
此处输入图片的描述

前端路上原创技术文章,转载请注明出处:http://refined-x.com/2017/08/08/混合应用从开发到发布/

对文章内容有任何疑问欢迎留言讨论,或者扫描下方二维码加入“前端路上-知识星球”付费提问。

前端路上-知识星球