本文只针对前端部分

首先和app定好交互文档例如：

js调用安卓:映射名.{方法名(参数)}   
映射名:由于对象映射，所以调用test对象等于调用Android映射的对象, 
例如调用app的useSystemAddress方法:test.useSystemAddress(arg);

js调用IOS:
window.webkit.messageHandlers.方法名.postMessage(arg)

app调用js:window.{方法名(参数)}

js调用Native

Native调用js

业务介绍	方法签名	方法参数	返回值	说明
Android返回给前端,用户选择的单个通讯录数据	setSingleContactData	json字符串 格式如下： "{name:"老王",phone:"1511455XXXX"}"	无	通讯录为空是json字符串为空""
Android返回给前端所有通讯录数据	setAddressAllData	json字符串 扫描二维码关注公众号，回复： 9369636 查看本文章 格式如下： "[{"name":"老王","phones":["555564XXXX","415555XXXX"]},{"name":"老李头","phones":["555478XXXX","408555XXXX","408555XXXX"]}]"	无	通讯录为空是json字符串为空"[]"

功能:
用户点击电话本按钮,前端调用APP的useSystemAddress(data)方法,APP端会判断用户是否授权之类的,如果有授权,APP会调用前端的setAddressAlldata方法,将通讯录面板的所有联系人当做参数传给前端

app调用js,IOS和安卓是一样的,定义全局方法就可以了

// 定义全局的js方法（要跟文档里面的方法名称一样），给app调用的。
// 获取通讯录面板的所有人
window.setAddressAllData= function (data){
    console.log('通讯录所有人')
    console.log(data)
}
// 打开通讯路面后，点击了某个人，app那边给返回来的数据
window.setSingleContactData= function (data){ 
   console.log('选了这个人哦')
   console.log(data)
}

js调用app的方法,安卓和IOS有些不同

// 前端安卓实现代码：
// 点击按钮，调用app的方法,test为安卓那边定义的映射名
$('.one').on('click',function(){
    // data:传给app的数据
    const data = {type:1}
    test.useSystemAddress(data);
})
$('.all').on('click',function(){
    test.getAddressAllData();
})

// 前端IOS实现代码
$('.one').on('click',function(){
  // data:传给app的数据
  const data = {type:1}
  window.webkit.messageHandlers.useSystemAddress.postMessage(data)
}
$('.all').on('click',function(){
    window.webkit.messageHandlers.getAddressAllData.postMessage()
})

具体效果如下图：

第一次点击的是获取通讯录面板，弹出后，再选择一个联系人。第二地是点击获取通讯录所有人。