业务需求
由于之前一直在做纯前端和很久以前涉及过webAPP,对于hybird App的了解完全不够,这次入职以后以这个项目入手挑战确实不小。不过过程中有小伙伴指导,加上是一个不太难的页面修改工作而不是从头搭建,还是减小了不少难度的。
大致流程
切页面
由于UI已经有了,大部分逻辑也是可以套用已有的内容,所以切页面就成了第一步,按照给定的页面样式把HTML大概结构确定下来,写样式,写一些简单交互。
配置 webview 测试环境
这个步骤还是挺挠头的,之前没有配置过之前的环境,在写好页面后拿到了测试机和测试包,测试包就是一个简单的带着可以调用jsBridge的webview,服务在本地运行的话,需要使用Charles对手机的网络进行代理(其实就是在中间层抓一边包),我也试着用过fildder但是始终没有搞对,相对来说Charles容易一点。PC端安装好Charles后手机去连接到同一个局域网下,然后配置这个WiFi的高级选项里的代理,配置成服务所在的主机IP地址,选Charles监听的接口就行了。
这样,我们所有在手机端的网络相关操作都会被Charles抓取到,也可以用手机测试包的webview顺利的访问到运行中的服务了。
模拟数据,抽离HTML
一般这个时候应该可以拿到接口文档或者接口返回的数据结构了,那我们可以去把之前写死的HTML中的数据部分全都按json的方式抽离出来,然后HTML中就很舒服了,不再有写死的内容,页面的加载速度当然会变得很