本地调试小程序的webview的两个方案

最新推荐文章于 2024-11-26 16:09:06 发布

原创最新推荐文章于 2024-11-26 16:09:06 发布 · 5.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #webpack

前端专栏收录该内容

23 篇文章

订阅专栏

背景

小程序中 web-view 只能访问配置好的合法域名，调试时需要发布到线上环境才能看到效果，不方便也不满足调试需要频繁修改代码的需求，若能在本地直接进行代码调试，则可大大减少调试代码时间。

方案一

修改本地 hosts，使配置好的合法域名映射到本地的 ip 地址。

以项目A为例，配置一个合法业务域名：https://baidu.com（详细配置前往微信公众平台），配置完成后可在开发者工具中可见：
在这里插入图片描述
在本机hosts文件中最后添加如下代码： 127.0.0.1 baidu.com
host位置
若因为权限修改不成功则使用替换文件方案，可复制该文件粘贴至桌面，然后在桌面修改复制过来的hosts文件，修改完成后移动到原来文件位置会提示是否替换，点击确认即可。这时访问baidu.com会自动跳转至本地127.0.0.1。

对应的项目A本地代理开启 https，如下：

// webpack配置文件中修改
 devServer: {
      proxy: {
        "/api": {
          target: localConfig.proxyTarget,
          pathRewrite: { "^/api": "/" },
          secure: true,
          changeOrigin: true
        }
      },
      https: true // 微信的web-view使用本地网站需要开启https
    }

方案二

通过抓包工具 whistle 就可以做到拦截线上页面请求数据，再响应本地代码。

1、安装whistle并开启本地服务

$ npm install -g whistle & w2 start

2、设置全局代理命令（不建议使用设置全局代理方式使用）

w2 proxy // 设置全局代理

w2 proxy off // 关闭全局代理
新手可能设置完后忘记关了会导致上不了网，关掉全局代理就好

3、使用插件SwitchyOmega设置代理

下载方式：SwitchyOmega v2.5.19
滑到最下方点击chrome插件下载（v2.5.19这个版本安装时不会出现问题）
在这里插入图片描述
将下载好的文件直接拖入拓展程序，记得打开开发者模式。

打开插件继续配置一个本地代理这个就是我们刚才whistle默认的代理地址以及端口。
现在开启这个模式

抓包hppt请求已经没问题了
接着配置https证书，可以抓包https
在这里插入图片描述
勾选上两个选项，点击Download RootCA下载证书。
下载完成后双击打开-> 安装证书-> 安装在本地计算机-> 之后一路选默认就行-> 完成后显示导入成功

现在去访问https显示
在这里插入图片描述
还是不行手动键盘输入：thisisunsafe 就可以进去了，并且在whistle中能显示抓到的https包。

我们通过修改whistle中的规则去拦截请求并代理到本地即可。
如图将www.baidu.com 代理到本地地址。

此时访问百度就能代理到本地项目。
在这里插入图片描述
小程序调试webview就是利用这个原理
我们需要将手机进行代理具体步骤如下：
1、iphone修改wifi代理
2、iphone安装whistle证书
此时手机上网就会走本地的whistle中间人了。
那么将小程序开发者工具进行本地真机调试即可。