H5嵌入APP后，保存图片至相册（window.WebViewJavascriptBridge原生APP与H5之间交互）

webYin

已于 2023-04-14 15:19:57 修改

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： h5嵌套app相关问题文章标签：前端 web app

于 2023-04-14 15:02:24 首次发布

本文链接：https://blog.csdn.net/MYuanFang/article/details/130153839

h5嵌套app相关问题专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在原生APP中通过WebViewJavascriptBridge实现与H5页面的数据传递，特别是在保存图片至相册的场景下，利用全局方法进行操作，并在Vue3环境中展示了点击事件的处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生APP跳转到H5页面时，往往需要携带一些用户信息，之前做法是在跳转的地址中拼接H5页面需要的参数，现在通过window.WebViewJavascriptBridge悄悄的进行数据交互。

需要在app里面测试才能看到效果

1.注册全局方法
export const savePhoto = (options) => {
    console.log(options)
    let params = '{}';
    if (typeof (options) == 'object') {
        params = JSON.stringify(options)
    }
    window.WebViewJavascriptBridge.callHandler(
        'savePhoto',
        encodeURIComponent(params),
        function (responseData) {
            if (options && options.onResponse) {
                options.onResponse(responseData);
            }
        }
    );
}

2.使用全局方法，保存图片至相册（以下是使用vue3点击事件）
const saveButton = url =>{
  const imgName = url.substring(url.lastIndexOf("/") + 1, url.lastIndexOf("."))
  savePhoto({
    url : url,
    name :imgName+index.value+'.png',
    onResponse : function (res) {
      const ress = JSON.parse(res);
      if (ress && ress.code == '200') {
        setTimeout(()=>{
          alert("保存图片成功") //可用组件，样式美化些
          index.value ++
        },500)
      }
    }
  })
}