hesc-jsapi
v1.1.4
Published
hesc hybride jsapi
Downloads
3
Readme
H5混合开发框架2.0版
JSAPI能力是为H5应用提供调用手机原生能力，帮助开发者高效使用拍照，定位等手机系统能力，融合H5和原生开发。
面向对象：公司前端，终端开发人员
使用说明
1.使用npm安装npm install hesc-jsapi --save
2.在main.js文件里进行全局引入，并注册为全局变量import {hesc} from 'hesc-jsapi'Vue.prototype.$hesc = hesc
3.在单页面的 index.html 文件中引入 CDN 链接。
https://cdn.jsdelivr.net/npm/[email protected]/index.min.js
接口约定
- 所有接口都为异步
- 接受一个object类型的参数
- 成功回调 onSuccess(某些异步接口的成功回调，将在事件触发时被调用，具体详情请查看相关onSuccess回调时机)
- 失败回调 onFail
this.$hesc.命名空间.功能.方法({
参数1: '',
参数2: '',
onSuccess: function(result) {
//成功回调
/*
{
//所有返回信息都输出在这里
}*/
},
onFail: function(){
//失败回调
}
}) JSAPI总览
JSAPI用法
1容器
获取容器版本号
this.$hesc.soft.version({
onSuccess: function(result) {
/*
{versionCode:Number,versionName:String}
*/
},
onFail: function(){}
})2弹窗
2.1 alert
this.$hesc.device.notification.alert({
message: "亲爱的",
title: "提示",//可传空
buttonName: "收到",
onSuccess : function() {
//onSuccess将在点击button之后回调
/*回调*/
},
onFail : function(err) {}
});2.2 confirm
this.$hesc.device.notification.confirm({
message: "你爱我吗",
title: "提示",
buttonLabels: ['爱', '不爱'],
onSuccess : function(result) {
//onSuccess将在点击button之后回调
/*
{
buttonIndex: 0 //被点击按钮的索引值，Number类型，从0开始
}
*/
},
onFail : function(err) {}
});2.3 toast
this.$hesc.device.notification.toast({
text: String, //提示信息
duration: Number, //显示持续时间，单位秒，默认按系统规范[android只有两种(<=2s >2s)]
delay: Number, //延迟显示，单位秒，默认0
onSuccess : function(result) {
/*{}*/
},
onFail : function(err) {}
})2.4 单选
this.$hesc.biz.util.select({
title: “单选”, //选择框标题
buttonLabels: ['确定', '取消'], //按钮文本
array:[ '中国', '美国','加拿大', '英国'], //选项
onSuccess : function(result) {
//onSuccess将在点击button之后回调
/*
{
buttonIndex: 0 //被点击按钮的索引值，Number类型，从0开始，
item：“中国” //返回的值
}
*/
},
onFail : function(err) {}
})2.5 多选
this.$hesc.biz.util.multiSelect({
title: “多选, //选择框标题
buttonLabels: ['确定', '取消'], //按钮文本
array:[ '中国', '美国','加拿大', '英国'], //选项
onSuccess : function(result) {
//onSuccess将在点击button之后回调
/*
{
buttonIndex: 0 //被点击按钮的索引值，Number类型，从0开始，
items：[“中国”, “美国”] //返回的值
}
*/
},
onFail : function(err) {}
})3设备
3.1获取网络类型
this.$hesc.device.connection.getNetworkType({
onSuccess : function(data) {
/*
{
result: 'wifi' // result值: wifi mobile unknown none none表示离线
}
*/
},
onFail : function(err) {}
});3.2获取uuid
this.$hesc.device.base.getUUID({
onSuccess : function(data) {
/*
{
uuid: '3udbhg98ddlljokkkl' //
}
*/
},
onFail : function(err) {}
});3.3获取手机基础信息
this.$hesc.device.base.getPhoneInfo({
onSuccess : function(data) {
/*
{
screenWidth: 1080, // 手机屏幕宽度
screenHeight: 1920, // 手机屏幕高度
brand:'Mi'， // 手机品牌
model:'Note4', // 手机型号
version:'7.0'. // 版本
netInfo:'wifi' , // 网络类型 wifi／4g／3g
operatorType :'xx' // 运营商信息
}
*/
},
onFail : function(err) {}
});4日历
4.1日期选择器
this.$hesc.biz.util.datepicker({
format: 'yyyy-MM-dd',//注意：format只支持android系统规范，即2015-03-31格式为yyyy-MM-dd
value: '2015-04-17', //默认显示日期
onSuccess : function(result) {
//onSuccess将在点击完成之后回调
/*{
value: "2015-02-10"
}
*/
},
onFail : function(err) {}
})4.2时间选择器
this.$hesc.biz.util.timepicker({
format: 'HH:mm',
value: '14:00', //默认显示时间
onSuccess : function(result) {
//onSuccess将在点击完成之后回调
/*{
value: "10:00"
}
*/
},
onFail : function(err) {}
})4.3日期及时间选择器
this.$hesc.biz.util.datetimepicker({
format: 'yyyy-MM-dd HH:mm',
value: '2015-04-17 08:00', //默认显示
onSuccess : function(result) {
//onSuccess将在点击完成之后回调
/*{
value: "2015-06-10 09:50"
}
*/
},
onFail : function(err) {}
})5导航栏
5.1 设置导航栏颜色
this.$hesc.biz.navigation.setbg({
bgcolor: '#CCF5F5F5',//ARGB格式 --- 透明度，红色，绿色，蓝色
onSuccess : function() {
//onSuccess将在点击完成之后回调
},
onFail : function(err) {}
})5.2设置导航栏标题
this.$hesc.biz.navigation.setTitle({
title : '邮箱正文',//控制标题文本，空字符串表示显示默认文本
onSuccess : function() {
//onSuccess将在点击完成之后回调
},
onFail : function(err) {}
});5.3设置左侧导航按钮文本
this.$hesc.biz.navigation.setLeft({
control: true,//是否控制点击事件，true 控制，false 不控制
text: '',//控制显示文本，空字符串表示显示默认文本
onSuccess : function() {
//如果control为true，则onSuccess将在发生按钮点击事件被回调
},
onFail : function(err) {}
});5.4关闭当前页面
使用说明
调用此接口可以关闭当前浏览器窗口
this.$hesc.biz.navigation.close({
onSuccess : function() {
},
onFail : function(err) {}
})5.5设置导航栏右侧单个按钮
this.$hesc.biz.navigation.setRight({
show: false,//控制按钮显示， true 显示， false 隐藏
control: true,//是否控制点击事件，true 控制，false 不控制
text: '发送',//控制显示文本，空字符串表示显示默认文本
onSuccess : function() {
//如果control为true，则onSuccess将在发生按钮点击事件被回调
},
onFail : function(err) {}
});5.6返回上一级页面
使用说明 调用此接口会返回前端页面的上级浏览页面，如果是H5的根页面，调用此接口会关闭当前浏览窗口。
this.$hesc.biz.navigation.goBack({
onSuccess : function(result) {
/*result结构
{}
*/
},
onFail : function(err) {}
})5.7替换页面
使用说明 使用新的页面替换当前页面，当前页面会被立即销毁，展示新页面，无动画。
this.$hesc.biz.navigation.replace({
url: 'https://xxx.com',// 新的页面链接
onSuccess : function(result) {
/*
{}
*/
},
onFail : function(err) {}
});5.8显示隐藏标题栏
使用说明 控制标题栏的显示和隐藏。
this.$hesc.biz.navigation.display({
show: false,//控制按钮显示， true 显示， false 隐藏
onSuccess : function(result) {
},
onFail : function(err) {}
});6UI控件
6.1设置顶部进度条颜色
this.$hesc.ui.progressBar.setColors({
colors:"#CCFFFFFF" //ARGB
onSuccess: function(data) {
},
onFail: function() {
}
})7扫码
7.1扫二维码
this.$hesc.biz.util.scan({
type: "qrCode" , //String type 为 qrCode
onSuccess: function(data) {
//onSuccess将在扫码成功之后回调
/* data结构
{ 'text': String}
*/
},
onFail : function(err) {
}
})8存储
8.1设置存储信息
this.$hesc.util.domainStorage.setItem({
name:'key' , //String 存储信息的key值，必须唯一
value:'value', //String 存储信息的Value值
onSuccess : function(info) {
/*{
result:true
}*/
},
onFail : function(err) {
alert(err);
}
});8.2获取存储信息
this.$hesc.util.domainStorage.getItem({
name:'key' , // 存储信息的key值
onSuccess : function(info) {
/*{
value: 'value' // 获取存储的信息
}*/
},
onFail : function(err) {
alert(err);
}
});8.3删除存储信息
this.$hesc.util.domainStorage.removeItem({
name:'key' , // 存储信息的key值
onSuccess : function(info) {
/*{
result:true
}*/
},
onFail : function(err) {
alert(err);
}
});9地图
9.1获取当前GPS坐标
this.$hesc.device.geolocation.get({
tiandi:true,//是否采用天地图 true天地图 false其它地图平台
key:'',//天地图的开发者key，请申请服务端应用的key
poi:true,// 是否获取该GPS位置的地理信息 true获取 false不获取 -- 只有天地图模式会返回地理信息
onSuccess : function(result) {
/* 坐标 result 结构
{
longitude : Number,//经度
latitude : Number,//纬度
/* 如采用了天地图，会返回天地图的地理信息
province: 'xxx', // POI所在省会，可能为空
provinceCode: 'xxx', // POI所在省会编码，可能为空
city: 'xxx', // POI所在城市，可能为空
cityCode: 'xxx', // POI所在城市，可能为空
adName: 'xxx', // POI所在区名称，可能为空
adCode: 'xxx', // POI所在区编码，可能为空
title: 'xxx', // POI的名称
address: 'xxx', // 详细地址，可能为空
formatted_address:'xxx', // 格式化地址
*/
}
*/
},
onFail : function(err) {}
});9.2打开地图并定位
使用说明 默认采用天地图形式
this.$hesc.biz.map.locate({
latitude: 39.903578, // 纬度，非必须
longitude: 116.473565, // 经度，非必须
baseUrl:String， //天地图底图地址
annotation：String， //天地图标注地址
parturl：String,//部件地址
key:'xxx',//申请的天地图key
mapExtent:{minX:116.46,minY:31.72,maxX:116.71,maxY:31.87},//地图初始化范围
onSuccess: function (result) {
/* result 结构 */
{
province: 'xxx', // POI所在省会，可能为空
provinceCode: 'xxx', // POI所在省会编码，可能为空
city: 'xxx', // POI所在城市，可能为空
cityCode: 'xxx', // POI所在城市，可能为空
adName: 'xxx', // POI所在区名称，可能为空
adCode: 'xxx', // POI所在区编码，可能为空
distance: 'xxx', // POI与设备位置的距离
postCode: 'xxx', // POI的邮编，可能为空
snippet: 'xxx', // POI的街道地址，可能为空
title: 'xxx', // POI的名称
address: 'xxx', // 详细地址，可能为空
latitude: 39.903578, // POI的纬度
longitude: 116.473565, // POI的经度
}
},
onFail: function (err) {}
});10业务
10.1 打开应用
使用说明 打开手机上其它APP应用
this.$hesc.biz.microApp.openApp({
agentId: '123',// iOS:应用scheme; Android:应用包名
appId: '234',// Android: APP入口activity cn.com.hesc.xxxActivity
onSuccess : function() {},
onFail : function(err) {}
})11 文件
11.1 下载文件
this.$hesc.biz.util.downloadFile({
url: 'http://static.dingtalk.com/media/lADOADTWJM0C2M0C7A_748_728.jpg_60x60q90.jpg', //要下载的文件的url
name: '一个图片.jpg', //定义下载文件名字
onSuccess : function() {
/*下载完成
{path:'xxxxx'}
*/
},
onFail : function() {}
})12 图片
12.1 拍照
this.$hesc.device.media.capture({
custome:true， //true 自定义相机 false 系统相机
compress:true,//true 进行压缩
thumbnail:false,//true 优先返回缩略图base64，后台上传图片，false不需要缩略图，直接后台上传图片
mediaUrl:’’,//附件服务器地址
onThumbnail : function(result) {
/*拍摄图片后返回100*100的缩略图base64编码的字符串
{
thumbnails：['./9XXXXXXXXXXXXXXXXXX’,''}]
}
*/
},
onSuccess : function(result) {
/*图片上传成功后返回url地址
{
pics:[
{path : http://yf.hesc.com.cn/hesc-fileservice/upload/file/2018/04/04/20180404160840998550.jpg}
]
}
*/
},
onFail : function() {}
})12.2 选择图片
this.$hesc.device.media.select({
image:{multiple:true,compress:false,max:9},//multiple true进行多选 compress true进行压缩，max最多选9张，如果multiple设置为false，max默认赋值1
thumbnail:false,//true 优先返回缩略图base64，后台上传图片，false不需要缩略图，直接后台上传图片
mediaUrl:’’,//附件服务器地址
onThumbnail : function(result) {
/*拍摄图片后返回100*100的缩略图base64编码的字符串
{
thumbnails：['./9XXXXXXXXXXXXXXXXXX’,''}]
}
*/
},
onSuccess : function(result) {
/*图片上传成功后返回url地址
{
pics:[
{path : http://yf.hesc.com.cn/hesc-fileservice/upload/file/2018/04/04/20180404160840998550.jpg}
]
}
*/
},
onFail : function(err) {}
})12.3 图片预览
this.$hesc.biz.util.previewImage({
urls: [String],//图片地址列表
current: String,//当前显示的图片链接 可不填
onSuccess : function(result) {
/**/
},
onFail : function(err) {}
})13电话
13.1 拨打电话
this.$hesc.biz.telephone.call({
phone: ‘’, //电话号码
onSuccess : function() {},
onFail : function() {}
})13.2 发送短信
this.$hesc.biz.telephone.smg({
phone: ‘’, //电话号码
msg:’发送的信息’,//要发送的信息
onSuccess : function() {},
onFail : function() {}
})14音频
14.1 开始录音
this.$hesc.device.audio.startRecord({
mediaUrl:’’,//附件服务器地址
onSuccess : function () {//默认20秒。
},
onFail : function (err) {
}
});14.2 停止录音
this.$hesc.device.audio.stopRecord({
mediaUrl:’’,//附件服务器地址
onSuccess : function(res){
res.mediaUrl; // 返回音频的url地址，可用于本地播放和音频下载
res.duration; // 返回音频的时长，单位：秒
},
onFail : function (err) {
}
});14.3 监听录音自动停止
使用说明 当语音录制时间超过20秒时，自动停止语音录制，同时将录制的语音上传到服务端，返回音频资源的url。 推荐在调用 device.audio.startRecord 前设置监听录音自动停止的回调。
this.$hesc.device.audio.onRecordEnd({
onSuccess : function(res) {
res.mediaUrl; // 停止播放音频url地址
res.duration; // 返回音频的时长，单位：秒
},
onFail : function (err) {
}
});14.4 播放语音
this.$hesc.device.audio.play({
localAudioId : "mediaUrl",//音频的url地址
onSuccess : function () {
},
onFail : function (err) {
}
});14.5 暂停播放
this.$hesc.device.audio.pause({
localAudioId : "mediaUrl",
onSuccess : function() {
},
onFail : function(err) {
}
});14.6 恢复暂停播放的语音
this.$hesc.device.audio.resume({
localAudioId : "mediaUrl",
onSuccess : function() {
},
onFail : function(err) {
}
});14.7 停止播放语音
this.$hesc.device.audio.stop({
localAudioId : "mediaUrl",
onSuccess : function () {
},
onFail : function (err) {
}
});14.8监听播放自动停止
this.$hesc.device.audio.onPlayEnd({
onSuccess : function () {
},
onFail : function (err) {
}
});15打开新页面
15.1在新窗口上打开链接
this.$hesc.biz.util.openLink({
url:"http://www.dingtalk.com",//要打开链接的地址
onSuccess : function() {
/**/
},
onFail : function(err) {}
})16调用原生功能
16.1直接调用原生功能
this.$hesc.biz.native.method({
param:object,//任何内容都可以
onSuccess : function() {
/**/
},
onFail : function(err) {}
})