H5页面调用android、ios方法并传参

前言：我们在进行混合开发的时候会遇到H5页面需要调用app方法并传参的情况，本文就来讨论下该如何操作。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、获取app类型

首先要获取到app类型，判断是android还是ios

/**
  * 获取app类型
  * @param
  * @return {String} app类型
 */
getAppType: function() {
    const u = window.navigator.userAgent
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 || u.indexOf('Windows') > -1) {
        return 'android'
    }
    if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        return 'ios'
    }
    return ''
},

这里封装了一个方法getAppType用于获取app类型 

二、调用app方法

/**
  * 调用app方法
  * @param {Function}androidFun android方法
  * @param {Function}iosFun ios方法
  * @return
*/
appFun: function(androidFun, iosFun) {
    const appType = CommonUtils.getAppType()
    if (appType == 'android') {
        androidFun()
    } else if (appType == 'ios') {
        iosFun()
    }
},

三、业务场景使用

这里以H5调用app分享方法为例

/**
  * 调用app分享
  * @param
  * @return
 */
function shareActivity(shareData) {
    CommonUtils.appFun(function() {
        // android
        window.jsInterface.shareActivity(shareData.title, shareData.desc, shareData.link, shareData.icon);
    }, function() {
        // ios
        window.webkit.messageHandlers.shareActivity.postMessage([shareData.title, shareData.desc, shareData.link, shareData.icon]);
    });
}

1）android：jsInterface为安卓定义的暴露给js的接口名称，shareActivity为安卓定义的分享方法

2）ios：shareActivity为ios定义的分享方法，其余为固定写法

注意：调用ios方法必须传参，否则不起效果