前段时间基于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已经准备好了应对各种类型的混合应用开发,代码仍在持续维护,文档主要内容已完成,解决方案部分和细节修缮我会抽时间完成。
附:
- HybridStart项目主页
- 混合应用新手入门教程
- 本次项目部分截屏
前端路上原创技术文章,转载请注明出处:https://refined-x.com/2017/08/08/混合应用从开发到发布/
不甘平庸的你,快来跟我一起充电吧,关注看风景,获取更多精彩内容。