首页 code

# 方法

  1. 向 webview 注入 js 监听。优点是 webview 的页面不需要更改。

  2. 使用 webview 通信。webview 页面中使用 uni.postMessage 发送信息，uniapp 中 用 onPostMessage 接收。

    这里只讲第二种，第一种请参考 这里 。

# 实现步骤

# webview 页面

引入 uni.webview.js 下载地址 。
UniAppJSBridgeReady 事件触发后代表可以进行通信了。

<script type="text/javascript" src="js/uni.webview.js"></script>
<script>
    document.addEventListener('UniAppJSBridgeReady', function () {
      // 加载完成
      uni.postMessage({
        data: {
          action: 'message'
        }
      });
      uni.getEnv(function (res) {
        console.log('当前环境：' + JSON.stringify(res));
      });
    });
</script>
调用 uni.postMessage ，参数放入 data 中。
我这里是长按保存图片，你可以根据自己的需求调用。
touchstart() {
  this.time = 0;
  this.timer = setInterval(() => {
    this.time++;
    if (this.time >= 1) {
      console.log('save');
      clearInterval(this.timer);
      try {
        uni.postMessage({
          data: {
            action: 'download',
            url: this.url
          }
        });
      } catch (error) {
        console.log(error);
      }
    }
  }, 1000);
},
touchend() {
  if (this.timer) {
    clearInterval(this.timer);
  }
}
# uniapp 页面
使用 onPostMessage 监听通信。
<template>
  <web-view :src="url"  :webview-styles="styles" :style="{width:'750rpx',height:height+'px'}" @onPostMessage="onPostMessage"></web-view>
</template>
<script>
export default {
  methods:{
    onPostMessage(data) {
      //data.detail.data 返回的数据是数组。
      const { action ,url } = data.detail.data[0];
      if (action == 'download') {
        this.save(url);
      }
    },
    save(url) {
      // 传过来的 url 是 base64 的，所以这里转了一下
      // 转换插件地址 https://ext.dcloud.net.cn/plugin?id=123
      base64ToPath(url)
        .then(path => {
          console.log(path)
          uni.saveImageToPhotosAlbum({
            filePath: path,
            success: () => {
              uni.showToast({ title: '保存成功', icon: "none", duration: 2000 })
            },
            fail: (err) => {
              console.log(err);
              uni.showToast({ title: '保存失败', icon: 'none', duration: 2000 })
            }
          })
        })
        .catch(error => {
          uni.showToast({ title: '保存失败', icon: 'none', duration: 2000 })
        })
    }
  }
}
</script>