一个app前端框架基础版
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>
<content src="index.html" />
<access origin="*" />
<preference name="pageBounce" value="false"/>
<preference name="appBackground" value="rgba(0,0,0,0.0)"/>
<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
<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"/>
<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都写进入口函数中。
代码：
<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 apptitle>
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 = ''
;
str += '引擎版本信息: ' + ver + '';
str += '系统类型: ' + sType + '';
str += '系统版本: ' + sVer + '';
str += '设备标识: ' + id + '';
str += '设备型号: ' + model + '';
str += '设备名称: ' + name + '';
str += '网络状态: ' + cType + '';
str += '主窗口名字: ' + winName + '';
str += '主窗口宽度: ' + winWidth + '';
str += '主窗口高度: ' + winHeight + '';
str += '子窗口名字: ' + frameName + '';
str += '子窗口宽度: ' + frameWidth + '';
str += '子窗口高度: ' + frameHeight + '';
str += '';
$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都写进入口函数中。
代码：
<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 apptitle>
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 = ''
;
str += '引擎版本信息: ' + ver + '';
str += '系统类型: ' + sType + '';
str += '系统版本: ' + sVer + '';
str += '设备标识: ' + id + '';
str += '设备型号: ' + model + '';
str += '设备名称: ' + name + '';
str += '网络状态: ' + cType + '';
str += '主窗口名字: ' + winName + '';
str += '主窗口宽度: ' + winWidth + '';
str += '主窗口高度: ' + winHeight + '';
str += '子窗口名字: ' + frameName + '';
str += '子窗口宽度: ' + frameWidth + '';
str += '子窗口高度: ' + frameHeight + '';
str += '';
$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>