前端H5开发组件
  1. 概述
  2. 获取当前用户信息
  3. 选人或部门组件
  4. 图片操作
    1. 拍照和选择本地图片
    2. 通过hash获取本地文件
    3. 上传本地文件
    4. 查看大图
  5. 音频
    1. 录音
    2. 播放录音
    3. 停止播放
  6. 扫描2维码或条形码
  7. 调用本地浏览器
  8. 地理定位
    1. 获取当前定位
    2. 显示地理位置
    3. 编辑地理位置
    4. 显示多个地理位置
    5. 经纬度解析地址信息
  9. 复制到剪切板
  10. 切换到某用户信息界面
  11. 其他组件调用

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");
回到顶部
2016-11-23 14:55