H5与Android和Ios之间的交互

H5页面是由uni-App框架开发的，有想了解的可以先了解下uni-App这个框架：https://uniapp.dcloud.io/README。（用来写H5自我认为很方便。）

　　uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

 

uni-App这个框架是通过专用的编译器来完成编译及打包的--->  HBuilder X ；

 

接下来就进入正题：

　　H5与两端交互问题（Android和Ios） 其实也算是挺简单的吧！

比如说调用相册，打开相机，上传，下载，登录等，当然，这里调用的方法不是固定的，是需要你和两端商量提供给你的方法。如下代码所示，

注：区分两端的方法我们这里使用了uni-App里的  uni.getSystemInfo  方法

devices.js  页面

// 给客户端发消息
export const webJSBridge = (type, params = {}) => {
  uni.getSystemInfo({
    success: (res) => {
      const isIOSDevices = res.platform === "ios";
      switch (type) {
        case "share":
          if (isIOSDevices) {
            window.webkit.messageHandlers.share.postMessage(
              JSON.stringify(params)
            );
          } else {
            window.android.share(JSON.stringify(params));
          }
          break;
        case "wechatLogin":
          if (isIOSDevices) {
            window.webkit.messageHandlers.wxLogin.postMessage(
              JSON.stringify(params)
            );
          } else {
            window.android.wxLogin(JSON.stringify(params));
          }
          break;
        case "QQLogin":
          if (isIOSDevices) {
            window.webkit.messageHandlers.qqLogin.postMessage(
              JSON.stringify(params)
            );
          } else {
            window.android.qqLogin(JSON.stringify(params));
          }
          break;
        case "saveImage":
          if (isIOSDevices) {
            window.webkit.messageHandlers.saveImage.postMessage(
              JSON.stringify(params)
            );
          } else {
            window.android.saveImage(JSON.stringify(params));
          }
          break;
        case "takePhoto":
          if (isIOSDevices) {
            window.webkit.messageHandlers.takePhoto.postMessage(
              JSON.stringify(params)
            );
          } else {
            window.android.takePhoto(JSON.stringify(params));
          }
          break;
        case "choosePhoto":
          if (isIOSDevices) {
            window.webkit.messageHandlers.choosePhoto.postMessage(
              JSON.stringify(params)
            );
          } else {
            window.android.choosePhoto(JSON.stringify(params));
          }
          break;
        case "captureScreen":
          if (isIOSDevices) {
            window.webkit.messageHandlers.captureScreen.postMessage(
              JSON.stringify(params)
            );
          } else {
            window.android.captureScreen(JSON.stringify(params));
          }
          break;
        case "jsbridgeHandle":
          // const params = {
          //          type: 1,1 关闭2 开始AI运动3 vip弹框4 去运动圈弹框5截长图6 分享 7保存图片  8复制到剪切板
          //          callbackName: "",
          //          data: {},
          //        };
          if (isIOSDevices) {
            window.webkit.messageHandlers.jsbridgeHandle.postMessage(
              JSON.stringify(params)
            );
          } else {
            window.android.jsbridgeHandle(JSON.stringify(params));
          }
          break;
        default:
          break;
      }
    },
  });
};

// 接收消息
export const getDeviceMessageFunc = (self) => {
  window.wxLoginResult = (res) => {
    self.$bus.emit("getDeviceMessage", {
      ...res,
      type: "wxLogin",
    });
  };
  window.qqLoginResult = (res) => {
    self.$bus.emit("getDeviceMessage", {
      ...res,
      type: "qqLogin",
    });
  };
  window.choosePhotoResult = (res) => {
    self.$bus.emit("getDeviceMessage", {
      ...res,
      type: "choosePhoto",
    });
  };
  window.takePhotoResult = (res) => {
    self.$bus.emit("getDeviceMessage", {
      ...res,
      type: "takePhoto",
    });
  };
  window.reloadCalendar = (res) => {
    self.$bus.emit("getDeviceMessage", {
      ...res,
      type: "reloadCalendar",
    });
  };
};

　　

 

App.vue 页面：

<script>
import VConsole from "vconsole";
import { getDeviceMessageFunc } from "@/utils/devices.js";
export default {
  onLaunch: function () {
    // const vConsole = new VConsole();
    getDeviceMessageFunc(this);
    
  },
  onShow: function () {},
  onHide: function () {},
};
</script>