1. 介绍

APICloud内置了一个APICloud 前端框架给我们操作APP页面和展示数据，也提供了ajax跨域请求数据功能。
它本质上就是一个仿照jQuery编写的一个小工具库，所以并不好用。
现在更新到3版本了，目测丝滑了不少
支持vue语法，react语法......
框架地址：

APICloud APP前端框架 – 手机APP开发、APP制作、APP定制平台https://docs.apicloud.com/Front-end-Framework/framework-dev-guide

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 &copy;<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、deletedataType: "json",                  // 服务端数据响应格式cache: true,                       // 缓存数据，若缓存，下次没网络时请求则会使用缓存，// 仅在get请求有效timeout: 30,                       // 超时时间，单位：秒headers:{},                        // 请求头，里面的key使用首字母大写的形式，// 如 Content-Typereport: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.jshttps://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>

APICloud前端框架相关推荐

魔方APP项目-01-移动端开发相关概念、移动端自适配、元信息（meta）、开发准备、移动端项目搭建（模拟器调试）、APICloud（APICloud 前端框架，获取服务端API接口）
一.移动端开发相关概念 1.APP类型 ①.Native APP Native APP又称原生APP,就是我们平时说的手机应用软件. 原生APP 是针对IOS.Android.Windows等不同的手 ...
H5前端框架推荐合集（转）
Ionic ionic 吧开发流程都帮你做好了,已经不再是单纯的UI框架,而是开发框架了,非常适合快速开发.基于angular2,丰富的UI组件,大大改进的编程模型, Semantic UI 中文官网 ...
10大html5前端框架
Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者 ...
10大H5前端框架（转）
10大H5前端框架作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被 ...
转载： 10大H5前端框架
原文作者: http://www.cnblogs.com/kingboy2008/p/5261771.html 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知 ...
2021年最火的前端框架
在微信公众号和微信小程序.支付宝小程序等多端应用出现后,互联网兴起了一股大前端的热潮. 大前端已经成为前端开发一个热门的词语,去到2021年,大前端技术已经非常成熟. 那么大前端是什么意思呢?大前端的 ...
当下最流行的10大H5前端框架
作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...
10大H5前端框架 ......
作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...
【转】常用前端框架（类似Bootstrap）
转自博客园:http://www.cnblogs.com/Renyi-Fan/p/9287632.html 目录一.总结一句话总结:框架大同小异,可以多去各自官网看看效果(比较一下各自的不同点(也 ...

APICloud前端框架