bigDataApp/pages/webviewPlayback.vue

<template>
  <view class="webview">
    <web-view
      :src="url"
      id="webcon"
      @message="handleMessage"
      :update-title="false"
    >
    </web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: '',
      device_id: '',
      accessToken: '',
    };
  },
  onLoad(options) {
    this.device_id = options.device_id;
    this.accessToken = options.accessToken;
    // this.url = "http://8.136.98.49/#/recognition"
    // this.url =
    //   '/iotPages/static/h52.html?device_id=' +
    //   this.device_id +
    //   '&accessToken=' +
    //   this.accessToken;

    //设置 webview 界面的状态栏的 title
    // uni.setNavigationBarTitle({
    // 	title: '监控详情'
    // });

    this.getWebviewPage();
  },
  methods: {
    getWebviewPage() {
      this.$myRequest({
        url: '/api/api_gateway?method=camera.camera_manage.get_camera_playback_addr',
        data: {
          device_id: this.device_id,
        },
      }).then((res) => {
        this.url = `https://open.ys7.com/console/jssdk/mobile.html?accessToken=${res.token}&url=${res.ezopen}&themeId=mobileRec&env=`;
      });

      //设置 webview 界面的状态栏的 title
      uni.setNavigationBarTitle({
        title: '监控回放',
      });
    },
    handleMessage(evt) {
      console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
    },
  },
};
</script>

<style>
.webview {
  width: 100vw;
  height: 100vh;
}
</style>