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/hesc-hybrid-master@1.0.4/index.min.js

接口约定

所有接口都为异步
接受一个object类型的参数
成功回调 onSuccess(某些异步接口的成功回调，将在事件触发时被调用，具体详情请查看相关onSuccess回调时机)
失败回调 onFail

this.$hesc.命名空间.功能.方法({
    参数1: '',
    参数2: '',
    onSuccess: function(result) {
    //成功回调
    /*
    {
        //所有返回信息都输出在这里
    }*/
    },
    onFail: function(){
    //失败回调
    }
})

JSAPI总览

分类	接口说明	JSAPI名称
容器	获取容器版本号	soft.version
弹窗	alert	device.notification.alert
	confirm	device.notification.confirm
	toast	device.notification.toast
	单选	biz.util.select
	多选	biz.util.multiSelect
设备	获取网络类型	device.connection.getNetworkType
	获取uuid	device.base.getUUID
	获取手机基础信息	device.base.getPhoneInfo
日期&月历	日期选择器	biz.util.datepicker
	时间选择器	biz.util.timepicker
	日期及时间选择器	biz.util.datetimepicker
导航栏	设置导航栏颜色	biz.navigation.setbg
	设置左侧导航按钮	biz.navigation.setLeft
	设置导航栏右侧单个按钮	biz.navigation.setRight
	替换页面	biz.navigation.replace
	设置导航栏标题	biz.navigation.setTitle
	关闭当前页面	biz.navigation.close
	返回上一级页面	biz.navigation.goBack
显示隐藏标题栏	biz.navigation.display
UI控件	设置顶部进度条颜色	ui.progressBar.setColors
扫码	扫二维码	biz.util.scan
存储	设置存储信息	util.domainStorage.setItem
	获取存储信息	util.domainStorage.getItem
	删除存储信息	util.domainStorage.removeItem
地图	获取当前GPS坐标	device.geolocation.get
地图	打开地图并定位	biz.map.locate
业务	打开APP应用	biz.microApp.openApp
文件	下载文件	biz.util.downloadFile
图片	拍照	device.media.capture
	选择图片	biz.media.select
	图片预览	biz.util.previewImage
电话	拨打电话	biz.telephone.call
电话	发送短信	biz.telephone.smg
音频接口	开始录音	device.audio.startRecord
	停止录音	device.audio.stopRecord
	监听录音自动停止	device.audio.onRecordEnd
	播放语音	device.audio.play
	暂停播放语音	device.audio.pause
	恢复暂停播放的语音	device.audio.resume
	停止播放音频	device.audio.stop
	监听播放自动停止	device.audio.onPlayEnd
打开新页面	在新窗口上打开链接	biz.util.openLink

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) {}
})

Usage no npm install needed!