APP内嵌网页(hybrid)前端开发试水

业务需求

由于之前一直在做纯前端和很久以前涉及过webAPP，对于hybird App的了解完全不够，这次入职以后以这个项目入手挑战确实不小。不过过程中有小伙伴指导，加上是一个不太难的页面修改工作而不是从头搭建，还是减小了不少难度的。

大致流程

切页面

由于UI已经有了，大部分逻辑也是可以套用已有的内容，所以切页面就成了第一步，按照给定的页面样式把HTML大概结构确定下来，写样式，写一些简单交互。

配置 webview 测试环境

这个步骤还是挺挠头的，之前没有配置过之前的环境，在写好页面后拿到了测试机和测试包，测试包就是一个简单的带着可以调用jsBridge的webview，服务在本地运行的话，需要使用Charles对手机的网络进行代理（其实就是在中间层抓一边包），我也试着用过fildder但是始终没有搞对，相对来说Charles容易一点。PC端安装好Charles后手机去连接到同一个局域网下，然后配置这个WiFi的高级选项里的代理，配置成服务所在的主机IP地址，选Charles监听的接口就行了。
这样，我们所有在手机端的网络相关操作都会被Charles抓取到，也可以用手机测试包的webview顺利的访问到运行中的服务了。

模拟数据，抽离HTML

一般这个时候应该可以拿到接口文档或者接口返回的数据结构了，那我们可以去把之前写死的HTML中的数据部分全都按json的方式抽离出来，然后HTML中就很舒服了，不再有写死的内容，页面的加载速度当然会变得很