前端H5开发组件

1.概述

口袋助理JS-SDK是面向网页开发者提供的本地应用扩展接口，开发者可以高效使用拍照，选图，选用户，语音，位置等手机系统的能力，做到功能更强大的网页应用。

所有接口均需要在KoudaiJSBridge环境加载完成后才能调用，KoudaiJSBridge环境完成加载后会抛出 document的KoudaiJSBridgeReady事件。KoudaiJSBridge对象属于window下面的全局对象，该对象包含了口袋助理提供的所有开发者接口。

所有的接口都基于

KoudaiJSBridge.invoke("xx", {...},function(rv,rsp){
    if(!rsp.success){
        alert('操作失败')
    }
},{//这个参数可以不配置，默认如果出错会把错误alert出来，如果下面参数配置为0，则出错不会直接提示
    alertOnErr: 0 
})

该接口做扩展

注意：使用H5的开放接口需要联系口袋助理客服，进行授权开通

2.获取当前用户信息

document.addEventListener("KoudaiJSBridgeReady",function(e){
    alert(JSON.stringify(KoudaiJSBridge.iniData));
    /*KoudaiJSBridge.iniData={
        pid:1,
        did:2,
        mobile:"111111111111",
        username:"ccc",
        company:"公司名称"
    }*/
})

3.选人或部门组件

KoudaiJSBridge.invoke("selectPersons", {
    title: "选择人",
    single: true, //出现这个的时候表示单选
    //all:true,//出现这个可选未激活
    //includeGroup:true,//可选小组
    personOnly: true, //出现这个的时候只能选人
    //orgOnly:true,//出现这个的时候只能选组织结构
    selected: [{//初始化选择
        id: 1,
        text: "xx",
        type: 1
    }], //type:0是人,1是部门,2是组
    filter: [{
            id: 5,
            text: "xx",
            type: 1
        }] //不可选的值,可不传，有传只能是数组
}, function(selects) {
    /*返回选择结果selects
    如：[{id:"xx",text:"xx",type:1}]
    */
    if (!selects) return;
    var html = [];
    selects.forEach(function(item) {
        html.push(item.text);
    })
    alert(html.join(','));
});

4.图片操作

拍照和选择本地图片

KoudaiJSBridge.invoke("getLocalImg",{limit:3},function(arr){
        /*返回图片hash数组
        如：["fgaklfgfds","gfdsgfewfew"]
        */
        if(!arr)return;
        alert(JSON.stringify(arr));
    });

通过hash访问本地图片文件

<img src='koudai://getfile/?hash=xxxxxxx'>
表示方形裁剪的缩略图
<img src='koudai://getfile/?hash=xxxxxxx&isOrigin=1'>
isOrigin表示是否拉取原图
<img src='koudai://getfile/?hash=xxxxxxx&isSingle=1'>
isSingle表示等比例缩略图

上传本地文件

    KoudaiJSBridge.invoke("uploadFile",["hash1","hash2"]);

查看大图

KoudaiJSBridge.invoke("showBigImgs",{
    isEdit:true,//是否带删除图标（如果是编辑状态下需要这样一个操作，）
    imgs:[hash1,hash2],//图片hash数组
    curidx:0,//当前点击的图片在组的索引位置
    width:10,//图片宽
    height:10,//图片高
    x:10,//图片x坐标
    y:10//图片y坐标
},function(arr){
    //如果isEdit是true，返回留下来的图片hash数组
})

5.音频

录音

KoudaiJSBridge.invoke("soundRecord", {}, function(params) {
    /*返回语音文件filehash
     */
    if (!params) return;
    window.soundfile = params.file;//文件hash
    alert("录音完成" + (params.msecs / 1000) + "秒");
});

播放录音

KoudaiJSBridge.invoke("playSoundRecord", {
    file: soundfile//语音文件hash
}, function(state) {
    //播放结束回调
});

停止播放

KoudaiJSBridge.invoke("stopSoundRecord", {
    file: soundfile //语音文件hash
});

6.扫描2维码或条形码

KoudaiJSBridge.invoke("scanCode", {}, function(str) {
        /*返回扫描结果
            str
        */
        alert(str);
    })

7.调用本地浏览器

KoudaiJSBridge.invoke("browerOpen", {
    url: "https://kdzl.cn"
})

8.地理定位

获取当前定位

//获取地理定位(无界面)

    KoudaiJSBridge.invoke("getGeoLocation", {
        hasAddress: true //没有这个的时候只返回经纬度
    }, function(rv, rsp, opts) {
        if (rsp.errCode === 4) { //没有权限
            KoudaiJSBridge.invoke("showAlert", {
                msg: "没有开启gps定位权限"
            });
            return;
        }
        /*
            rv:{
                latitude:32.069983286567,//纬度
                longitude:118.81473326775,//经度
                address:"江苏省南京市玄武区九华山隧道",
                province:"江苏省",
                city:"南京市"
            }
        */
        alert(JSON.stringify(rv));
    }, {
        alertOnErr: 0
    });

显示地理位置

//在地图上显示地理位置（不可编辑）
KoudaiJSBridge.invoke("showMap", {
    title: "地图页面标题",
    points: [{ //数组，必填，0个或多个,0个的时候初始化当前位置
        latitude: 32.069983286567, //纬度
        longitude: 118.81473326775, //经度
        address: "江苏省南京市玄武区九华山隧道", //如果这个值不为空初始化后就显示这个值不用再解析地址
        province: "江苏省",
        city: "南京市"
    }]
}, function(rv) {
    /*
        rv:{
            latitude:32.069983286567,//纬度
            longitude:118.81473326775,//经度
            address:"江苏省南京市玄武区九华山隧道",
            province:"江苏省",
            city:"南京市"
        }
    */
    if (!rv) return;
    alert(JSON.stringify(rv));
});

编辑地理位置

//在地图上显示地理位置（可编辑）
KoudaiJSBridge.invoke("showMap", {
    title: "地图页面标题",
    zoom: 13, //仅当只有0，或1个points的时候有效，多个点的时候自动缩放到可见所有点
    isEdit: true, //当points没有或只有一个的时候该参数有效，为true的时候可拖动编辑点，点击完成会回调地址信息
    points: [{ //数组，必填，0个或多个,0个的时候初始化当前位置
        latitude: 32.069983286567, //纬度
        longitude: 118.81473326775, //经度
        address: "江苏省南京市玄武区九华山隧道", //如果这个值不为空初始化后就显示这个值不用再解析地址
        province: "江苏省",
        city: "南京市"
    }]
}, function(rv) {
    /*
        rv:{
            latitude:32.069983286567,//纬度
            longitude:118.81473326775,//经度
            address:"江苏省南京市玄武区九华山隧道",
            province:"江苏省",
            city:"南京市"
        }
    */
    if (!rv) return;
    alert(JSON.stringify(rv));
});

显示多个地理位置

//在地图上显示地理位置（可编辑）
KoudaiJSBridge.invoke("showMap", {
    title: "地图页面标题",
    zoom: 13, //仅当只有0，或1个points的时候有效，多个点的时候自动缩放到可见所有点
    isEdit: true, //当points没有或只有一个的时候该参数有效，为true的时候可拖动编辑点，点击完成会回调地址信息
    points: [{ //数组，必填，0个或多个,0个的时候初始化当前位置
        latitude: 32.069983286567, //纬度
        longitude: 118.81473326775, //经度
        address: "江苏省南京市玄武区九华山隧道", //如果这个值不为空初始化后就显示这个值不用再解析地址
        province: "江苏省",
        city: "南京市"
    }, { //一定会给数组，0个或多个,0个的时候初始化当前位置
        latitude: 31.069983286567, //纬度
        longitude: 119.81473326775, //经度
        address: "第2个点", //如果这个值不为空初始化后就显示这个值不用再解析地址
        province: "江苏省",
        city: "南京市"
    }]
}, function(rv) {
    /*
        rv:{
            latitude:32.069983286567,//纬度
            longitude:118.81473326775,//经度
            address:"江苏省南京市玄武区九华山隧道",
            province:"江苏省",
            city:"南京市"
        }
    */
    if (!rv) return;
    alert(JSON.stringify(rv));
});

经纬度解析地址信息

//经纬度逆解析
KoudaiJSBridge.invoke("getAddress", {
    latitude: 32.069983286567, //纬度
    longitude: 118.81473326775 //经度
}, function(rv) {
    /*
        rv:{
            address:"江苏省南京市玄武区九华山隧道",
            province:"江苏省",
            city:"南京市"
        }
    */
    alert(JSON.stringify(rv));
});

9.复制到剪切板

//复制
KoudaiJSBridge.invoke("copy", {
    text: "一二<>;'\:,.?\"|kl!@#@%$#@^%$*&^%(*&)_+`abc"
}, function(rv, rsp) {
    if (rsp.success) {
        alert("复制成功");
    }
})

10.切换到某用户信息界面

//显示个人详细信息(逻辑跟审批页面点击个人头像一样，如果这个人不存在则提示)
KoudaiJSBridge.invoke("showPersonMsg", {
    pid: pid//自己的pid或者指定其他pid,对应选人组件id
})

11.其他组件调用

提示框

KoudaiJSBridge.invoke("showInfo", {
    msg: "请输入理由"
});

警告框

KoudaiJSBridge.invoke("showAlert", {
    msg: "我是弹出框"
}, function(rv) {
    alert(1)
});

等待加载

KoudaiJSBridge.invoke("showLoading", {
    msg: "加载中...1s后消失"
}, function() {
    setTimeout(function() {
        KoudaiJSBridge.invoke("hideLoading");
    }, 1000);
});

确认框

KoudaiJSBridge.invoke("showConfirm", {
    msg: "是否保存？"
}, function(btn) {
    if (btn === "yes") {
        KoudaiJSBridge.invoke("showAlert", {
            msg: "点击了'是'"
        });
    } else {
        KoudaiJSBridge.invoke("showAlert", {
            msg: "点击了'否'"
        });
    }
});

ActionSheet

KoudaiJSBridge.invoke("showActionSheet", {
    title: "选择问卷类型",
    items: [{
        text: "单选",
        value: "1"
    }, {
        text: "多选题",
        value: "2"
    }, {
        text: "文本填空",
        value: "3"
    }]
}, function(item) {
    /*返回item
    如：{text:"单选",value:"1"}
    */
    if (item) {
        KoudaiJSBridge.invoke("showInfo", {
            msg: item.text
        });
    }
});

时间选择组件

//选择年月日时分(只能选今天明天)
var me = this,
KoudaiJSBridge.invoke("selectTime", {
    title: "选择年月日时分(只能选今天明天)", //可不传，不传就显示选择时间
    format: "yMdhm", //可选项,hm时分，yMd年月日，yMdhm年月日时分
    timespan: 30, //（可不传，不传按1处理）时间间隔，单位分钟，一般只有在选的内容有分的时候，取值范围0-30
    value: value, //可不传，不传就当前时间
    minText: "最小值当前时间",
    minValue: new Date().getTime(),
    maxText: "最大值是明天当前时间",
    maxValue: new Date().getTime() + 3600000 * 24
}, function(rsp) {
    /*rsp:{y:2015,M:1,d:1,h:13,m:40},
        如果是取消或不选则不传rsp
    */
    if (rsp) {
        alert(JSON.stringify(rsp));
    }
})

退出当前HTML5应用

KoudaiJSBridge.invoke("exitWebApp");

回到顶部