uni-app 用webview打开学历认证网页后 获取认证结果的方法

在uni-app中使用webview组件加载学历认证网页，并获取认证结果，可以通过与webview内部的网页进行通信来实现。这里主要利用uni-app提供的postMessage和onMessage方法。以下是一个简单的示例代码，展示如何实现这一功能。

1. 在webview中加载学历认证网页

首先，在你的uni-app页面的.vue文件中，使用webview组件加载学历认证网页。

<template>
  <view>
    <webview 
      id="webview" 
      src="https://example.com/education-verification" 
      @loaded="onWebviewLoaded" 
      @message="onMessageReceived"
    ></webview>
  </view>
</template>

<script>
export default {
  methods: {
    onWebviewLoaded() {
      console.log('Webview loaded');
    },
    onMessageReceived(event) {
      const { data } = event.detail;
      console.log('Received message from webview:', data);
      // 处理认证结果，例如保存到本地或进行其他逻辑处理
      if (data && data.type === 'verificationResult') {
        this.handleVerificationResult(data.result);
      }
    },
    handleVerificationResult(result) {
      // 在这里处理认证结果
      console.log('认证结果:', result);
      // 例如，将结果保存到本地
      uni.setStorageSync('verificationResult', result);
    }
  }
};
</script>

2. 在学历认证网页中发送消息

在学历认证网页的JavaScript代码中，当认证结果生成后，使用postMessage方法将结果发送回uni-app。

// 假设这是学历认证网页的JavaScript代码

// 当认证完成后
function onVerificationCompleted(result) {
  // 构造要发送的数据
  const message = {
    type: 'verificationResult',
    result: result
  };

  // 发送消息到uni-app
  if (window.WeixinJSBridge) {
    // 微信公众号和小程序环境
    window.WeixinJSBridge.invoke('sendMsgToApp', { data: JSON.stringify(message) }, function(res) {
      console.log('Message sent to app:', res);
    });
  } else if (window.plus) {
    // uni-app环境
    window.plus.webview.currentWebview().evalJS(`
      var message = ${JSON.stringify(message)};
      plus.bridge.exec('UniAppJSBridge', 'postMessage', [message]);
    `);
  } else {
    // 其他环境处理
    console.log('Unsupported environment for sending message:', message);
  }
}

注意事项

• 确保webview加载的页面与uni-app在同一个域下，或者正确配置CORS策略，以允许跨域通信。
• 在实际使用中，请根据具体的环境（如H5、App、小程序等）调整postMessage的实现方式。
• 对于敏感信息，如学历认证结果，确保通信过程中的安全性，避免信息泄露。