业务需求
由于之前一直在做纯前端和很久以前涉及过webAPP，对于hybird App的了解完全不够，这次入职以后以这个项目入手挑战确实不小。不过过程中有小伙伴指导，加上是一个不太难的页面修改工作而不是从头搭建，还是减小了不少难度的。
大致流程
切页面
由于UI已经有了，大部分逻辑也是可以套用已有的内容，所以切页面就成了第一步，按照给定的页面样式把HTML大概结构确定下来，写样式，写一些简单交互。
配置 webview 测试环境
这个步骤还是挺挠头的，之前没有配置过之前的环境，在写好页面后拿到了测试机和测试包，测试包就是一个简单的带着可以调用jsBridge的webview，服务在本地运行的话，需要使用Charles对手机的网络进行代理（其实就是在中间层抓一边包），我也试着用过fildder但是始终没有搞对，相对来说Charles容易一点。PC端安装好Charles后手机去连接到同一个局域网下，然后配置这个WiFi的高级选项里的代理，配置成服务所在的主机IP地址，选Charles监听的接口就行了。
这样，我们所有在手机端的网络相关操作都会被Charles抓取到，也可以用手机测试包的webview顺利的访问到运行中的服务了。
模拟数据，抽离HTML
一般这个时候应该可以拿到接口文档或者接口返回的数据结构了，那我们可以去把之前写死的HTML中的数据部分全都按json的方式抽离出来，然后HTML中就很舒服了，不再有写死的内容，页面的加载速度当然会变得很快。
复杂功能
比如我的页面上最复杂的功能是一个模拟的输入框，他要相应各种不同情况下的唤起，要能插入不同值。这里我们可以放心的全身心去写这个部分，最后打包成类传递出来就好。
接入接口
完成其余的上传、获取的接口调用和数据处理，因为之前已经用json去写过了插入部分，所以基本只需要把返回的数据拿过来就能直接用了。上传的口才是需要重点调通的地方。
精修动画
再将各个地方的有问题的动画进行调整，性能进行优化。
交给测试找bug
到这里第一个入手的项目就算完成了。
总结
因为之前没碰过这种混合开发，不了解js和native通讯的问题，现在大致知道了双向通信的原理。web端从原生调用时候传入的url中获取需要的参数，触发不同的效果。在web中用iframe新建一个隐藏的页面，在页面进行切换的时候是会被原生抓取到的，这个时候向APP传值来告诉他要进行什么操作就可以了。
关于jsBridge的部分可能还是没看的太透彻，之后需要再回来看看，相信对于各种开发都还是有不少好处的。