APICloud开发记录【持续】
文章目录
1、开发要求
Web Storm 2018.1
2、创建项目
2.1 WebStorm插件操作
- 基本插件安装:https://docs.apicloud.com/Dev-Tools/webStorm-apicloud-plugin
- WebStorm Wifi真机同步和Wifi真机预览:https://docs.apicloud.com/Dev-Tools/webStorm-wifi-sync
(1) 除了IOS一块,其余均建议阅读并操作
(2) 将webStorm-APICloud加入到项目中
(3) 安装好需要的插件
2.2 网页创建
- https://www.apicloud.com 官网注册账号
- https://www.apicloud.com/console 点击【创建应用】
具体创建应用操作步骤:https://docs.apicloud.com/APICloud/creating-first-app
2.3 下载代码
(1) 采用SVN下载代码,然后导入到Web Storm
(2) 采用Subversion
2.4 App创建以及测试
(1) 新建一个底部导航应用
(2) 启动Wifi真机测试
- 开启服务
- 手机输入ip以及端口,点击连接;然后在Web Storm中右键项目,点击【Wifi真机同步】
3、Api的方法
具体API:https://docs.apicloud.com/Client-API/
API.js文档:https://docs.apicloud.com/Front-end-Framework/framework-dev-guide#37
3.1 监听返回键
api.addEventListener({
name: 'keyback'
}, function (ret, err) {
api.confirm({
title: '提示',
msg: "确认退出应用?",
buttons: ['确定', '取消']
}, function (ret, err) {
var index = ret.buttonIndex;
if (index == 1) {
api.closeWin();
}
return;
});
});
3.2 拨打电话
api.call({
type: 'tel', // 直接拨打,无任何提示
number: '10086' // 电话号码
});
参数说明:https://docs.apicloud.com/Client-API/api#7
3.3 跨页面执行js脚本
execScript:在指定 window 或者 frame 中执行脚本,对于 frameGroup 里面的 frame 也有效,若 name 和 frameName 都未指定,则在当前 window 中执行脚本,具体执行逻辑见补充说明。
execScript({params})
4、config.xml文件说明
<?xml version="1.0" encoding="UTF-8"?><widget id="A6080528176396" version="0.0.1">
<name>demo1_nav</name> <!--app的名称-->
<description>
Example For APICloud.
</description>
<author email="developer@apicloud.com" href="http://www.apicloud.com">
Developer
</author>
<content src="grid.html"/> <!--默认app进入的主页地址-->
<preference name="appBackground" value="rgba(0,0,0,0)"/>
<preference name="windowBackground" value="rgba(0,0,0,0)"/>
<preference name="frameBackgroundColor" value="rgba(0,0,0,0)"/>
<preference name="autoLaunch" value="true"/>
<preference name="autoUpdate" value="true"/>
<preference name="smartUpdate" value="false"/>
<preference name="debug" value="false"/>
<preference name="statusBarAppearance" value="true"/>
<permission name="location"/>
<permission name="internet"/>
<access origin="*"/>
</widget>
5、 WeiUI集成
5.1 将样式以及JS加入到项目中
- 下载zip,将build中的weui.css样式文件加入到项目中的css文件夹中
https://github.com/lihongxun945/jquery-weui/releases
5.2 weiUI官网
- 在WeiUi官网查看对应组件的样式,并移植到页面中
6、上拉刷新
如果页面条目过多,需要进行分页显示,用户上滑数据加载下一页数据,具体实现如下:
6.1 父页面[只有header]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo-header</title>
<!--标准mui.css-->
<link rel="stylesheet" href="../../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
<link rel="stylesheet" type="text/css" href="../../css/my.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="topbar">
<a class=" mui-icon mui-icon-left-nav mui-pull-left" href="#" onclick="goBeforePage()"></a>
<h1 class="mui-title" id="title">示例</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron" id="showResult">
</ul>
</div>
<script src="../../js/mui.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../js/request.js"></script>
<script type="text/javascript" src="../../js/dot.min.js"></script>
<script type="text/javascript" src="../../js/toastUtils.js"></script>
<script type="text/javascript" src="../../js/error.js"></script>
<script type="text/javascript">
apiready = function () {
var header = $api.byId('topbar');
//适配iOS7+,Android4.4+状态栏沉浸式效果,详见config文档statusBarAppearance字段
// $api.fixStatusBar(header);
//动态计算header的高度,因iOS7+和Android4.4+上支持沉浸式效果,
//因此header的实际高度可能为css样式中声明的44px加上设备状态栏高度
//其中,IOS状态栏高度为20px,Android为25px
var headerH = $api.offset(header).h;
//frame的高度为当前window高度减去header和footer的高度
var frameH = api.winHeight - headerH;
api.openFrame({
name: 'detection-search-result-list',
url: './detection-search-result-list.html',
rect: {
x: 0,
y: headerH,
w: api.winWidth,
h: frameH
},
pageParam: {
itemsId: api.pageParam.itemsName,
itemsId: api.pageParam.itemsId
},
bounces: true,
bgColor: 'rgba(0,0,0,0)',
vScrollBarEnabled: true,
hScrollBarEnabled: true
});
$api.dom('#title').innerHTML = api.pageParam.itemsName;
};
// 返回上一个页面
function goBeforePage() {
api.closeWin();
}
</script>
</body>
</html>
6.2 子页面[list页面]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>检测-检测记录</title>
<!--标准mui.css-->
<link rel="stylesheet" href="../../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
<li