美文网首页
Android 与 H5 数据的传递

Android 与 H5 数据的传递

作者: wu0228 | 来源:发表于2022-04-12 18:02 被阅读0次

    最近项目开发使用了 Android 原生和 H5 的混合开发,以前也没怎么接触过。所以这次和 H5 联调对接还是踩了很多坑,这里也做个总结希望可以帮助到大家...

    首先 Android 和 H5 主要的坑是在彼此之间的数据交互;而如果只是彼此之间简单的界面调用的话,还不是很难。网上搜索有很多的资料,这里也就不说了。

    1,Android 调用 H5 的函数,并且 Android 端传递相关参数到 H5;

    H5 界面代码如下:


    企业微信截图_16403340442854.png

    功能函数 getFromAndroid 中的参数 userid 就是 Android 端传递过来的参数值,在 H5 代码中就也可以直接使用了...
    而 Android 端代码如下:


    企业微信截图_16403341345571.png
    企业微信截图_1640334170636.png

    其中 h5Str 就是 Android 端想传递给 H5 界面的数据。其中需要注意的是 a.拼接传递参数的时候需要注意添加双引号和斜杠,否则可能会传递不过去;b.要注意页面加载的生命周期,需要等到 H5 的界面加载完成后才开始传递参数。

    2 H5 传递参数到 Android ;

    这里主要坑的地方是并没有直接的方式向上面那样来从 H5 界面来传递参数到 Android 端,所以就只能首先调用 H5 方法,然后再在 所调用的 H5 方法中回调一个 Android 端方法,并且传递相关参数过来。

    Android 端代码如下:


    企业微信截图_16403343794629.png
    企业微信截图_1640334435677.png

    上面 setUserId()为 H5 方法, JsInteration.back( String value) 为 H5 setUserId() 方法再次调用的 Android 端方法。其中 String value 就是 H5 传递过来的参数;

    H5 界面代码如下:


    企业微信截图_16403344979886.png

    其中 value 值就是需要传递过去的参数值

    3.最后加上 Android 端拦截 H5 界面的点击事件方法:
    Android 端代码如下:


    企业微信截图_16403345507778.png

    H5 界面代码如下:


    企业微信截图_16403345937546.png
    其中重点主要是使用 shouldOverriderUrlLoading() 方法,使用参数 url 来匹配。(这是和 H5 约定的 url;注意这里的 url 它的格式,如果只是常量字符串是匹配不到的)

    相关文章

      网友评论

          本文标题:Android 与 H5 数据的传递

          本文链接:https://www.haomeiwen.com/subject/urolqrtx.html