Mono Android WebView 应用之 JavascriptInterface

作者：V君 发布于：2017-2-26 18:45 Sunday 分类：折腾手记

上次咱初体验了 Android 的 WebView 随着使用中发现, 

原来这货也可以把原生对象实例,作为接口丢进 js.实现在网页脚本直接调用原生功能.

只是方式有点坑, 不过咱还是填上了. 能够挺愉快的使用.


查阅了许多资料,具体限制为只能将字符串作为脚本调用的返回值.

如果你用字符串数组,那么 js 调用端会得到 undefined.

如果被调用的方法发生异常, 则整个应用挂掉...

接下来泥应该知道咱会怎样解决了吧.


是的, 用 JSON 包裹参数和返回值,并且封装调用结果(成功与否、异常信息).

只是, 没想到一直使用的 JSON 库 Newtonsoft.Json 在 2.2 版安卓上并不支持.

只好再找一个叫做 fastJson 的实现, 做个条件编译分别使用了.


到这里, 剩下的就是各种花样展开了.

如果每次都写完参数和返回值的 JSON 转换, 那要不要太呛?

于是,咱们需要封装, 同时也要自动生成 js 的 function stub.


就酱: 一个未经性能优化的初版封装出来了.

继承它,添加公开实例方法,打上 JsApi 特性.

将实例打进 WebView, 同时把 stub 打进 Razor 模板. 定义一个标识符存放输出的 stub.


这样就可以愉快的从 js 直接调用原生功能辣!

标签: 软件开发 移动端 Android HybridApp

评论(0) 引用(0) 浏览(1784)

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

评论(0) 引用(0) 浏览(1530)

Powered by emlog 去你妹的备案 sitemap