@MickeyWang 2018-01-26T18:01:55.000000Z 字数 1975 阅读 572

京东app中webview环境代理配置

forJD tools

@王琪(wangqi65)

京东app中webview环境代理配置

前言

本文是一篇配置教程。适用于在京东app中的webview环境中测试待上线的H5应用。Powered by 冯旭东(fengxudong1)。

需要用到的软件物料地址如下：

软件准备

按照上述，下载Charles，并进行科学配置。如若PC或Mac及移动设备已处于同一wifi环境，可忽略安装360免费WIFI。

软件及环境配置

如果你还对Charles不是很熟悉，这里提供一篇完备详尽的Charles 从入门到精通，在时间充裕的情况下请参考查阅。下面对主要配置及接入京东app的调试步骤做以说明。

Charles配置

正常安装Charles后便可截获本机Http封包，如若需要过滤请求方便查看，请移步Charles 从入门到精通查看。为截获移动设备封包，在 Charles 的菜单栏上选择 “Proxy”->”Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的设置。

配置移动设备

此处以iPhone为例做介绍。首先我们需要获取 Charles 运行所在电脑的 IP 地址，Charles 的顶部菜单的 “Help”->”Local IP Address”，即可在弹出的对话框中看到 IP 地址，如下图所示：

在 iPhone 的 “ 设置 “->” 无线局域网 “ 中，可以看到当前连接的 wifi 名，通过点击右边的详情键，可以看到当前连接上的 wifi 的详细信息，包括 IP 地址，子网掩码等信息。在其最底部有「HTTP 代理」一项，我们将其切换成手动，然后填上 Charles 运行所在的电脑的 IP，以及端口号 8888。

设置好之后，我们打开 iPhone 上的任意需要网络通讯的程序，就可以看到 Charles 弹出 iPhone 请求连接的确认菜单，点击 “Allow” 即可完成设置。

配置截取 Https

点击 Charles 的顶部菜单，选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”，顺序执行安装。

如果我们需要在 iOS 或 Android 机器上截取 Https 协议的通讯内容，还需要在手机上安装相应的证书。点击 Charles 的顶部菜单，选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate on a Mobile Device or Remote Browser”，然后就可以看到 Charles 弹出的简单的安装教程。如下图所示：

如图显示，浏览器访问chls.pro/ssl，顺序执行安装。注意此时移动设备一定已安装前述步骤做过代理配置。

针对京东app的配置

针对app的配置，总的思路是截获http://api.m.jd.com/client.action?functionId=appCenter的封包，然后利用Charles的Map或Rewrite功能改写响应报文以展示想要配置的icon。

首先在app设置中清空缓存并退出，准备在Charles中截获封包；
重新进入app，点击app中的全部icon，找到下图中的1，右键点击SSL Proxying：Enable;
清空app缓存并退出，准备重新截获封包；
再次进入app，点击app中的全部icon，找到如下图中2所示的前置图标开头的http请求；
点击下图中3，复制一份响应数据4，并保存到本地文件，后缀为.json；

修改其中一项的name和url；

{
    "id": 126,
    "icon": "https://m.360buyimg.com/mobilecms/s80x80_jfs/t5830/118/179491490/8188/42c7ec47/591dab29N24f970a9.png",
    "slogan": "",
    "order": 4,
    "name": "酒店试用",// 已改为自定义
    "appCode": "jdsy",
    "jump": {
        "des": "m",
        "params": {
            "needLogin": "0",
            "url": "http://trip.hotel.m.jd.com/"// 已改为自定义
        },
        "srv": "4_京东试用_购京东_126_jdsy_-100"
    }
}

右击上图3，选择Map Local，关联上步中的json文件，如下图；
配置好后，再次清空app缓存并退出；
再次重新进入时，点击app中的全部icon，便可看到刚才配置的icon，点击跳转访问H5应用；

如若有任何问题，请咚咚联系以获取支持，谢谢。