vue h5 與 android/ios 交互、傳參

1.vue中調用app的方法：

Android：

window.android.functionName(sendData); // functionName 代表 Android 中被調用的方法，sendData 代表需要傳輸的參數

iOS：

window.webkit.messageHandlers.functionName.postMessage(sendData); // 同理 functionName 代表iOS 中被調用的方法，sendData 代表需要傳輸的參數

 

2.app調用vue的方法：

• 需要把本地 methods 中的 transferConsultResult 方法掛載到window中

  window.transferConsultResult = this.transferConsultResult; // 把本地方法掛載到window中

• 接收方法：

  // 接收Android傳過來的值方法
      transferConsultResult(value) {
        const result = JSON.parse(value);
        console.log(result);
      }

3.代碼如下：

  mounted() {
    window.transferVideoConsultResult = this.transferVideoConsultResult; // 把本地方法掛載到window中

    let u = navigator.userAgent;
    this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android
    this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios終端
    if (this.isAndroid || this.isIOS) {
      this.appCall();
    }
  },

  methods: {

　　　appCall() {
      let sendData = JSON.stringify({
        userName: '張三',
        userId: 'dq',

        queueId: '10311',
        areaId: '1',
        videoServiceAgentName: '000001',
        businessCode: '001',

        loginIp: 'dev.bairuitech.cn',
        loginPort: '19000',
        loginAppId: 'CE8400FB-D755-BE42-8E91-B35EDD5E4CB4'
      });
      if (this.isAndroid) {
        // 這個是安卓操作系統
        try {
          console.log(window.android);
          window.android.startVideoConsult(sendData);
        } catch (error) {
          console.log(error);
        }
      }
      if (this.isIOS) {
        // 這個是ios操作系統
        try {
          console.log(window.webkit);
          window.webkit.messageHandlers.startVideoConsult.postMessage(sendData);
        } catch (error) {
          console.log(error);
        }
      }
    },
    // 接收Android傳過來的值方法
    transferConsultResult(value) {
      const result = JSON.parse(value);
      console.log(result);
    }
}