apicloud 常用方法记录

最近在写apicloud的项目，最后生成一个app，现在就apicloud进行基础操作汇总：

1.index.html入口页面的处理
var user_info = $api.getStorage('user_info');
if(user_info != null && user_info != 'undefined'){
var token = user_info.AccessToken;
if(token != null && token != 'undefined'){
api.openWin({
name: 'main',
url: 'widget://html/main.html',
reload: true,
bounces: false,
scrollToTop: false,
slidBackEnabled:false,
});
}
}else{
api.openWin({
name: 'login',
url: 'widget://html/login.html'
});
}

在入口页面，判断是否有登录信息，也就是：user_info的本地缓存信息，如果有，则跳过登录进入到main.html主页面，否则的话，跳转到login.html登录页面。

2.api.openWin()打开某一个页面
api.openWin({
   name:'xxx',//页面名称
   url:'xxxx',//页面地址
   reload:true,//如果是true，则表示页面重载，重新渲染，先调用api.ready()，否则页面不会执行api.ready()中的方法
   bounces:false,//打开页面是否有弹动效果
   scrollToTop:false,//打卡此页面时，是否滚动到页面的顶部
   slidBackEnabled:false,//是否支持滑动返回。iOS7.0及以上系统中，在新打开的页面中向右滑动，可以返回到上一个页面，该字段只iOS有效
})

还有其他的参数，比如:pageParam,是个对象，可以传递参数到新的页面，新打开的页面可以通过api.pageParam来获取传递的参数，进而进行页面的渲染或者接口请求等操作。

3.api.ready()的初始化方法必须是api.openWin或者api.openFrame()打开的页面才生效
4.api.close()关闭当前页面
api.close()适用于通过api.openWin()打开的页面，如果不传递参数，默认为关闭当前页面，如果传递了参数，比如name，则关闭指定name的页面

5. 退出app，即退回到login.html登录页面
我通过上面的api.close({name:'login'}),并没有生效，此时，我可以通过两种方法来实现：

第一种方法：
也就是上图中的最后一种方法，超级简单，就是直接打开想要跳转的页面，将reload参数设置为true,则此页面就会重载，重新加载页面数据。

第二种方法：
execScript的方法也是可以实现的：

在当前页面书写一个变量：
var jsfun = "函数名(函数传参)"

api.execScript({
name:'login',
script:jsfun
})

6.openFrame与closeFrame打开弹层方法
//打开设置的frame页面
api.openFrame({
name: 'page2',
url: './page2.html',
rect: {
x: 0,
y: 0,
w: 'auto',
h: 'auto'
},
pageParam: {
name: 'test'
}
});
//关闭frame页面
api.closeFrame({
name: 'page2'
});

7.api.ajax请求接口
// 表单方式提交数据或文件
api.ajax({
url: 'http://192.168.1.101:3101/upLoad',
method: 'post',
data: {
values: {
name: 'haha'
},
files: {
file: 'fs://a.gif'
}
}
}, function(ret, err) {
if (ret) {
api.alert({ msg: JSON.stringify(ret) });
} else {
api.alert({ msg: JSON.stringify(err) });
}
});

// 提交JSON数据
api.ajax({
url: 'http://192.168.1.101:3101/upLoad',
method: 'post',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
data: {
body: {
name: 'haha'
}
}
}, function(ret, err) {
if (ret) {
api.alert({ msg: JSON.stringify(ret) });
} else {
api.alert({ msg: JSON.stringify(err) });
}
});

注意上面设置请求头的部分：直接写headers对象，默认提交的是表单数据，如果要提交json数据，则需要修改Content-Type:'application/json;charset-8',传递参数的形式也从data.values改为data.body。

8.使用$.ajax请求接口数据
$.ajax({
url: "xxxxxxxx",
type: 'put',
beforeSend: (request) => {
request.setRequestHeader("Authorization", this.userInfo.AccessToken)
},
xhrFields: {
withCredentials: true
},
success: res => {
if (res.success) {
api.alert({ msg: JSON.stringify(ret) });
} else {
console.log('数据请求失败');
}
},
complete: () => {
}
})

使用$.ajax则需要提前引入jquery.js才可以
而且如果要设置请求头，则需要添加beforeSend的方法，书写方式如上面代码：

beforeSend: (request) => {
request.setRequestHeader("Authorization", this.userInfo.AccessToken)
},
xhrFields: {
withCredentials: true
},

9.下载文件api.download
api.download({
url: url,
savePath: 'fs://test.rar',
report: true,
cache: true,
allowResume: true
}, function(ret, err) {
if (ret.state == 1) {
//下载成功
} else {

}
});

10.addEventListener 监听事件
//如监听网络连接事件
api.addEventListener({
name: 'online'
}, function(ret, err) {
alert('已连接网络');
});
//页面触底监听加载更多
api.addEventListener({
name:'scrolltobottom',
extra:{
threshold:0 //设置距离底部多少距离时触发，默认值为0，数字类型
}
}, function(ret, err){
alert('已滚动到底部');
});
//下拉刷新
api.setRefreshHeaderInfo({
loadingImg: 'widget://image/refresh.png',
bgColor: '#ccc',
textColor: '#fff',
textDown: '下拉刷新...',
textUp: '松开刷新...'
}, function(ret, err) {
//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态

});
//停止刷新
api.refreshHeaderLoadDone();
//监听安卓手机自带的返回键
api.addEventListener({
name: 'keyback'
}, function(ret, err) {
alert('按了返回键');
});
//监听程序切到后台
api.addEventListener({
name:'pause'
}, function(ret, err){
alert('应用进入后台');
});
//监听摇一摇
api.addEventListener({
name:'shake'
}, function(ret, err){
alert('触发了摇一摇事件');
});
//监听苹果手机截屏事件
api.addEventListener({
name:'takescreenshot'
}, function(ret, err){
alert('用户截屏了');
});
//状态栏通知被用户点击后的回调，字符串类型。
api.addEventListener({
name:'noticeclicked'
},function(ret,err){
alert(ret.value);
});

//移除监听
api.removeEventListener({
name: 'online'
});
//发送监听
api.sendEvent({
name: 'myEvent',
extra: {
key1: 'value1',
key2: 'value2'
}
});

//html页面a：
api.addEventListener({
name: 'myEvent'
}, function(ret, err) {
alert(JSON.stringify(ret.value));
});

//html页面b：
api.addEventListener({
name: 'myEvent'
}, function(ret, err) {
alert(JSON.stringify(ret.value));
});

//a、b页面都将收到 myEvent 事件

11.状态栏通知消息notification
//仅震动
api.notification({
vibrate:[100, 500, 200, 500, 300, 500, 400, 500]
});

//仅提示音
api.notification({
sound:'default'
});

//提示音+震动
api.notification();

//弹出状态栏通知
api.notification({
notify: {
title: '通知标题',
content: '通知内容'
}
});

//闹铃
api.notification({
notify: {
content: '闹钟'
},
//每周一、二、三、四、五的7点30分闹铃
alarm: {
hour: 7,
minutes: 30,
daysOfWeek: [2, 3, 4, 5, 6]
}
}, function(ret, err) {
var id = ret.id;
});
//取消通知
api.cancelNotification({
id: 1
});

12.获取定位getLocation
api.getLocation(function(ret, err) {
if (ret && ret.status) {
//获取位置信息成功
} else {
alert(JSON.stringify(err));
}
});

13.快捷通讯call({params})、sms({params}, callback(ret, err))、mail({params}, callback(ret, err))、openContacts(callback(ret, err))
//拨打电话或进行faceTime
api.call({
type: 'tel_prompt',
number: '10086'
});
//调起手机自带短信
api.sms({
numbers: ['10086'],
text: '测试短信'
}, function(ret, err) {
if (ret && ret.status) {
//已发送
} else {
//发送失败
}
});
//调起邮箱
api.mail({
recipients: ['test@163.com'],
subject: '邮件测试',
body: '这是一封测试用的邮件',
attachments: ['fs://test.jpg']
}, function(ret, err) {
if (ret && ret.status) {
//已发送
} else {

}
});
//打开手机通讯录
api.openContacts(function(ret, err) {
if (ret && ret.status) {
var name = ret.name;
var phone = ret.phone;
} else {

}
});

14.设置屏幕setFullScreen、setScreenOrientation
//设置是否全屏
api.setFullScreen({
fullScreen: true
});
//设置屏幕方向
api.setScreenOrientation({
orientation: 'landscape_left'
});
//设置是否禁止屏幕休眠
api.setKeepScreenOn({
keepOn: true
});

15.设置app右上角数字setAppIconBadge
api.setAppIconBadge({
badge: 1
});

16.设置权限hasPermission
//对于敏感权限，如获取手机ID | IMEI，访问相册存储，定位，录音，拍照，录像等，需要在APP运行过程中动态向用户申请，用户同意后方可使用相应的功能。
var resultList = api.hasPermission({
list:['camera','contacts']
});
api.alert({
msg:JSON.stringify(resultList)
});
//向系统请求某个或多个权限。
api.requestPermission({
list:['camera','contacts'],
code:1
}, function(ret, err){
api.alert({
msg:JSON.stringify(ret)
});
});

17.底部弹框actionSheet
api.actionSheet({
title: '底部弹出框测试',
cancelTitle: '这里是取消按钮',
destructiveTitle: '红色警告按钮',
buttons: ['1', '2', '3']
}, function(ret, err) {
var index = ret.buttonIndex;
});

18.加载动画显示进度提示框showProgress({params})、toast提示框
api.showProgress({
title: '努力加载中...',
text: '先喝杯茶...',
modal: false
});
//隐藏进度提示框
api.hideProgress();
//提示框
api.toast({
msg: '网络错误',
duration: 2000,
location: 'bottom'
});

19.打开时间选择器openPicker({params}, callback(ret, err))
api.openPicker({
type: 'date_time',
date: '2014-05-01 12:30',
title: '选择时间'
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});

20.获取手机本地图片视频（图库）、打开相机getPicture({params}, callback(ret, err))，保存图片和视频到系统相册saveMediaToAlbum({params}, callback(ret, err))
api.getPicture({
sourceType: 'camera',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
allowEdit: true,
quality: 50,
targetWidth: 100,
targetHeight: 100,
saveToPhotoAlbum: false
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
//保存图片和视频
api.saveMediaToAlbum({
path: 'fs://1.png'
}, function(ret, err) {
if (ret && ret.status) {
alert('保存成功');
} else {
alert('保存失败');
}
});

21.htmltoImage将html页面转化为图片
//webToImage 将页面转为图片
var webToImage = api.require('webToImage');
webToImage.transImage({
save: {
path: 'fs://webToImage',
name: 'currentWebviewImage'
}
}, function(ret){
alert(JSON.stringify(ret));
});
//htmltoImage 将html页面内容转图片
//使用 trans 模块将生成的图片保存到系统相册

htmltoImage.init({
'el': document.getElementById('main'),
'isImageObject': true,
}, function(res, err){
if(res) {
alert(JSON.stringify(res));
var base64Str1 = htmltoImage.cutprefixBase64(res.base64str);
var trans = api.require('trans');
trans.saveImage({
base64Str: base64Str1,
album: true,
imgName: new Date().getTime() + ".png"
}, function(ret, err) {
if (ret.status) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
} else {
alert(JSON.stringify(err));
}
}

22.FNScanner扫描二维码/生成二维码
//FNScanner 扫描二维码/生成二维码
var FNScanner = api.require('FNScanner');
FNScanner.open({
autorotation: true
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});

23.百度地图bMap
//bMap 地图（百度地图） https://docs.apicloud.com/Client-API/Open-SDK/bMap
var map = api.require('bMap');
map.open({
rect: {
x: 0,
y: 0,
w: 320,
h: 300
},
center: {
lon: 116.4021310000,
lat: 39.9994480000
},
zoomLevel: 10,
showUserLocation: true,
fixedOn: api.frameName,
fixed: true
}, function(ret) {
if (ret.status) {
alert('地图打开成功');
}
});

24.wxPlus 使用微信功能服务分享给好友、朋友圈
//wxPlus 使用微信功能服务分享给好友、朋友圈
var wxPlus = api.require('wxPlus');
wxPlus.shareWebpage({
apiKey: '',
scene: 'timeline',
title: '测试标题',
description: '分享内容的描述',
thumb: 'widget://a.jpg',
contentUrl: 'http://apicloud.com'
}, function(ret, err) {
if (ret.status) {
alert('分享成功');
} else {
alert(err.code);
}
});

附录大神的汇总文档：apicloud的常用操作：https://www.liangzl.com/get-article-detail-202985.html
————————————————
版权声明：本文为CSDN博主「yehaocheng520」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yehaocheng520/article/details/121967278

apicloud 常用方法记录相关推荐

apicloud常用方法总结
apicloud常用方法总结获取设备编号.打开/关闭新页面.设置状态栏样式.ajax封装.获取上一页参数.退出APP...... /* =============================== ...
APICloud开发记录手册
APICloud开发记录[持续] 文章目录 APICloud开发记录[持续] 1.开发要求 2.创建项目 2.1 WebStorm插件操作 2.2 网页创建 2.3 下载代码 2.4 App创建以及测 ...
数组的一些常用方法记录
栗子: var arr = [ 1, 2, 3 ]; 1. concat(); var arr2= arr.concat("4", "5", "6&q ...
String类常用方法记录
String类常用方法练习 package cn.zixi;import java.nio.charset.StandardCharsets; import java.util.Arrays; imp ...
Paint 常用方法记录 +
Paint 方法记录 + 文字设置字体风格(黑体.斜体....) 字体大小对齐方式设置粗体 LCD X轴拉伸缩放比例斜体下划线删除线隐藏模式字符间距线性文本地理位置倾斜角度添加 ...
APICloud使用记录——创建项目
APICloud创建项目分为两种:APICloud云端创建和APICloud Studio创建 APICloud云端创建 1.打开APICloud官网http://www.apicloud.com/c ...
『Numpy』常用方法记录
numpy教程防止输出省略号 import numpy as np np.set_printoptions(threshold=np.inf) 广播机制 numpy计算函数返回默认是一维行向量: i ...
YII CDbCriteria 的一些常用方法记录
$criteria = new CDbCriteria; $criteria->addCondition("id=1"); //查询条件,即where id = 1 $cri ...
apache commons - lang 常用方法记录
为什么80%的码农都做不了架构师?>>> Lang 中工具类比较多,这里介绍几个主要的: ClassUtils: getShortClassName,这个函数应该在 java ...

apicloud 常用方法记录

apicloud 常用方法记录相关推荐

最新文章

热门文章