小组中提出要在移动端放入h5页面当做活动页，这就难免不得与移动端进行数据交互

其实方法很简单，但是对于第一次接触的小伙伴来说，确实不能很快理解，只有自主写出来之后，有一种“不过如此”的感觉

废话少说，上代码

重点写在前面  在调用各端的方法时，方法名一定要一致

比如移动端调用H5方法，H5挂载在window上的方法名要与移动端请求的方法名一致

H5调移动端也一样

首先是先判断h5在哪个端打开

我这里写的多了，仅供参考

const u = navigator.userAgent;
const ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
const iPad = u.indexOf('iPad') > -1;
const iPhone = u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;
const android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
if (ios || iPad || iPhone) {
    //  写与iOS交互的代码
}
else if (android) {
    //  写与安卓交互的代码
}

移动端调H5方法   H5该如何写

首先在methods中写方法，然后挂载在window上

onLoad{
    const u = navigator.userAgent;
    const ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    const iPad = u.indexOf('iPad') > -1;
    const iPhone = u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;
    const android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    if (ios || iPad || iPhone) {
        //  写与iOS交互的代码
        window.mobilePatriarchActDetails = this.mobilePatriarchActDetails;
	    window.mobileMuteBgMusic = this.mobileMuteBgMusic;
    }
    else if (android) {
        //  写与安卓交互的代码
        window.mobilePatriarchActDetails = this.mobilePatriarchActDetails;
	    window.mobileMuteBgMusic = this.mobileMuteBgMusic;
    }
}


methods: {
    //移动端无返回参数的情况 （这是移动端app放入后台后，背景音乐还会播放，通过调这个方法来暂停，可以看我上一个文章）
    mobileMuteBgMusic() {
	    this.muteBgMusic = true;
    },
    //移动端返回参数的情况
    mobilePatriarchActDetails(parmas) {
        //parmas就是移动端调H5后 返回给我的数据
       //要在这里进行数据处理  比如存到vuex 或 数据当作请求参数给后端时，要在这里拿到数据后就调用请求后端的方法
	    console.log(parmas)
    },
}

H5调用移动端

由于安卓是把方法写在actDetailsInterface 这个类中，所以我直接接收这个类，也就是对象

ios则是需要单独写，单个挂载传递给我，为了统一性，接收ios方法时，我也写在了Mobilemethods里面

onLoad{
    const u = navigator.userAgent;
    const ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    const iPad = u.indexOf('iPad') > -1;
    const iPhone = u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;
    const android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    if (ios || iPad || iPhone) {
        //  写与iOS交互的代码
        window.mobilePatriarchActDetails = this.mobilePatriarchActDetails;
	    window.mobileMuteBgMusic = this.mobileMuteBgMusic;

        // 接收ios方法
        this.Mobilemethods = {
				backActivity: () => {
                    //如果ios端不需要参数，但也需要传参，可以为null，或者协商好后随便传一个，否则会报错
					window.webkit.messageHandlers.backActivity.postMessage(null);
				},
				observe: id => {
					window.webkit.messageHandlers.observe.postMessage(id);
				},
			};
    }
    else if (android) {
        //  写与安卓交互的代码
        window.mobilePatriarchActDetails = this.mobilePatriarchActDetails;
	    window.mobileMuteBgMusic = this.mobileMuteBgMusic;

        // 接收安卓方法
        this.Mobilemethods = window.actDetailsInterface;
    }
}


methods: {
    //移动端无返回参数的情况 （这是移动端app放入后台后，背景音乐还会播放，通过调这个方法来暂停，可以看我上一个文章）
    mobileMuteBgMusic() {
	    this.muteBgMusic = true;
    },
    //移动端返回参数的情况
    mobilePatriarchActDetails(parmas) {
        //parmas就是移动端调H5后 返回给我的数据
       //要在这里进行数据处理  比如存到vuex 或 数据当作请求参数给后端时，要在这里拿到数据后就调用请求后端的方法
	    console.log(parmas)
    },


   //使用移动端方法
	goBack() {
		let goBackActivity = this.Mobilemethods.backActivity();
		goBackActivity();
	},
	toObs(id) {
		let goObserve = this.Mobilemethods.observe(id);
		goObserve(id);
	},
}

前端要写的东西就这么多了

接下来是安卓端的代码（当时安卓端写了一个包，方便我进行调试）

安卓调用H5

@Override
public void onPageFinished(WebView view, String url) {//页面加载完成
    super.onPageFinished(view, url);
    Log.e(TAG, "页面加载完成:" + url);
    mWebViewBanner.loadUrl("javascript:mobilePatriarchActDetails('" + studentId + "," + activityId + "," + studyDate + "," + token + "')");
}

H5调用安卓

public class ActDetailsInterface {

    public String TAG = "ActDetailsInterface";

    public Context context;

    public ActDetailsInterface(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void observe(String obsId) {
        Log.e(TAG, "观察记录 -> " + obsId);
    }


    @JavascriptInterface
    public void backActivity(){
        Log.e(TAG, "原生页面返回");
    }

}

————end