关于 local webview 应用

[ajccom]

关于 local webview 应用

目前我们制作本地化 H5 项目越来越多，由于本地文件发送的请求都会受到浏览器的同源策略限制，并且浏览器无法模拟 APP 中注入的 api，当我们需要测试的时候，不得不寻求 APP 前端的帮助。这即拖延了我们的开发进度，也会干扰 APP 前端的正常工作。

所以我们急需一款调试工具可以为我们解决上述难题。然而目前网络上还没发现类似应用，所以我们只能自行开发一款软件，即本文描述的对象 —— local webview，下文简述为 LW。

LW 具有的功能

LW 具有多项功能：

• 使用非安全浏览器打开网页，禁止安全策略；
• 可以向网页中预先注入脚本；
• 支持多种设备型号；
• 自定义 UA；
• 自定义窗口尺寸；
• 旋转窗口；
• 可以使用 dev tool 进行 debug 等。

如何使用 LW

打开主界面

在项目根目录下的 electron.exe，双击它即可启动。

由于公司网络环境无法下载打包文件，所以目前以源码方式放出，也更方便大家进行个人调试、开发等。

需要打包的同事可以查看 electron-package 这个 NPM 包中的说明。

输入地址

在 URL 地址栏中输入需要访问的地址，点击 open 按钮或者按下回车键，会弹出一个浏览器窗口，和一个 dev tool 面板。

旋转窗口

点击 open 按钮边上的旋转按钮，可以重新打开浏览器，并会将窗口的宽高互换。

修改配置

在地址栏下方有几个配置项，除了注入 API ，其他一看就知道做什么用了。

注入 API

如果需要注入 API，需要勾选注入 API 复选框，这时会出现一个文本输入框，其中的内容即需要注入的内容。

在输入框中书写 API 时需要注意， API 的名称必须显式挂在 window 对象上，比如

function test () {...} //错误写法，调用不到 test 方法

window.test = function () {} //正确写法

出现这个问题的原因（猜测）应该是 electron 对于预加载的 JS 的执行环境和网页的 JS 的执行环境是不同的。好比“铁打的营盘（webview）流水的兵（网页）”。

浏览器界面

导航

浏览器界面中拥有前进、后退按钮，地址栏和放大缩小按钮。在地址栏中输入新的 URL 后，按回车即可加载网页，可以同样使用该方法（本质是触发表单提交）进行网页刷新。

webview

webview 中呈现网页内容。由于是桌面应用，其中很多手势 API 等需要能够自行兼容，比如 touchstart 对应 mousedown 等。

dev tool 面板

dev tool 面板的启动是带有延迟的，这是 electron 中 webview 标签的问题。所以第一次加载时如果有网络请求、输出日志没有显示在 dev tool 时，可以尝试刷新网页。

需要注意的是，dev tool 中的手机模拟器无法使用。

抱歉

由于是公司制度比较严，所以项目代码无法放出，但是有兴趣的同学可以用 electron 制作一个类似应用。

Thanks