返回首页

混合 App 踩坑

做 hybrid app 时记下的一些 WebView 互通笔记。

发布 2017年6月23日 标签 #mobile #hybrid #webview

~/posts/hybrid-app-notes $ cat post.md

/ 语言 EN / 中文
/ 主题 / /

最近在做 app。

混合 app 就是在原生 app 里用 WebView 一类的组件显示网页,Android 和 iOS 都支持。好处不少:更新更快、排版好做、代码量少。JS 也比 Java、Objective-C、Swift 灵活得多,请求里收到奇怪的 JSON 也好解;Gson 虽然强但相比之下变通空间小很多。缺点是有的,但整体可接受。

把这段时间的小 tip 简单备份一下,以后好查。

  • iOS 端的 WKWebView 可以用 WebKit 全局变量从网页向原生发送类 Event 的消息。
  • Android 端可以用拦截 Alert 的办法从网页发 Event 到原生。
    • 以前听说过改 URL → 让原生读 URL 的做法,野得很。
    • Android 端也可以用 WebView 类直接调 JS 里的全局方法。但 Browserify 打包出来的 build.js 里,要把某些函数暴露到 window 上并不直观——肯定有正经办法,没找到就只能曲线救国:在 DOM 里塞一个隐藏元素、给它 id、把 Vue 的逻辑挂到它上面,然后用原生 HTML + JS 触发点击。不太优雅。
  • 用 Meta 可以禁掉手机端的拖拽、缩放等。Android 端也可以走 WebSettings 的某个开关来统一适配所有页面。
  • Meta 也能设 dpi 匹配,不设的话字会小到看不清。
  • Browserify 用起来挺顺。
  • 用虚拟路由可能会带来奇怪的问题;反正混合 app 里这种页面也不需要给用户提供后退按钮之类的入口,禁了就行。
返回首页