我是如何做到H5和移动端原生交互的

我是如何做到H5和移动端原生交互的

本文基于“筛选条件”功能，以此为示例详细介绍移动端和H5页面的交互方式。

需求：手机端的H5（jsp）页面上有一个筛选按钮，但这个筛选按钮要做成原生的，就是说点击该H5页面上的按钮，将筛选条件以json格式的形式传递给移动端，移动端处理后展示在H5页的上层，然后点击相应条件，做筛选，将选中的条件传递给H5，然后H5调用自身页面上的js，传递到web后台做相应的查询。

• H5页面上的json筛选条件
• 点击筛选按钮对应的js调用移动端的方法
• 移动端将传来的数据解析，打开筛选框，
• 选中后回传给H5页上的js
• js调用后台根据筛选条件刷新页面

---

交互图:

可以渲染序列图：

Created with Raphaël 2.1.0 H5 H5 移动端 移动端 将筛选条件以json格式传送 处理后在H5上显示选择框： 点击筛选条件，将筛选条件回传给H5 根据筛选条件去后台查找，刷新当前页

---

代码

• 在后台准备json格式的筛选条件

List>jxdList=new ArrayList>();
            Map thisMap=new HashMap();
            thisMap.put("code", "Y");
            thisMap.put("name", "国家项目教学点");
            jxdList.add(thisMap);
            thisMap=new HashMap();
            thisMap.put("code", "N");
            thisMap.put("name", "非国家项目教学点");
            jxdList.add(thisMap);
            Map map4 = new HashMap();
            map4.put("title", "教学点类型");
            map4.put("column", 2);//一行展示几个tab
            map4.put("bpType", "jxdType");//回传值的key,例：jxdType：Y，N
            map4.put("thisData", jxdList);
            List> dataList=new ArrayList>();
            dataList.add(map4);
            mapRlt.put("data", dataList);
            mapRlt.put("isZs", "0");
            JSONObject jsonObject = JSONObject.fromObject(mapRlt); 
        request.setAttribute("choiceJson", jsonObject.toString());

• H5页面上点击筛选按钮时候将该json值传递给移动端处理

H5：
       
"#" onclick="choiceJxdType();">
JS:
    var choiceJson='${choiceJson}';
    var baseFrom = "${baseFrom}";//判断安卓或者苹果
    function choiceCxType(){
    if (baseFrom=="ios")
    {
        window.webkit.messageHandlers.choiceType.postMessage(choiceJson);
    }else
    {
        jsInterface.choiceType(choiceJson);
    }
}

• 移动端处理后的效果图

• 选中后回调H5的js方法

function choiceRlt(obj)
    {

        var jxdType=obj["jxdType"] ;//json格式回传
        window.location.href = "${root}/app/BaseApp/anzhuangjindu.jspx?sessionId=${sessionId}&queryAreaCode=${queryAreaCode}&querySchoolType2="+jxdType;
    }