uniapp web-view app和h5相互通信

最新推荐文章于 2024-06-17 09:16:01 发布

正在前行的小码农

最新推荐文章于 2024-06-17 09:16:01 发布

阅读量2.1k

点赞数 3

分类专栏： uniapp 文章标签：前端 uni-app javascript

本文链接：https://blog.csdn.net/weixin_45890564/article/details/129421921

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在uniapp中使用web-view组件与h5页面进行交互的方法，包括app向h5传递参数、h5向app发送数据以及两者间的回调机制。通过onLoad方法接收参数，uni.webView.postMessage和evalJS方法实现数据交换。

摘要由CSDN通过智能技术生成

使用uniapp开发app，app使用web-view内嵌h5页面时会牵扯到app和h5之间的相互通信，下面分为几种情况：

app跳转h5时，在跳转地址后面加上参数传递到h5页面

// app页面
<template>
  <view class="appPages">
    <web-view :webview-styles="webviewStyles" :src="url" @message="getMessage"></web-view>
  </view>
</template>
<script>
export default {
  name: "appPages",
  data() {
    return {
      webviewStyles: {
        progress: false //进度条样式。仅加载网络 HTML 时生效，设置为 false 时禁用进度条。
      },
      url: "", //webview中需要显示的H5页面地址
    }
  },
  onLoad(options) {
    if (options && options.url) {
      //options.url中的链接后面可能带有参数所以需要转码一下
      let needUrl = decodeURIComponent(options.url);
      //获取时间戳，防止缓存
      let timestamp = new Date().getTime();
      //app的token
      let token = uni.getStorageSync('userToken');
      if (needUrl && needUrl.indexOf("?") > 0) {
        this.url = needUrl + "&from=app&token=" + token + "&t=" + timestamp;
      } else {
        this.url = needUrl + "?from=app&token=" + token + "&t=" + timestamp;
      }
    }
  },
  methods: {}
}

在h5页面的onLoad方法中接收app传递的参数

// h5页面
 onLoad(option) {
    this.token = option.token ? option.token : ''
    this.from = option.from ? option.from : ''
  },

h5使用uni.webView.postMessage向app传值,同时在h5的window上挂载一个onTGAppCallBack全局方法，方便在app中触发

// h5页面
// 1.在h5的js中封装传参方法
export function passValueToApp(data) {
  uni.webView.postMessage({
    data: data,
  });
  window.onTGAppCallBack = function (res) {
    callback && callback(res.data);
  };
}
// 2.在h5页面调用向app传参方法，并在回调函数中接收app传值
methods: {
    passValueToApp(data) { // data需要向app传递的参数
      passValueToApp(data, res => {
        console.log('接收app传值', res);
      })
    },
  }

在app页面的web-view中使用@message="getMessage"方法接收h5传值，并使用wv.evalJS方法触发h5中全局方法onTGAppCallBack，使h5接收app传递的值

// app页面
  methods: {
    //获取webview中传递过来的值
    getMessage(e) {
      let paramsObj = e.detail.data[0];
      let countNum = paramsObj.parameter.count;
      let sourceType = paramsObj.parameter.sourceType;
      let filePath = paramsObj.parameter.filePath || "";
      this.$tool.$h.chooseImage(countNum, sourceType, filePath, res => {
        this.transDataToWebview("chooseImage", res);
      });
    },
    //传递消息给webview
    transDataToWebview(action, data) {
      //获取wbview对象
      var currentWebview = this.$scope.$getAppWebview();
      let wv = currentWebview.children()[0];
      // 向h5传递的参数 
      let transData = { 
        data: {
          action: action,
          data: data
        },
      };
      //onTGAppCallBack是webview中加载的H5页面需要暴露给window对象的方法，调用wv.evalJS方法，把需要的值传给H5，在上面第3步的第2小点中接收app传递的参数
      wv.evalJS("onTGAppCallBack(" + JSON.stringify(transData) + ")");
    },
  },