前端H5开发组件

2024-07-11 19:52| 来源: 网络整理| 查看: 265

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访问本地图片文件

表示方形裁剪的缩略图 isOrigin表示是否拉取原图 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应用

【本文地址】

前端H5开发组件

前端H5开发组件

今日新闻

推荐新闻