本地调试小程序的webview的两个方案
两个方案更倾向第一个,比较简单,一看就懂,第二个则更能学到一些网络安全的知识。
背景
小程序中 web-view 只能访问配置好的合法域名,调试时需要发布到线上环境才能看到效果,不方便也不满足调试需要频繁修改代码的需求,若能在本地直接进行代码调试,则可大大减少调试代码时间。
方案一
修改本地 hosts,使配置好的合法域名映射到本地的 ip 地址。
以项目A为例,配置一个合法业务域名:https://baidu.com(详细配置前往微信公众平台),配置完成后可在开发者工具中可见:
在本机hosts文件中最后添加如下代码: 127.0.0.1 baidu.com
若因为权限修改不成功则使用替换文件方案,可复制该文件粘贴至桌面,然后在桌面修改复制过来的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中间人了。
那么将小程序开发者工具进行本地真机调试即可。
总结
两个方案更倾向第一个,比较简单,一看就懂,第二个则更能学到一些网络安全的知识。
阅读该文章记下这篇笔记 — 前往
更多推荐
所有评论(0)