ApiCloud组件

最新推荐文章于 2025-06-05 10:03:09 发布
最新推荐文章于 2025-06-05 10:03:09 发布
阅读量1.9k 收藏 8
点赞数
CC 4.0 BY-SA版权
分类专栏： 　　● ApiCloud. ▼ 前端 - Web 文章标签： ApiCloud组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36698956/article/details/80621876

在APICloud创建了应用之后，应用的包结构如下图所示：

：

其中“config.xml”和 “index.html” 必须包含，其它均为可选。“config.xml”是配置文件，“index.html”是启动页面，“icon”为图标文件目录，“launch”为启动图片目录

actionSheet底部弹出框：

[javascript] view plain copy

  1. api.actionSheet({  
  2.     title: '底部弹出框测试',  
  3.     cancelTitle: '这里是取消按钮',  
  4.     destructiveTitle: '红色警告按钮',  
  5.     buttons: ['1','2','3']  
  6. },function(ret,err){  
  7.     api.alert({  
  8.         msg: '你刚点击了'+ret.buttonIndex  
  9.     });  
  10. });  

confirm对话框：

 

[javascript] view plain copy

  1. api.confirm({  
  2.     title: 'testtitle',  
  3.     msg: 'testmsg',  
  4.     buttons:[ '确定', '取消']  
  5. },function(ret,err){  
  6.     if(ret.buttonIndex == 1){  
  7.         api.alert({msg: '点击了确定'});  
  8.     }  
  9. });  


alert对话框：

 

[javascript] view plain copy

  1. api.alert({  
  2.     title: 'testtitle',  
  3.     msg: 'testmsg',  
  4.     buttons:[ '确定']  
  5. },function(ret,err){  
  6.     if(ret.buttonIndex == 1){  
  7.         api.alert({msg: '点击了确定'});  
  8.     }  
  9. });  

prompt带输入框的对话框

 

[javascript] view plain copy

  1. api.prompt({  
  2.     buttons:['确定', '取消']  
  3. },function(ret,err){  
  4.     if(ret.buttonIndex == 1){  
  5.         api.alert({msg:ret.text});  
  6.     }  
  7. });  


ajax:异步请求

 

[javascript] view plain copy

  1. api.ajax({  
  2.     url: 'http://192.168.1.101:3101/upLoad',  
  3.     method: 'post',  
  4.     cache: false,  
  5.     timeout: 30,  
  6.     dataType: 'json',  
  7.     returnAll:false,  
  8.     data:{  
  9.         values: {name: 'haha'},  
  10.         files: {file: 'fs://a.gif'}  
  11.     }  
  12. },function(ret,err){  
  13.     if (ret) {  
  14.         var urlJson = JSON.stringify(ret);  
  15.         api.alert({msg: urlJson});  
  16.     }else {  
  17.         api.alert({  
  18.             msg:('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode)  
  19.         });  
  20.     };  
  21. });  


animation动画：

[javascript] view plain copy

  1. api.animation ({  
  2.     name: 'page1',//子窗口名称  
  3.     delay: 1000,  
  4.     duration: 3000,  
  5.     curve: 'easeIn',//动画曲线类型  
  6.     repeatCount: 2,  
  7.     autoreverse: true,//一次动画结束后是否自动反转动画  
  8.     alpha: 0.6,  
  9.     translation:{//平移参数  
  10.         x: 0,//x轴上的平移距离  
  11.         y: 100,  
  12.         z: 0  
  13.     },   
  14.     scale:{  
  15.         x: 1.2,//<span style="font-family: Arial, Helvetica, sans-serif;">x轴上的放大倍率</span>  
  16.         y: 1,  
  17.         z: 1  
  18.     },  
  19.     rotation:{  
  20.         degree:45,//旋转角度  
  21.         x: 0,  
  22.         y: 0,  
  23.         z: 1  
  24.     }  
  25. }, function() {  
  26.     api.alert({msg: '动画结束'});  
  27. });  

bringFrameToFront：调整子窗口到前面

[javascript] view plain copy

  1. api.bringFrameToFront({  
  2.     from:'page1',  
  3.     to:'page2'  
  4. });  

call：拨打电话

 

[javascript] view plain copy

  1. api.call({  
  2.     type: 'tel_prompt',  
  3.     number: '10086'  
  4. });  

cancelDownload：取消文件下载

 

[javascript] view plain copy

  1. var url = 'http://file05.daimg.com/2013/photo/1401/DAimG_2014011335974260TA24.rar';  
  2. api.cancelDownload ({  
  3.     url: url  
  4. });  

closeFrame：关闭子窗口

 

[javascript] view plain copy

  1. api.closeFrame({  
  2.     name: 'page2'  
  3. });  

closeFrameGroup：关闭窗口组

 

[javascript] view plain copy

  1. api.closeFrameGroup({  
  2.     name: 'group1'  
  3. });  

download文件下载：

 

[javascript] view plain copy

  1. var url = 'http://file05.daimg.com/2013/photo/1401/DAimG_2014011335974260TA24.rar';  
  2. api.download({  
  3.     url: url,  
  4.     savePath: 'fs://test.rar',//下载后的保存路径，如果为空会自动创建保存路径  
  5.     report: true,//是否上报  
  6.     cache: true,//是否缓存  
  7.     allowResume:true//是否支持断点续传  
  8. },function(ret,err){  
  9.     if (ret) {  
  10.         var value = ('文件大小：'+ret.fileSize+'；下载进度：'+ret.percent+'；下载状态'+ret.state+'存储路径: '+ret.savePath);  
  11.     } else{  
  12.         var value = err.msg;  
  13.     };  
  14. });  

execScript在指定窗口中执行脚本：

 

[javascript] view plain copy

  1. api.execScript({  
  2.     name: 'page1',  
  3.     script: 'exec();'//执行的JS方法  
  4. });  

getLocation获取位置信息

[javascript] view plain copy

  1. api.getLocation(  
  2.     function(ret, err){  
  3.         if(ret.status){  
  4.             var lat = ret.latitude;//纬度  
  5.             var lon = ret.longitude;//经度  
  6.             var t = ret.timestamp; //更新时间  
  7.             var str = '经度：'+ lon +'<br>';  
  8.             str += '纬度：'+ lat +'<br>';  
  9.             str += '更新时间：'+ t +'<br>';  
  10.         } else{  
  11.             api.alert({msg:err.msg});  
  12.         }  
  13.     }  
  14. );  

getPicture获取图片：

 

[javascript] view plain copy

  1. api.getPicture({  
  2.     sourceType: 'library',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">图片源类型</span>  
  3.     encodingType: 'png',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">编码格式</span>  
  4.     mediaValue: 'pic',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">媒体类型</span>  
  5.     destinationType: 'url',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">返回数据类型</span>  
  6.     allowEdit: true,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">是否可以编辑</span>  
  7.     quality: 50,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">图片质量</span>  
  8.     targetWidth:100,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">压缩后的图片宽度</span>  
  9.     targetHeight:100,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">压缩后的图片高度</span>  
  10.     saveToPhotoAlbum: false//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">是否保存到相册</span>  
  11. }, function(ret, err){   
  12.     if (ret) {  
  13.         api.alert({msg:ret.data});  
  14.     } else{  
  15.         api.alert({msg:err.msg});  
  16.     };  
  17. });  

mail发送邮件：

 

[javascript] view plain copy

  1. var recip = 'test@163.com';  
  2. var sub = '邮件测试';  
  3. var body = '这是一封测试用的邮件';  
  4. var attach = 'widget://a.txt';  
  5. api.mail({  
  6.     recipients: [recip],//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">收件人</span>  
  7.     subject: sub,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">邮件主题</span>  
  8.     body: body,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">邮件内容</span>  
  9.     attachments: [attach]//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">附件地址</span>  
  10. }, function(ret, err){  
  11.     if(ret.status){  
  12.         api.alert({  
  13.             msg: '发送成功'  
  14.         });  
  15.     } else{  
  16.         api.alert({  
  17.             msg: '发送失败'  
  18.         });  
  19.     }  
  20. });  

openApp打开手机上的其他应用：

 

[javascript] view plain copy

  1. api.openApp({//此方法只使用与Android应用  
  2.     androidPkg: 'android.intent.action.VIEW',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">目标应用的包名或action（Android平台使用）</span>  
  3.     mimeType: 'text/html',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">指定目标应用的响应数据类型</span>  
  4.     uri: 'http://www.baidu.com'//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">指定目标应用响应的uri</span>  
  5. },function(ret,err){  
  6.     var msg = JSON.stringify(ret);  
  7.     api.alert({  
  8.         title: 'openApp',  
  9.         msg: msg,  
  10.         buttons: ['确定']  
  11.     });  
  12. });  

openFrame打开子窗口：

 

[javascript] view plain copy

  1. api.openFrame({  
  2.     name: 'page2',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">窗口名字</span>  
  3.     url: './page2.html',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">请求地址</span>  
  4.     rect:{//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">窗口区域</span>  
  5.         x:0,  
  6.         y:0,  
  7.         w:320,  
  8.         h:480  
  9.     },  
  10.     pageParam: {name: 'test'},//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">页面参数</span>  
  11.     bounces: true,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">页面是否弹动</span>  
  12.     opaque: false,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">页面是否不透明</span>  
  13.     bgColor: 'rgba(0,0,0,0)',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">背景色</span>  
  14.     vScrollBarEnabled:true,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">是否显示垂直滚动条</span>  
  15.     hScrollBarEnabled:true//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">是否显示<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">水平</span>滚动条</span>  
  16. });  

openFrameGroup打开窗口组：

 

[javascript] view plain copy

  1. api.openFrameGroup ({  
  2.     name: 'group1',  
  3.     background:'#fff',  
  4.     scrollEnabled:false,  
  5.     rect:{x:0, y:0, w:320, h:240},  
  6.     index:0,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">默认显示的页面索引</span>  
  7.     frames://<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">子窗口数组</span>  
  8.     [{  
  9.         name: 'frame1',   
  10.         url: 'frame1.html',   
  11.         pageParam:{},   
  12.         bounces:true,   
  13.         opaque:true,  
  14.         bgColor: '#fff',   
  15.         vScrollBarEnabled:true,  
  16.         hScrollBarEnabled:false  
  17.     },{  
  18.         name: 'frame2',   
  19.         url: 'frame2.html',   
  20.         pageParam:{},   
  21.         bounces:true,   
  22.         opaque:true,  
  23.         bgColor: '#fff',   
  24.         vScrollBarEnabled:true,  
  25.         hScrollBarEnabled:false  
  26.     }]  
  27. }, function(ret, err){  
  28.     var name = ret.name;  
  29.     var index = ret.index;  
  30. });  

openPicker打开时间选择器：

 

[javascript] view plain copy

  1. api.openPicker({  
  2.     type: 'date_time',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">拾取器类型</span>  
  3.     date: '2014-05-01 12:30',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">时间格式化字符串，格式yyyy-MM-dd HH:mm</span>  
  4.     title:'选择时间'//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">标题</span>  
  5. },function(ret,err){  
  6.     var year = ret.year;  
  7.     var month = ret.month;  
  8.     var day = ret.day;  
  9.     var hour = ret.hour;  
  10.     var minute = ret.minute;  
  11.     if (type == 'date') {  
  12.         var value = year+'年'+month+'月'+day+'日';  
  13.     } else if (type == 'time') {  
  14.         var value = hour+'时'+minute+'分';  
  15.     } else if (type == 'date_time') {  
  16.         var value = year+'年'+month+'月'+day+'日'+hour+'时'+minute+'分';  
  17.     }  
  18. });  

openSlidLayout打开侧滑式布局：

 

[javascript] view plain copy

  1. api.openSlidLayout ({  
  2.     type: 'all',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">侧滑类型（left：左侧滑、right：右侧滑、all：左右侧滑）</span>  
  3.     leftEdge:80,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">左侧滑时，侧滑window停留时露出的宽度</span>  
  4.     rightEdge:60,  
  5.     fixedPane: {//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">底部固定层window</span>  
  6.         name: 'frame1',   
  7.         url: 'frame1.html',   
  8.         bgColor: '#fff',   
  9.         bounces:true,   
  10.         opaque:true,   
  11.         vScrollBarEnabled:true,  
  12.         hScrollBarEnabled:false  
  13.     },  
  14.     slidPane: {  
  15.         name: 'frame1',   
  16.         url: 'frame1.html',   
  17.         bgColor: '#fff',   
  18.         bounces:true,   
  19.         opaque:true,   
  20.         vScrollBarEnabled:true,  
  21.         hScrollBarEnabled:false  
  22.     }  
  23. }, function(ret){  
  24.     var type = ret.type;  
  25.     if (type == 'left') {  
  26.   
  27.     } else {  
  28.   
  29.     }  
  30. });  

openSlidPane侧滑：

 

[javascript] view plain copy

  1. api.openSlidPane ({  
  2.     type: 'left'//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">侧滑类型，left或right，不能为空</span>  
  3. });  

openWidget打开Widget：

 

[javascript] view plain copy

  1. api.openWidget({  
  2.     id: 'UZ00000001',  
  3.     animation: {  
  4.         type: 'flip',  
  5.         subType: 'from_bottom',  
  6.         duration: 500  
  7.     }  
  8. }, function(ret, err){  
  9.     if(ret){  
  10.     } else{  
  11.         api.alert({msg:err.msg});  
  12.     }  
  13. });  

openWin打开窗口，如果窗口已存在，则会把窗口显示到最前面：

 

[javascript] view plain copy

  1. api.openWin({  
  2.     name: 'page1',  
  3.     url: './page1.html',  
  4.     pageParam: {name: 'test'},  
  5.     bounces: true,  
  6.     opaque: false,  
  7.     bgColor: 'rgba(0,0,0,0)',  
  8.     vScrollBarEnabled:true,  
  9.     hScrollBarEnabled:true,  
  10.     animation: {  
  11.         type: 'flip',  
  12.         subType: 'from_bottom',  
  13.         duration: 500  
  14.     }  
  15. });  


parseTapmode解析元素tapmode属性，优化点击事件处理
api.parseTapmode();
readFile读取文本文件：

 

[javascript] view plain copy

  1. api.readFile({  
  2.     path:'fs://a.txt'  
  3. }, function(ret, err){  
  4.     if(ret.status){  
  5.         api.alert({msg:ret.data});//data<span style="color: rgb(147, 161, 161); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18.571428298950195px; white-space: pre-wrap; background-color: rgb(238, 238, 238);">文件内容</span>  
  6.     } else{  
  7.         api.alert({  
  8.             msg: '错误码: '+err.code+'错误信息'+err.msg<span style="color: rgb(42, 161, 152); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18.571428298950195px; white-space: pre-wrap; background-color: rgb(238, 238, 238);">//</span><span style="font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif;">msg:</span><span style="color: rgb(42, 161, 152); font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18.571428298950195px; white-space: pre-wrap; background-color: rgb(238, 238, 238);">错误描述</span>  
  9.         });  
  10.     }  
  11. });  

refreshHeaderLoadDone通知顶部刷新数据加载完毕

 

[javascript] view plain copy

  1. api.refreshHeaderLoadDone();  

removeEventListener删除事件:

 

[javascript] view plain copy

  1. api.removeEventListener({  
  2.     name: 'online'  
  3. });  


sendFrameToBack调整子窗口到后面:

 

[javascript] view plain copy

  1. api.sendFrameToBack ({//调整page1到page2的后面即将page2放在最page1上  
  2.     from: 'page1',  
  3.     to: 'page2'//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">窗口名字，指定时调整窗口到此窗口后面，否则调整到最后面</span>  
  4. });  

setFrameAttr设置子窗口属性：

 

[javascript] view plain copy

  1. api.setFrameAttr({  
  2.     name: 'page2',  
  3.     rect:{  
  4.         x:0,  
  5.         y:0,  
  6.         w:320,  
  7.         h:480  
  8.     },  
  9.     bounces: true,  
  10.     opaque: true,  
  11.     bgColor: '#fff',  
  12.     vScrollBarEnabled:true,  
  13.     hScrollBarEnabled:true  
  14. });  


setFrameGroupAttr设置窗口组属性：

 

[javascript] view plain copy

  1. api.setFrameGroupAttr({  
  2.     name: 'group1',  
  3.     hidden:true  
  4. });  


setFrameGroupIndex设置窗口组当前可见子窗口：

 

[javascript] view plain copy

  1. api.setFrameGroupIndex ({  
  2.     name: 'group1',  
  3.     index:2,//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">子窗口索引</span>  
  4.     scroll:true//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">是否平滑滚动至目标窗口</span>  
  5. });  

setFullScreen设置是否全屏：

 

[javascript] view plain copy

  1. api.setFullScreen({fullScreen:true});  

setRefreshHeaderInfo显示顶部刷新：

 

[javascript] view plain copy

  1. api.setRefreshHeaderInfo({  
  2.     visible: true,  
  3.     loadingImg: 'widget://image/refresh.png',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">刷新图片地址</span>  
  4.     bgColor: '#ccc',  
  5.     textColor: '#fff',  
  6.     textDown: '下拉刷新...',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">下拉文字描述</span>  
  7.     textUp: '松开刷新...',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">松开时文字描述</span>  
  8.     showTime: true//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">是否显示更新时间</span>  
  9. }, function(ret, err){  
  10.   
  11. });  

showFloatBox展示一个悬浮框，浮动在屏幕上，点击时关闭当前widget：

 

[javascript] view plain copy

  1. api.showFloatBox ({  
  2.     iconPath: 'widget://image/icon.png',//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">展示在悬浮框中的图片地址</span>  
  3.     duration: 3000//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">自动消隐时长。在该时长内不发生触摸悬浮框行为，悬浮框自动消隐至半透状态</span>  
  4. });  

showProgress显示进度提示框：

 

[javascript] view plain copy

  1. api.showProgress({  
  2.     style: 'default',  
  3.     animationType: 'fade',  
  4.     title: '努力加载中...',  
  5.     text: '先喝杯茶...',  
  6.     modal: false//<span style="color: rgb(128, 128, 128); font-family: ff-tisa-web-pro-1, ff-tisa-web-pro-2, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'WenQuanYi Micro Hei', sans-serif; font-size: 14px; line-height: 20px;">是否模态</span>  
  7. });  

writeFile写入文件：

 

[javascript] view plain copy

  1. api.writeFile({  
  2.     path: 'fs://a.txt',  
  3.     data: 'writeFile测试内容'  
  4. }, function(ret, err){  
  5.     var status = ret.status;  
  6.     if(status){  
  7.         api.alert({msg:'写入文件成功'});  
  8.     } else{  
  9.         api.alert({msg:err.msg});  
  10.     }  
  11. });  

removeLaunchView移除启动图。若config.xml里面配置autoLaunch为false，则启动图不会自动消失，直到调用此方法移除。

 

[javascript] view plain copy

 

  1. api.removeLaunchView();  
APICloud 可视化编程 - 拖拉拽实现专业级源码
weixin_43947457的博客
08-29 1650
开发者可以通过拖拽搭建积⽊的⽅式，所⻅即所得的快速构建生成应用静态页面，编辑器中集成了丰富的组件，可以满足移动应用市场上大部分的需求，并支持同步实时的⽣成 AVM 跨端代码，节省开发者⼤量的页面构建时间，让开发者能够更加专注于应⽤业务逻辑的开发。...
Apicloud——关于页面刷新
weixin_30781433的博客
01-04 1681
项目中有很多需要刷新页面的情况，以达到更新数据的目的； 官方文档中有reload,但是很多时候并不好用； 整理另一种方法： 整体思路是重新加载页面方法，达到刷新 适用于同页面和多个页面之间 举例子： 现在A页面提交数据，相关数据需要在B页面显示，返回页面时（A->B），数据会不更新。 在A页面相关事件处（如点击事件里）写入： 1 api.sendEvent({ ...
APICloud AVM框架 封装数据表格组件
白鱼赤乌的博客
06-27 369
用以展示基础表格数据的组件。组件的核心功能点是在数据展示的时候，用到了2个v-for循环，第一层循环是数据对象的循环，然后嵌套列名的对象，通过列名中的key值在数据对象中查询对应的数据，这样就保证了在数据对象与列名对象顺序打乱的情况下也可以把数据对应起来，并能够在列名没有对应的数据的时候进行特殊处理。.........
APICloud AVM框架 封装通讯录组件
白鱼赤乌的博客
04-19 2540
由于很多项目中都会用到通讯录，所有就封装了一个通讯录的组件，实现了可通过字母检索，拨打电话功能。 用的技术点是scroll-view中的scrollTo方法。 向组件中传值和监听子组件事件，具体使用请参考官方文档。 数据格式 [{ "zkey": "A", "children": [{ "name": "安强", "phone": "18853889099", "zkey": "A" }] }, { "zkey": "B", "children": [{ "na.
APiCloud商城H5页面开发实战
最新发布
weixin_35750483的博客
06-05 816
APiCloud是一个革命性的移动应用开发平台，旨在简化移动应用开发过程并降低开发门槛。它允许开发者使用HTML5、JavaScript和CSS等前端技术构建跨平台的移动应用。HTML5作为第五代超文本标记语言，是在2014年10月由W3C组织推荐为标准。其发展历程是长期而复杂的，经历了从HTML 4.01到XHTML再到HTML5的一个演进过程。HTML5的出现，不仅提供了新的元素和API，也极大地简化了网页的标记。
APICloud AVM框架 封装树形分类选择组件 组件递归调用
白鱼赤乌的博客
05-26 515
APICloud AVM框架 封装树形分类选择组件 组件递归调用
APICloud实战案例：如何封装AVM组件？（以声网组件为例）
cuicuiniu521的博客
11-07 249
AVM.js(Application-View-Model)是一个移动优先的高性能跨端JavaScript框架，支持一次编写多端渲染。它提供更趋近于原生的编程体验，通过简洁的模型来分离应用的用户界面、业务逻辑和数据模型，适合高度定制的应用开发。 AVM前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架AVM.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相
apicloud 项目常用插件
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
08-30 2036
低代码开发平台快速开发企业级应用程序。 以跨平台开发技术、定制服务、行业数据库、低代码工具、全面赋能生态之力。 apicloud 有一个不足之处就是自身的UI类 H5组件匮乏。原生UI组件可修改的可能几乎没有，所以使用原生UI组件的可能性几乎没有。 本篇文章收集整理一下 apicloud 项目实用的插件（框架）有那些： 名称 类型 说明 链接地址 Vue.js ...
mComponents:只作为apiCloud开发组件包使用
03-31
**mComponents：APICloud开发组件包详解** APICloud是一款强大的移动应用开发平台，它允许开发者通过JavaScript编写前端代码，同时结合HTML5和原生SDK，实现跨平台的应用开发。mComponents是APICloud专为开发者设计...
apicloud模块权限.zip
09-10
7. **feature**：这个文件夹可能包含应用的特定功能模块代码，每个模块对应APICloud中的一个功能组件。 8. **launch**：启动配置文件，通常包含了应用启动时的初始设置，如加载的首页等。 9. **html**：可能包含了...
apicloud制作的APP
03-13
综上所述，使用APICloud制作“商城的APP”涵盖的知识点包括：JavaScript编程、APICloud组件使用、用户界面设计、数据管理、网络通信、性能优化以及发布与更新策略。熟练掌握这些技能，开发者就能构建出高效、功能...
APICloud项目中使用官方模块`UICustomPicker`实现二级滚动选择器
小王几pl
04-02 234
实现步骤一. 将模块添加到项目二. 查看文档三. 使用 一. 将模块添加到项目 在APICloud官网登录 并点自己的名字点随便一个就能进去(别点退出) 上方tab栏的 模块Store 在里面搜索 UICustomPicker (点那个免费的) 进去之后点 立即使用 会出一个弹框就能选择添加到那个项目中(这是个官方的模块 不用下载到项目中,直接在项目中调用就可) 二. 查看文档 点击 立即使用 上方的 查看模块文档 在文档里面 就能看到模块的配置是使用方法了 在里面还会有一些例子 复制文档
APICloud可视化开发初体验，这就是APP低代码开发的最终形态？
cuicuiniu521的博客
06-14 361
作为一名APICloud 老用户，最近看到APICloud Studio 3新增了可视化编辑工具，第一时间体验了下。总体感觉还行，有以下三大优点：1、新增了模板页面，新建stml文件时可以选择。2、通过组件拖拽出的页面可实时生成对应的前端代码，而且是没有冗余的代码，可直接使用，或进行再优化开发。因此如果产品通过这个工具来设计原型，生成的代码，可提供给开发直接使用。对于技术小白，又想快速做出自己的app，也可以使用此工具做为入门工具。3、新增了API管理工具，可以调试接口，生成请求代码文件。...
如何在 APICloud 中使用 Vue.js 及 Vant 组件库进行开发
GeekAaron的博客
10-21 3274
如何在APICloud项目中使用Vue.js组件化开发 目录 一、基本思路 二、初始化项目 三、配置Webpack 四、配置Vant 五、测试编译 六、更多优化 在上一篇文章中，我建议大家根据APICloud官方使用原生JS开发的建议，在不影响项目结构和性能的情况下，将Vue.js以script引用的方式直接作用于页面上，使用最基本的vue.js逻辑来做全局或者局部的页面渲染。 虽然直接通过s...
apicloud 常用方法记录
qq_18932003的博客
07-12 921
apicloud
【APICloud】通过APICloud Studio 2使用bMap模块，定位当前位置
随便写写
04-23 2671
APIcould新建模板项目，并引用bMap模块定位 首先，我使用的是APICloud Studio 2，就是目前为止（2019.04.23）开发工具的第一个 [上面的那个软件的下载地址]https://www.apicloud.com/devtools 打开后是需要登录的，正常申请账号就好了，免费的不需要破解。 新建一个项目 这个是我在网上新建，然后在导到电脑上的， 首先是新建一个项目，网址如...
【APIcould】连接手机设备运行调试
BlizzardWu的博客
07-10 1179
1、安装必要的软件 APICloud SDK是APICloud提供的完整的开发环境。包含APICloud Studio、Sublime APICloud Plugins、WebStorm APICloud Plugins、AppLoader、FrameWork、Document等。 下载地址：https://docs.apicloud.com/Download/download APICloud Studio 是在电脑上面安装的， AppLoader 就是在手机端安装的软件 下载的压缩包里面有安卓和iO
APICloud自定义组件小白开发教程-studio3
少昊的博客
11-03 1346
APICloud自定义组件小白开发教程-studio3
apicloud的使用
aogouqian7476的博客
11-29 409
APICloud官方文档地址：https://docs.apicloud.com/APICloud/creating-first-app ——————安装studio和AppLoader—————— 1、直接安装apicloud studio2（不要搞什么sublime的插件了，太麻烦。） 2、安装jdk，百度搜索jdk（java开发运行环境），并下载和安装。 3、手机安装...
Apicloud AppLoader开发工具使用详解
AppLoader是Apicloud开发环境中一个重要的组件。在使用Apicloud平台进行应用开发时，开发者可能需要在多种设备和iOS系统版本上测试应用。传统的测试方法可能需要开发者通过Xcode等工具进行部署，但这样需要较复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值