h5与app（android,ios）端交互

app和h5页面交互，可以使用vue项目构建的页面，也可以使用原生的html页面等等
下面两种方式都会介绍
原理分析：
1）h5和app之间通过url 传递数据
2）app会提供一个接口对象的引用（即app端留着h5调用的方法）

app 中嵌入vue页面

原生和vue交互
vue调用app方法如下：
1.在vue项目中可以创建一个全局方法 （也可以单独写，封装起来更好些）

/**
 *js调用APP
 * @params {*} Obj  传给app参数
 * messageName 是 为ios和安卓端提供的方法名（即调用的android和ios的方法名）
 */
// vue 与安卓和ios交互 ：调用安卓和ios方法
export function JSToNativeAPP(messageName, params) {
  params = params || ''
  const isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1
  if (isAndroid) {
    window.android[messageName](JSON.stringify(params))
  } else {
    window.webkit.messageHandlers[messageName].postMessage(params)
  }
}

2.使用
先在用的地方导入该方法
eg: import { JSToNativeAPP } from './utils/common.js'
在需要调用的地方调一下
eg:

// 调用安卓和ios方法
    JSToNativeAPP('getUser')

3.调用完之后，如果需要接收app返回给我们的参数怎么接收呢？接收参数方式如下：
注意：接收参数的方法需要挂载到window上， eg： window.getToken = this.getToken
接收参数的方法其实就是提供给app端供他们调用的，只有全局方法可以调用，私有方法是不行的

getToken(params) {
      localStorage.setItem('ticket', params)

      // Dialog.alert({
      //   title: '标题',
      //   message: localStorage.getItem('village')
      // }).then(() => {
      //   // on close

      // })
    }

至此app和vue交互完毕，接下来看app端和普通html的交互

app 中嵌入普通html页面

原生和普通html交互

具体步骤
1.发送给app端的ajax的请求封装

var ajaxMethod = function (url, params, type, callback) {
        var data;
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
       // console.log("android:" + isAndroid);
        //console.log("IOS:" + isIOS);
        if (isAndroid || isIOS) {     /向/安卓和ios发起请求
            delete params['token'];
            url = "ajax://" + url;    //url的协议（app端和h5共同决定），值可以任意取
            if (params) {
                url += "?";
                for (var key in params) {
                    url += key + "=" + params[key] + "&";
                }
                ;
            }
            $("<iframe style='display:none;' id='Frame" + count + "'></iframe>").prependTo('body');
            $("#Frame" + count).attr("src", url);
            count++;
        } else {  //普通的ajax请求，便于调试
            $.ajax({
                type: type,
                url: url,
                data: params,
                dataType: 'text',
                async: true,
                cache: false,
                complete: function (data) {

                },
                success: function (result) {
                    callback(result);
                },
                error: function () {
                    console.log("网络异常");
                }
            });
        }
    };

2.如果不需要请求数据(例如分享功能)，只是触发app端的功能，那么方式为：

 if (isIOS) {  //调起ios端的事件的方式
	window.webkit.messageHandlers.事件名.postMessage(‘参数’);
  } else if (isAndroid) {  //触发安卓端
	 window.事件名.OnClick(‘参数’);
}

3.页面代码中的使用
1)引入封装的全局js文件
2）写js代码
eg:

//获取数据
        API.方法名(回调函数/不传,'回调函数名')；
       1） app返回数据，是通过回调函数的函数名，并把这个数据返回到数据函数名对应的函数中；
        2) 在回调函数中会得到数据
        

eg:

$(function(){
	 API.queryInviteTokenAndErCode(httpPost.queryInviteTokenAndErCode,'httpPost.queryInviteTokenAndErCode')
}）

  let httpPost= {
        queryInviteTokenAndErCode:function (res) {
            // console.log(JSON.parse(res))
            res = JSON.parse(res)
            if(res.result==100){
                let data = res.data
                $('.ic-pic').attr('src',data.erCodeImg)
                $('#copyVal').val(data.inviteToken)
                $('.inviteNumber').html(data.inviteCount)
                //分享时用的数据
                params={
                    pageUrl : data.pageUrl,
                    desc : data.desc,
                    icon :  data.icon,
                    title : data.title
                }
            }else{
                $.toast(res.message, "text");     //提示
            }
        },
    }

4.触发app端的事件，例如分享
1）页面中

 let wxShare=function(){  //微信分享
        // console.log('wx')
        let strParameter = JSON.stringify(params)
        app.wxShare(strParameter)    //全局中定义的方法名
    }

全局中分享的方法

 wxShare: function (strParameter) {  //微信分享
 //app端会拿到对应的方法，然后app端做处理
            if (isIOS) {
                window.webkit.messageHandlers.wxShare.postMessage(strParameter);
            } else if (isAndroid) {
                window.wxShare.OnClick(strParameter);
            }
        },