MoeNovaClient/pages/webview/index.vue

<template>
  <view class="webview-container">
    <web-view :src="url" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  onLoad(options) {
    if (options.url) {
      // 解码 URL
      this.url = decodeURIComponent(options.url)
    }
    if (options.title) {
      // 解码 title
      let title = decodeURIComponent(options.title)
      if (title) {
        uni.setNavigationBarTitle({
          title: title
        })
      }
    }
  },
  methods: {
    handleMessage(e) {
      const message = e.detail.data[0]
      console.log('收到来自 web 页面的消息：', message)
      
      // 根据消息类型处理
      switch (message.type) {
        case 'close':
          // 关闭页面
          uni.navigateBack()
          break
        case 'share':
          // 处理分享
          this.handleShare(message.data)
          break
        case 'login':
          // 处理登录
          this.handleLogin(message.data)
          break
        case 'payment':
          // 处理支付
          this.handlePayment(message.data)
          break
        default:
          console.log('未知消息类型：', message.type)
      }
    },
    
    // 处理分享
    handleShare(data) {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        title: data.title || '',
        summary: data.desc || '',
        imageUrl: data.imageUrl || '',
        href: data.url || '',
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    
    // 处理登录
    handleLogin(data) {
      // 这里可以根据实际需求处理登录逻辑
      console.log('处理登录：', data)
    },
    
    // 处理支付
    handlePayment(data) {
      // 这里可以根据实际需求处理支付逻辑
      console.log('处理支付：', data)
    }
  }
}
</script>

<style lang="scss">
.webview-container {
  width: 100%;
  height: 100vh;
}
</style>