h5页面与原生APP的交互

前阵子有个需求, 需要在移动端实现图表的呈现, 问题就在于, android和ios,以及h5能够统一的图表很少,echarts又不太符合我们的需求, 并且ios需要提审, 图表可能会更换样式. 经过探讨, 统一由h5提供图表. app内嵌h5页面呈现图表.

那么问题来了, app端需要加载html,js等文件, 这个速度真的不敢恭维, 近40多秒的加载速度, 用户体验特别差,

那么怎么办?

最终决定由h5提供图表模板, 上传到管理后台之后, 由客户端(ios / android) 自行将模板下载并匹配. 那么这样的话, 就由客户端提前加载并渲染好对应图表, 而用户进入界面时,呈现的图表界面早已经加载过了, 速度大大的提升了.

但图表数据比较多时, js异步加载数据的速度就变慢了, 那么怎么处理?

我们都知道原生的加载速度是很顺畅的, 这也是很多人喜欢用app的原因, 那么我们可以将数据交给app端处理, 再返回给h5页面渲染数据.

这个时候就需要进行h5和app的交互操作了.

实际上, 只要弄懂h5和app的交互原理, 处理起来就不那么棘手了.

 

h5 与原生 app 的交互，本质上说，就是两种调用：

1. app 调用 h5 的代码
2. h5 调用 app 的代码

1. app 调用 h5 的代码

因为 app 是宿主，可以直接访问 h5，所以这种调用比较简单，就是在 h5 中曝露一些全局对象（包括方法），然后在原生 app 中调用这些对象或方法。

javascript

window.sdk = {
  double = value => value * 2,
  triple = value => value * 3,
};

android

webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String s) {
    // 20
  }
});

ios

NSString *fu