我是如何做到H5和移动端原生交互的
本文基于“筛选条件”功能,以此为示例详细介绍移动端和H5页面的交互方式。
需求:手机端的H5(jsp)页面上有一个筛选按钮,但这个筛选按钮要做成原生的,就是说点击该H5页面上的按钮,将筛选条件以json格式的形式传递给移动端,移动端处理后展示在H5页的上层,然后点击相应条件,做筛选,将选中的条件传递给H5,然后H5调用自身页面上的js,传递到web后台做相应的查询。
- H5页面上的json筛选条件
- 点击筛选按钮对应的js调用移动端的方法
- 移动端将传来的数据解析,打开筛选框,
- 选中后回传给H5页上的js
- js调用后台根据筛选条件刷新页面
交互图:
可以渲染序列图:
代码
- 在后台准备json格式的筛选条件
List<Map<String, Object>>jxdList=new ArrayList<Map<String,Object>>();
Map<String, Object> thisMap=new HashMap<String, Object>();
thisMap.put("code", "Y");
thisMap.put("name", "国家项目教学点");
jxdList.add(thisMap);
thisMap=new HashMap<String, Object>();
thisMap.put("code", "N");
thisMap.put("name", "非国家项目教学点");
jxdList.add(thisMap);
Map<String, Object> map4 = new HashMap<String, Object>();
map4.put("title", "教学点类型");
map4.put("column", 2);//一行展示几个tab
map4.put("bpType", "jxdType");//回传值的key,例:jxdType:Y,N
map4.put("thisData", jxdList);
List<Map<String, Object>> dataList=new ArrayList<Map<String,Object>>();
dataList.add(map4);
mapRlt.put("data", dataList);
mapRlt.put("isZs", "0");
JSONObject jsonObject = JSONObject.fromObject(mapRlt);
request.setAttribute("choiceJson", jsonObject.toString());
- H5页面上点击筛选按钮时候将该json值传递给移动端处理
H5:
<p><a href="#" onclick="choiceJxdType();"></a></p>
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;
}