1. 介绍
- APICloud内置了一个APICloud 前端框架给我们操作APP页面和展示数据，也提供了ajax跨域请求数据功能。
- 它本质上就是一个仿照jQuery编写的一个小工具库，所以并不好用。
- 现在更新到3版本了，目测丝滑了不少
- 支持vue语法，react语法......
- 框架地址：
2. 目录结构
APP/
|- index.html # 默认app配置的入口页面
|- config.xml # APP系统配置文件
|- html/ # APP页面存储目录
|- css/ # 样式目录
|- script/ # js脚本目录
|- image/ # 图片目录3. 配置文件源码(config)
<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>
4. 调用框架
<script src="./script/api.js"></script>5. APICloud 前端框架中提供的40多个操作方法，主要分6类用途
- 所有的APICloud前端框架的代码都必须在其入口函数中执行，并且通过
$api来进行调用。
数据操作：
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()6. 入口函数
// 要调用上面的40个方法,必须在apiready里面编写,在外面是没有$api对象的.
apiready = function(){
// js代码
}7. api与$api对象
7.1 介绍
注意：在APICloud中存在2个全局对象，分别是$api和api对象。这两个对象是不同的。
其中api对象主要是由APP系统提供给我们开发者操作和读取设备信息的。
而`$api`是APICloud模仿了jquery的`$`对象提供给开发者用于操作app页面的对象。
api对象的操作代码必须写在apiready入口函数中，否则报错！
而`$api`的部分操作代码，则不会报错，但是强烈建议不管是`$api`还是api都写进入口函数中。7.2 代码
<!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>磨坊 APP</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>老男孩 python~~~</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>8. 获取服务端API接口
- 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: "", // 以字符串格式提交数据,body和values是冲突的，只能使用其中一个
files: { // ajax上传文件
file: 'fs://a.gif' // 文件字段名
}
}
},function(ret, err){ // 回调函数，参数1是响应内容，参数2是错误信息
if (ret) {
alert( JSON.stringify( ret ) );
} else {
alert( JSON.stringify( err ) );
}
});9. vue+axios
9.1 文件下载
9.1.1 vue.js：
https://vuejs.org/js/vue.js
https://vuejs.org/js/vue.js
9.1.2 axios.js：
axios - npmhttps://www.npmjs.com/package/axios
9.1.3 把下载回来的vue.js和axios.js保存到项目的scripts目录下，然后在页面中引入。
<script src="../script/settings.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/axios.js"></script>
1226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
