Mono Android WebView 应用初体验[Updated]

作者:V君 发布于:2017-2-16 20:38 Thursday 分类:折腾手记

Hybrid App 这个技术诞生的时间很早, 到现在已经颇为成熟.

虽然略有所闻, 也在 Windows forms 上面用 CEF 玩得很溜, 但还是没去实际接触开发.

由于最近有想折腾的玩意儿, 况且公司在不久之后有需要做APP的可能.

就开始去接触吧!

 

略去安装开发环境的过程, 打开 VS2015. (当然要用我大井来写, 做什么都要用我大井才爽啊)

首先新建 WebView 项目, 然后观察. 


和常见的 Android 项目一样, 也见到了熟悉的 Assets Resources MainActivity 这些玩意儿.

不过多了 Models 和 Views 这两个文件夹.


MainActivity 的模板初始化代码也从按钮事件处理, 替换成了 WebView 视图初始化.

还没来得及纠结如何实现页面与原生功能交互时, 已经能看到模板类 HybridWebViewClient 了.


虽然方式有点土, 只能通过请求拦截来实现调用原生代码.

但这已经满足了 APP 开发的最低要求.


那问题来了: (挖掘机哪家强) 跑在手机应用的网页要怎样调试脚本呢?

我们知道 Chrome 的 F12 很好用, 但 APP 能这样整吗?

答案是可以! 咕狗关键字 Android Web View Debug 第一条就找到了官方文档.

官方文档也是先 TL;DR 地列出3个粗略的步骤, 然后再对其逐一详细解释.


1) 启用 WebView 调试属性.

2) 开个Chrome浏览器访问 chrome://inspect 这个 URI.

3) 在页面上列出的视图列表上找到你的应用对应视图, 点击 inspect 链接.


山口山! 一个 F12 工具蹦出来了! 鼠标在元素列表上划过, 手机端视图也和浏览器一样高亮!

整个就像是 Chrome的 F12 一样! (´∀((☆ミつ 本来这就是 Chrome 的 F12! 


初体验结束. 接下来可以愉快地写 APP 辣!


Update:

发现要做到这样调试还有一个前提, 也就是需要科学咳咳. 不信你就看 → git/issues

在另一台机做了同样操作,发现白屏了,咕狗一下才知道原来只要这样搞.

因为一直都有自动电梯, 所以没察觉到有这要求...

标签: 软件开发 调试技术 移动端 Android HybridApp

引用地址:

发表评论:

Powered by emlog 去你妹的备案 sitemap