优家客户端与H5交互的文档

发表于2017-12-25 23:26 阅读(197)

本地开发调试地址:(由于ip地址可能会变动,每天会同步更新)

baseUrl:http://10.10.11.135:8080报修入口:/repair审批入口:/approval_entity门锁入口:/lock报表入口:/report空间入口:/space/1200?floor_name=W1&build_name=#1 (空间列表接口中space_summary_floor为楼层名,space_summary_building为楼栋名,因为楼栋名可能带#号,所以需要转义)任务入口:/task/+'任务id'

1.H5页面获取用户信息交互方案

进入H5页面之后,js会主动调用客户端的getUser方法,然后客户端会调用H5的getUserInfo,的方法并把用户关联的信息以json字符串的形式传递给前端,传递给前端的用户结构:

{
    token:"",
    user_id:"",
    complex_id:""
}

具体前端代码实现:

window.getUserInfo = (userInfo) => {
     
};
try {
   window.webkit.messageHandlers.getUser.postMessage('1222');//ios
} catch (err) {
   try{
       mamc.getUser();//安卓
   }catch(err){     
   }      
};

2.h5页面返回客户端原生页面

h5页面主动调用客户端的goApp返回客户端原生页面,具体前端实现:

try {
    window.webkit.messageHandlers.goApp.postMessage('1222');//ios
} catch (err) {
    try{
       mamc.goApp();//安卓
    }catch(err){

    }
};

3.查看图片客户端交互

h5页面主动调用客户端checkImage方法实现图片的放大查看效果,传递客户端的参数结构(currentLoc位置,data存储url)为

 {
   currentLoc:1,      data:[] }

具体前端实现:

try {
   window.webkit.messageHandlers.checkImage.postMessage(args);//ios
} catch (err) {
  try{
     youplus.checkImage(args);
  }catch(err){
      alert("不存在原生checkImage方法");
  }
};

3.h5跳转至原生聊天页面

h5页面主动调用客户端goChat方法,传递给客户端的参数结构为


{
user_name: '',
outserviceid: '',
outuserid: '',
user_room_name: '',
user_mobile: ''
}


具体前端实现

try {
  mamc.goChat(string);//安卓
} catch (err) {
     try{
         window.webkit.messageHandlers.goChat(string);//ios
     }catch(err){
         alert("没有分享方法");
     }
}