APP内嵌网页(hybrid)前端开发试水_hbuild做一个app内嵌网页-优快云博客

本文介绍了作者初次尝试Hybrid App内嵌网页开发的经历，包括业务需求、配置WebView测试环境、模拟数据、处理复杂功能、接入接口、精修动画及测试过程。通过这次实践，作者对jsBridge和Hybrid App的双向通信有了初步理解。

业务需求

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

大致流程

切页面

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

配置 webview 测试环境

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