H5于原生APP交互封装（这里用vue，其余同理）

最近项目要求APP中要嵌套H5的页面。

首先，建立两个JS文件，便于区分管理

一、DeviceType.js用于判断环境是Android仍是IOS

export const DeviceType=(()=>{
    var u = navigator.userAgent;
    if (u.match(/Android/i) != null) {
        return "Android";
    } else if (u.match(/iPhone|iPod|ios/i) != null) {
        return "IOS";
    }
})()

二、utilityApi.js 再建立一个文件用于封装与android和ios交互的方法，保证统一而且易于管理。要引入DeviceType.js

import {DeviceType} from './DeviceType'

bannerClick（id）为H5中使用的方法去调用app的方法，jumpBanner（id）为原生app的方法，两边统一，id为须要传递的参数，这里有一种状况，url传递参数为文字的时候会出现乱码的状况，这里须要进行转码处理、encodeURI（）

这里有个大坑，ios的 window.webkit.messageHandlers.方法名.postMessage();这个方法中 必需要传参数，不传参数ios那边监听不到方法名，因此若是没有参数的时候 ，写个null就行了

 

window.webkit.messageHandlers.jumpBanner.postMessage(null);

import {DeviceType} from './DeviceType'

// 点击banner触发方法
export function bannerClick(id) {
  try {
    switch (DeviceType) {
      case "Android":
        window.hello.jumpBanner(id)
        break;
      case "IOS":
        window.webkit.messageHandlers.jumpBanner.postMessage(id);
        break;
    }
  } catch (e) {
    console.log(e)
  }
}

// 贷款机构跳转,（这里infoJson参数ios要json格式）
export function loanBankRoute(infoJson) {
  let json = infoJson
  json.name = encodeURI(infoJson.name)
  // alert(json.name)
  try {
    switch (DeviceType) {
      case "Android":
        window.hello.jumpLoanBankHome(infoJson.id,infoJson.name)
        break;
      case "IOS":
        window.webkit.messageHandlers.jumpLoanBankHome.postMessage(json);
        break;
    }
  } catch (e) {
    console.log(e)
  }
}

三、在页面中的方法触发，如今main.js中声明全局指令，我这边叫 $oc

import * as utilityApi from './common/utilityApi' //原生交互js

Vue.prototype.$oc=utilityApi;

  页面方法：

//跳转银行详情页
selectBankDetails(id) {
  this.$oc.bankCardClick(id)
},

这样就能够完成与原生的交互了，交互前要与身边的 android和ios 商量好变量名和方法名。