目录：
1、apicloud新手总结
2、apicloud同原生app与h5的数据交互
3、apicloud七牛云视频上传并截取第一帧js实现
apicloud集成SuperWebview SDK同原生APP数据交互
apicloud项目云编译生成SuperWebview SDK，将生成的文件嵌入到原生app项目中（不要忘记代码粘进去）
（1）api项目接收原生app的传值
// APP对接事件
function appLoginSendToH5() {
api.accessNative({
name:'appLoginSendToH5' //事件名，自定义，但需要和原生app上统一
});
}
///// apiready 一打开就执行的 函数:APP对接事件
api.addEventListener({
name:'appLoginSendToH5'
}, function(ret, err) {
if(ret) {
//监听事件，在这里进行数据交互值得处理或者页面判断等
//如用户名和密码
huser = ret.value.username;
hpasswd = ret.value.password;
}else {
}
});
（2）api项目向原生app发送事件
在win头部添加返回箭头，点击跳出该SDK返回原生app页面
<header class="aui-navBar aui-navBar-fixed">
<a class="aui-navBar-item-db" style="position: absolute;" tapmode onclick="api.sendEvent({name:'h5BackToApp',extra:{}})">
<i class="icon icon-back"></i>
</a>
<div class="aui-center">
<span class="aui-center-title">title</span>
</div>
</header>
-
这里得方法是我用到的，更多交互方法请进apicloud官方文档:https://docs.apicloud.com/或培训课教程学习查看。
apicloud内嵌浏览器页面与数据交互
比如下图，页面中嵌套了一个浏览器H5页面，上面的title是播放视频的对应标题，点击下方其它的视频，title会根据视频的标题进行改变。
QQ图片20190702155609.jpg
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>视频播放</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style type="text/css">
#wrap .personal {
width: 100%;
background-image: url(../image/mine/img_rwlb_dhl.png);
background-size: 100% 100%;
position: relative;
}
.aui-bar-nav .aui-btn .aui-iconfont {
color: white;
}
.aui-bar-nav .aui-title {
color: white;
}
</style>
</head>
<body>
<div id="wrap">
<!-- 头部 -->
<header id="aui-header" class="aui-bar aui-bar-nav personal">
<a class="aui-pull-left aui-btn" tapmode @click="api.closeWin()">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">{{title}}</div>
</header>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#wrap",
data: {
title: '',
},
methods: {
}
});
apiready = function() {
// 接受从index.html页面传过来的参数
vm.title = api.pageParam.title; //从另一个页面传过来的title值，不阻碍本页面的点击
$api.fixIos7Bar($api.dom("header"));
api.parseTapmode();
api.openFrame({
name: "play",
url: api.pageParam.url, //视频源url地址
progress:{
type:"page",
color:"#6dd26d"
},
rect: {
x: 0,
y: $api.dom("header").offsetHeight,
w: "auto",
h: "auto",
}
});
api.setFrameClient({
frameName: "play"
}, function(ret, err) {
switch (ret.state) {
case 0:
break;
case 1:
break;
case 2:
break;
case 3:
vm.title = ret.title;
break;
case 4:
break;
default:
break;
}
});
};
</script>
</html>
setFrameClient方法文档：https://docs.apicloud.com/Client-API/api#93
网友评论