mcrm-jsapi

二次封装了 Android 和 IOS 使用 WebViewJavascriptBridge 的方法

如果你还不了解 WebViewJavascriptBridge，可以去 github 看看源码及使用方法

WebViewJavascriptBridge for Android 传送门

WebViewJavascriptBridge for iOS/OSX 传送门

技术说明

采用 ES6 语法进行工程化分层，规范并统一安卓 ios 调用 WebViewJavascriptBridge 的方法

总体约定

所有接口都是异步，接受一个 object 类型的参数，每个方法都接收成功回调 onSuccess（不必填）,每个方法都接收失败回调 onFail（不必填）。

原生后台注册方法名字皆为下面 API 中 mcrm 点后面的值，例如：mcrm.biz.openLink(obj)该方法在原生后台注册的名字为："biz.openLink",其他方法以此类推。

 前台
成功回调方法onSuccess里，返回参数为：data.result
失败回调方法onFail里，返回参数对象为：{code: data.code,message: data.msg}

后台
约定返回数据对象data格式为：
{
  code : 0, // "除0外都是错误code"
  msg : '错误消息',
  result: {} //  返回内容
}

安装

NPM

 npm install mcrm-jsapi

CDN

http://cdn.vortex.zj.chinamobile.com/jsapi/0.0.99/jsapi.min.js

快速上手

 import mcrm from 'mcrm-jsapi'
例：使用打开新页面方法
mcrm.biz.openLink({
  url: 'https://www.baidu.com/',
  onSuccess: res => {
	console.log(res);
  },
  onFail: res => {
	console.log(res);
  },
});

cdn

如果你想在普通的 html 文件里直接引入使用，可以下载打包压缩好的完整版 js 文件

jsapi.min.js 传送门

 使用方法：
  例：使用打开新页面方法
  mcrm.biz.openLink({
    url: 'https://www.baidu.com/',
    onSuccess: function(res) {
      console.log(res);
    },
    onFail: function(res) {
      console.log(res);
    },
  });

API 详细说明

这里使用方法说明暂时都是在 vue 里的使用方式，前提引入‘mcrm-jsapi’

import mcrm from 'mcrm-jsapi'

目录

• 1.打开新页面
• 2.关闭界面并回传参数
• 3.获取打开 webview 时传的参数
• 4.定位服务
• 5.扫描条形码、二维码
• 6.调用分享组件
• 7.读取身份证
• 8.调用摇一摇
• 9.保存历史记录
• 10.获取历史记录
• 11.系统相机和现场照相机调用
• 12.保存图片
• 13.web 的返回
• 14.根据 name 打开本地页面
• 15.添加右上角按钮
• 16.外呼组件调用
• 17.外呼组件消息通知
• 18.网络速度
• 19.打开页面

1.打开新页面

 mcrm.biz.openLink({
	url: String, // 必传：网页地址
	params: JSONObject, // 参数
	showProgress: Bool, // 默认 true
	onClose: res => {
		// 该回调方法和后台约定：后台返回的对象code值为“1”时才会回调该方法
		console.log(res);
	},
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

2.关闭界面并回传参数

 mcrm.biz.webClose({
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

3.获取打开webview时传的参数

 mcrm.biz.getParams({
	onSuccess: res => {
		console.log(res); // res:JSONObject
	},
	onFail: res => {
		console.log(res);
	}
});

4.定位服务

 mcrm.device.getLocation({
	type: String, // 坐标系，baidu、GPS，默认baidu
	onSuccess: res => {
		console.log(res); //res:{longitude: Number, latitude: Number, address : String}
	},
	onFail: res => {
		console.log(res);
	}
});

5.扫描条形码、二维码

 mcrm.biz.scan({
	type: String, // all、qrCode、barCode、默认all，现在只有all
	onSuccess: res => {
		console.log(res); // res:{text : String}
	},
	onFail: res => {
		console.log(res);
	}
});

6.调用分享组件

 mcrm.biz.share({
	shareTitle: String, // 必传
	describe: String,
	imgUrl: String, //（base64的图片）
	url: String, // 必传
	type: String, // 必传 wxSession、wxTimeline、wxCollection  微信、朋友圈、微信收藏，后续再补充其他的
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

7.读取身份证

 mcrm.device.readIDCard({
	onSuccess: res => {
		console.log(res); // res:JSONObject
	},
	onFail: res => {
		console.log(res);
	}
});

8.调用摇一摇

 mcrm.device.shake({
	// 当前界面打开/关闭 摇一摇功能
	type: String, //open、close 默认open
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

9.保存历史记录

 mcrm.util.setCache({
	type: String, //type : String 默认 0，新增缓存，不覆盖，1，新增缓存，value覆盖
	cacheKey: String, // 必传
	cacheValue: JSONObject, // 必传
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

10.获取历史记录

 mcrm.base.getCache({
	cacheKey: String, // 必传
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

11.系统相机和现场照相机调用

 mcrm.biz.facePhoto({
	isBorder: String, // 必传 0:系统相机，无人头像框 1:现场拍照，人头像框，需要定制使用，自己定制参数
	onSuccess: res => {
		console.log(res);
		//res:{'localId': String} 返回选定照片的本地ID，localId可以作为img标签的src属性显示图片
	},
	onFail: res => {
		console.log(res);
	}
});

12.保存图片

 mcrm.device.savePicture({
	imgUrl: String, // 必传
	// http开头的需要去下载、filePath 去本地路径查找、非http开头的直接保存(base64图片体)
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

13.web的返回

 mcrm.biz.goback({
	// 如果注册了该条api，代表不走webview的history, 点击返回按钮自定义控制
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

14.根据name打开本地页面

 mcrm.biz.open({
	name: String, // 必传：信息采集infoCollection；人脸补录faceRecognitionBupai；人脸识别takePhoto
	params: JSONObject,
	showProgress: Bool, // 默认 true
	onClose: res => {
		//该回调方法和后台约定：后台返回的对象code值为“1”时才会回调该方法
		console.log(res);
	},
	onSuccess: res => {
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

15.添加右上角按钮

 mcrm.biz.showRightButton({
  show: Bool,  //是否显示 true 显示， false 隐藏， 默认true
  type: Number, //（show为true时 必传） 0 : 显示文字，1 : 显示本地图片
  text: String, //（show为true时 必传） 根据type返回内容：0: 此字段是按钮标题，1: 此字段是本地图片的名字
  control: Bool, // 是否web控制事件，true：web控制，false：原生控制，默认false
  onSuccess: res => {
	// 如果control 为true，则onSuccess将在发生按钮点击事件被回调
    console.log(res);
  },
  onFail: res => {
    console.log(res);
  }
});
注意：对于原生客户端，如果control是false的时候，请不要调用callback，只有在control为true的时候调用callback

16.外呼组件调用

 mcrm.agt.call({
  type: String, // type类型参照下面列表(例如'agtSignIn'等等)
  params: JSONObject,
  onSuccess: res => {
    console.log(res);
  },
  onFail: res => {
    console.log(res);
  }
});
type类型如下：
	agtSignIn		//座席的登录接口
	agtSignOut		//座席登出接口
	agtSetIdle		//1、坐席示忙后，不会接到呼入电话。默认刚登录后也是不会接到呼入电话的。
					//2、如果需要接到呼入电话，需要先示闲。
					//3、当前的状态，可以通过“状态变化通知事件”获取到。
	agtSetBusy		//用户示忙后，不会接到呼入电话
	agtCallWithPre	//发起呼叫。
	agtAnswerCall	//收到来电事件时，应答呼叫。如果想要拒绝呼叫，可以调用agtReleaseCall接口。
	agtReleaseCall	//结束当前呼叫
	agtHold			//在点到点通话中，座席对通话可以进行保持操作，使通话处于保持状态。
	agtRetrieve		//在点到点通话中，座席对通话已经进行保持后，可以取消保持状态，使通话恢复正常。
	agtConsult		//实现咨询到其他坐席等
	agtSingleTrans	//实现单步转接到其他坐席等
	agtSingleConf	//实现添加用户或坐席到会议
	agtConfCtrl		//实现会议控制功能
	agtSendMessage	//发送消息给其他用户或者座席。
	agtSendDTMF		//实现发生DTMF功能
	setVideoParam	//设置视频通话参数，如果只是音频通话，可不用调用。该接口不涉及网络请求，可以在UI线程执行
	getAIFData 		//获取AIF接口的配置数据，该值为一个类对象，其中存储了WAS分配的电话号码，登录使用的uid等信息
	setAIFData		//设置UIF组件的配置数据

17.外呼组件消息通知

 // 该方法是原生调用js
mcrm.agt.receive({
	onSuccess: res => {
		// 这里是原生调用成功后，js方法就写在这里
		console.log(res);
	}
});

18.网络速度

 mcrm.util.netSpeed({
	type: String, // type 0，测试网速、1，查询记录 ，默认 0
	params: Object, // 无参数时，传{}
	onSuccess: res => {
		//data = {JSONObject}
		// example: { result : 0 } H5业务层根据此result的值做对应处理
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});

19.打开页面

 mcrm.biz.openMcrm({
	pageCode: String, // newMarket 营销案、broadOpenFusionNew 宽带新装
	params: Object, // 无参数时，传{}
	onSuccess: res => {
		//res.data = {JSONObject}
		console.log(res);
	},
	onFail: res => {
		console.log(res);
	}
});