APICloud内置了一个APICloud 前端框架给我们操作APP页面和展示数据,也提供了ajax跨域请求数据功能。
它本质上就是一个仿照jQuery编写的一个小工具库,所以并不好用。
框架地址:https://docs.apicloud.com/Front-end-Framework/framework-dev-guide
目录结构
APP/
|- index.html # 默认app配置的入口页面
|- config.xml # APP系统配置文件
|- html/ # APP页面存储目录
|- css/ # 样式目录
|- script/ # js脚本目录
|- image/ # 图片目录
配置文件
<widget id="A6043953355883" version="0.0.1">
<name>APP名称,展示给客户端手机里面的</name>
<!-- -->
<description>
APP的描述信息,将来app上架以后,会需要填写
</description>
<author email="作者邮箱" href="官网地址">
APP作者名字
</author>
<!-- APP启动以后看到的首页,使用相对路径 -->
<content src="index.html" />
<!-- 设置APP的所有页面是否能跨域访问到本地或者远程服务器,*表示没有任何限制,local表示本地,如果是远程服务器,则需要编写完整的地址,例如:http://www.baidu.com/ -->
<access origin="*" />
<preference name="pageBounce" value="false"/>
<!-- APP背景颜色 -->
<preference name="appBackground" value="rgba(0,0,0,0.0)"/>
<!-- 配置Window默认背景 -->
<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
<!-- 配置Frame默认背景 -->
<preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>
<!-- 配置页面默认是否显示滚动条 -->
<preference name="hScrollBarEnabled" value="false"/>
<!-- 配置页面默认是否显示滚动条 -->
<preference name="vScrollBarEnabled" value="false"/>
<!-- 配置启动页是否自动隐藏 -->
<preference name="autoLaunch" value="true"/>
<!-- 配置应用是否全屏运行 -->
<preference name="fullScreen" value="false"/>
<!-- 配置应用是否自动检测更新 -->
<preference name="autoUpdate" value="true" />
<!--配置应用是否支持增量更新、云修复 -->
<preference name="smartUpdate" value="false" />
<!-- 配置应用开启/关闭调试模式 -->
<preference name="debug" value="true"/>
<!-- IOS全屏配置 -->
<preference name="statusBarAppearance" value="true"/>
<permission name="readPhoneState" />
<permission name="camera" />
<permission name="record" />
<permission name="location" />
<permission name="fileSystem" />
<permission name="internet" />
<permission name="bootCompleted" />
<permission name="hardware" />
</widget>
调用框架
<script src="./script/api.js"></script>
APICloud 前端框架中提供的40多个操作方法,主要分6类用途:
数据操作:
trim() trimAll() isArray() jsonToStr() strToJson() get()
post()
事件操作:
addEvt() rmEvt()
元素查找:
one() dom() domAll() byId() first() last() eq() not() prev() next() contains() closest()
DOM操作:
remove() attr() removeAttr() hasCls() addCls() removeCls() toggleCls() val() prepend() append() before() after()
html() text() offset() css() cssVal()
本地存储:
setStorage() getStorage() rmStorage() clearStorage()
系统兼容:
fixIos7Bar() fixStatusBar()
所有的APICloud前端框架的代码都必须在其入口函数中执行,并且通过$api
来进行调用。
入口函数
// 要调用上面的40个方法,必须在apiready里面编写,在外面是没有$api对象的.
apiready = function(){
// js代码
}
api与$api对象
注意:在APICloud中存在2个全局对象,分别是$api和api对象。这两个对象是不同的。
其中api对象主要是由APP系统提供给我们开发者操作和读取设备信息的。
而
$api
是APICloud模仿了jquery的$
对象提供给开发者用于操作app页面的对象。api对象的操作代码必须写在apiready入口函数中,否则报错!
而
$api
的部分操作代码,则不会报错,但是强烈建议不管是$api
还是api都写进入口函数中。
代码:
<!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>livi app</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>livi kawaii~~~~</h1>
</div>
<div id="main" class="flex-con">
</div>
<div id="footer">
<h5>Copyright ©<span id="year"></span> </h5>
</div>
<div id="info">
</div>
</div>
</body>
<script type="text/javascript" src="./js/api.js"></script>
<script type="text/javascript">
apiready = function(){
var header = document.querySelector('#header');
$api.fixStatusBar(header);
var el = $api.byId("header");
var h1 = $api.first(el);
var content = $api.html(h1,"2020-08-27");
var ver = api.version;
var sType = api.systemType;
var sVer = api.systemVersion;
var id = api.deviceId;
var model = api.deviceModel;
var name = api.deviceName;
var cType = api.connectionType;
var winName = api.winName;
var winWidth = api.winWidth;
var winHeight = api.winHeight;
var frameName = api.frameName || '';
var frameWidth = api.frameWidth || '';
var frameHeight = api.frameHeight || '';
var str = '<ul>';
str += '<li>引擎版本信息: ' + ver + '</li>';
str += '<li>系统类型: ' + sType + '</li>';
str += '<li>系统版本: ' + sVer + '</li>';
str += '<li>设备标识: ' + id + '</li>';
str += '<li>设备型号: ' + model + '</li>';
str += '<li>设备名称: ' + name + '</li>';
str += '<li>网络状态: ' + cType + '</li>';
str += '<li>主窗口名字: ' + winName + '</li>';
str += '<li>主窗口宽度: ' + winWidth + '</li>';
str += '<li>主窗口高度: ' + winHeight + '</li>';
str += '<li>子窗口名字: ' + frameName + '</li>';
str += '<li>子窗口宽度: ' + frameWidth + '</li>';
str += '<li>子窗口高度: ' + frameHeight + '</li>';
str += '</ul>';
$api.html($api.byId("info"), str);
};
</script>
</html>
获取服务端API接口
获取数据可以使用$api.post()
,当然,也可以使用api对象
提供的api.ajax
。
api.ajax
基本语法:
api.ajax({
url: 'API接口地址', // 必须加上协议
method: '请求方法', // post、get、put、delete
dataType: "json", // 服务端数据响应格式
cache: true, // 缓存数据,若缓存,下次没网络时请求则会使用缓存,
// 仅在get请求有效
timeout: 30, // 超时时间,单位:秒
headers:{}, // 请求头,里面的key使用首字母大写的形式,
// 如 Content-Type
report:false, // 是否实时返回上传文件的进度,只有上传时使用
data: { // 提交数据
values: { // 以表单格式提交数据
name: 'haha'
},
body: "", // 以字符串格式提交数据
files: { // ajax上传文件
file: 'fs://a.gif' // 文件字段名
}
}
},function(ret, err){ // 回调函数,参数1是响应内容,参数2是错误信息
if (ret) {
alert( JSON.stringify( ret ) );
} else {
alert( JSON.stringify( err ) );
}
});
接下来的开发中,我们需要实现客户端,所以如果基于上面的$api开发的话,非常的影响效率,所以我们可以采用Vue.js来完成app的客户端开发.当然最终代码还是运行在APICloud里面.
vue+axios
vue.js:https://vuejs.org/js/vue.js
axios.js:https://www.npmjs.com/package/axios
把下载回来的vue.js和axios.js保存到项目的scripts目录下,然后在页面中引入。
<script src="../script/settings.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/axios.js"></script>
调用框架
<script src="./script/api.js"></script>
APICloud 前端框架中提供的40多个操作方法,主要分6类用途:
使用方法介绍官方地址链接:
https://docs.apicloud.com/Front-end-Framework/framework-dev-guide
数据操作:
trim() trimAll() isArray() jsonToStr() strToJson() get()
post()
事件操作:
addEvt() rmEvt()
元素查找:
one() dom() domAll() byId() first() last() eq() not() prev() next() contains() closest()
DOM操作:
remove() attr() removeAttr() hasCls() addCls() removeCls() toggleCls() val() prepend() append() before() after()
html() text() offset() css() cssVal()
本地存储:
setStorage() getStorage() rmStorage() clearStorage()
系统兼容:
fixIos7Bar() fixStatusBar()
所有的APICloud前端框架的代码都必须在其入口函数中执行,并且通过$api
来进行调用。
入口函数
// 要调用上面的40个方法,必须在apiready里面编写,在外面是没有$api对象的.
apiready = function(){
// js代码
}
api与$api对象
注意:在APICloud中存在2个全局对象,分别是$api和api对象。这两个对象是不同的。
其中api对象主要是由APP系统提供给我们开发者操作和读取设备信息的。
而
$api
是APICloud模仿了jquery的$
对象提供给开发者用于操作app页面的对象。api对象的操作代码必须写在apiready入口函数中,否则报错!
而
$api
的部分操作代码,则不会报错,但是强烈建议不管是$api
还是api都写进入口函数中。
代码:
<!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>livi app</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>livi kawaii~~~</h1>
</div>
<div id="main" class="flex-con">
</div>
<div id="footer">
<h5>Copyright ©<span id="year"></span> </h5>
</div>
<div id="info">
</div>
</div>
</body>
<script type="text/javascript" src="./js/api.js"></script>
<script type="text/javascript">
apiready = function(){
var header = document.querySelector('#header');
$api.fixStatusBar(header);
var el = $api.byId("header");
var h1 = $api.first(el);
var content = $api.html(h1,"2020-08-27");
var ver = api.version;
var sType = api.systemType;
var sVer = api.systemVersion;
var id = api.deviceId;
var model = api.deviceModel;
var name = api.deviceName;
var cType = api.connectionType;
var winName = api.winName;
var winWidth = api.winWidth;
var winHeight = api.winHeight;
var frameName = api.frameName || '';
var frameWidth = api.frameWidth || '';
var frameHeight = api.frameHeight || '';
var str = '<ul>';
str += '<li>引擎版本信息: ' + ver + '</li>';
str += '<li>系统类型: ' + sType + '</li>';
str += '<li>系统版本: ' + sVer + '</li>';
str += '<li>设备标识: ' + id + '</li>';
str += '<li>设备型号: ' + model + '</li>';
str += '<li>设备名称: ' + name + '</li>';
str += '<li>网络状态: ' + cType + '</li>';
str += '<li>主窗口名字: ' + winName + '</li>';
str += '<li>主窗口宽度: ' + winWidth + '</li>';
str += '<li>主窗口高度: ' + winHeight + '</li>';
str += '<li>子窗口名字: ' + frameName + '</li>';
str += '<li>子窗口宽度: ' + frameWidth + '</li>';
str += '<li>子窗口高度: ' + frameHeight + '</li>';
str += '</ul>';
$api.html($api.byId("info"), str);
};
</script>
</html>
获取服务端API接口
获取数据可以使用$api.post()
,当然,也可以使用api对象
提供的api.ajax
。
api.ajax
基本语法:
api.ajax({
url: 'API接口地址', // 必须加上协议
method: '请求方法', // post、get、put、delete
dataType: "json", // 服务端数据响应格式
cache: true, // 缓存数据,若缓存,下次没网络时请求则会使用缓存,
// 仅在get请求有效
timeout: 30, // 超时时间,单位:秒
headers:{}, // 请求头,里面的key使用首字母大写的形式,
// 如 Content-Type
report:false, // 是否实时返回上传文件的进度,只有上传时使用
data: { // 提交数据
values: { // 以表单格式提交数据
name: 'haha'
},
body: "", // 以字符串格式提交数据
files: { // ajax上传文件
file: 'fs://a.gif' // 文件字段名
}
}
},function(ret, err){ // 回调函数,参数1是响应内容,参数2是错误信息
if (ret) {
alert( JSON.stringify( ret ) );
} else {
alert( JSON.stringify( err ) );
}
});
接下来的开发中,我们需要实现客户端,所以如果基于上面的$api开发的话,非常的影响效率,所以我们可以采用Vue.js来完成app的客户端开发.当然最终代码还是运行在APICloud里面.
vue+axios
vue.js:https://vuejs.org/js/vue.js
axios.js:https://www.npmjs.com/package/axios
把下载回来的vue.js和axios.js保存到项目的scripts目录下,然后在页面中引入。
<script src="../script/settings.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/axios.js"></script>