空闲的时候总结的笔记,看一下apijs,api.js 是由 APICloud 官方为您提供的辅助脚本框架,遵循主流前端框架 jQuery 的使用习惯。
api.css 所有手机上表现一致。
AUI 前端布局框架。
swipe.js 实现多屏切换、轮播图等功能。
dot.js 使用 Web 方式显示数据列表时,使用 js 模板可以有效提高开发效率和运行体验,通过简单的自定义语法即可完成复杂布局的列表开发。
SHA1.js 算法进行数据加密。
APICloud-rest.js 进行数据云操作。
应用包结构
“config.xml”是配置文件,
“index.html”是启动页面,
“icon”为图标文件目录,
“launch”为启动图片目录
config.xml 配置文件
“id”: 必填,应用ID,由云服务器自动分配。它是该应用的唯一标识。
“version”:必填,应用的版本号。
“name”:必填,应用名称。
“description”:可选,应用简单描述信息。
“content”:必填,应用运行的起始页。
“permission”:必填,权限配置。
前端开发框架
可与第三方前端框架混用,也可不用我们的框架;
api.css 处理不同平台浏览器的默认样式,
api.js 提供最基础的 JavaScript 方法,
所有方法在 window.$api 对象下。
详细文档见前端框架开发指南文档https://docs.apicloud.com/Front-end-Framework/framework-dev-guide)
api.js
用法$api.
.trim() 去掉字符串首尾空格;
.trimAll() 去掉字符串所有空格;
.isArray() 判断对象是否为数组;
.addEvt((el, 事件, fn, false) 为DOM元素绑定事件;
.rmEvt() 移除DOM元素绑定的事件;
.one(el, 事件, fn, false) 为DOM元素绑定事件,事件只执行一次;
.dom(el, CSS 选择器) 返回首个匹配的DOM元素;
.domAll(el, CSS 选择器) 选择所有匹配的DOM元素;
.byId() 通过Id选择DOM元素;
.first(el, selector) 选择DOM元素的第一个子元素;
.last() 选择DOM元素的最后一个子元素;
.eq( el, index) 选择第几个子元素;
.prev( el) 选择相邻的前一个元素;
.next( el) 选择相邻的下一个元素;
.contains(parentEl, targetEl) 判断某一个元素是否包含目标元素;
.closest()
.remove() 移除DOM元素;
.attr(el, name, value) 获取或设置DOM元素的属性;
.removeAttr(el, name) 移除DOM元素的属性;
.hasCls(el, cls) DOM元素是否含有某个className;
.addCls(el, cls) 为DOM元素增加className;
.removeCls(el, cls) 移除指定的className;
.val(el, val) 获取或设置常用 Form 表单元素的 value 值;
.prepend(el, html) 在DOM元素内部,首个子元素前插入HTML字符串$api.prepend(el,'<li>hello</li>');
.append(el, html) 在DOM元素内部,最后一个子元素后面插入HTML字符串
.before(el, html) 在DOM元素前面插入HTML字符串;
.after(el, html) 在DOM元素后面插入HTML字符串;$api.after(el,'<h1>world</h1>');
.html(el, html) 获取或设置DOM元素的innerHTML;
.text(el, txt) 设置或者获取元素的文本内容;
.offset() 获取元素在页面中的位置与宽高,(此为距离页面左侧及顶端的位置,并非距离窗口的位置);
var offset = $api.offset(el);
var left = offset.l;
var top = offset.t;
var width = offset.w;
var height = offset.h;
.css(el,'width:800px;border:1px solid red') 设置所传入的DOM元素的样式,可传入多条样式;
.cssVal() 获取指定DOM元素的指定属性的完整的值,$api.cssVal(el,'width'); // 800px;
.jsonToStr() 将标准的JSON 对象转换成字符串格式;
. strToJson () 将JSON字符串转换成JSON对象;
.setStorage(key,value) 设置localStorage数据;
.getStorage(key) 获取localStorage数据,必须与$api.setStorage()配套使用;
.rmStorage(key) 清除localStorage中与键名对应的值;
.clearStorage () 清除localStorage的所有数据,慎用;
.fixIos7Bar(el) 适配iOS7+系统状态栏,为传入的DOM元素增加20px的上内边距;
.fixStatusBar() 避免header与状态栏重叠;
.toast('演示','延时提示框',1000) 延时提示框;
.get(url,function(ret){ alert(ret);},json) api.ajax() 方法的get方式;
.post(url,data,fnSuc,dataType) api.ajax()方法的post方式;
前端API调用
核心模块在 window.api 对象下,默认提供该模块,不需要单独引用。
扩展模块在相应的模块对象下(例如:文件系统模块在fs对象下),需要require引入(var fs = api.require('fs');)。API核心模块已经覆盖一般应用的绝大部分功能。
模块中所有方法均遵循 api.functionName(params, callback)格式,params为JSON格式,callback是Function类型,callback返回两个参数,均为JSON格式:callback(ret, err),ret处理成功信息,err处理错误信息。
apiready 方法在所有核心API模块准备完毕时执行。(api文档 https://docs.apicloud.com/Client-API/api)
var systemType = api.systemType; // 比如: ios 系统类型
var deviceModel = api.deviceModel; // 比如: iPhone 5 设备名称
var screenWidth = api.screenWidth; // 比如: 640 屏幕分辨率
header.style.paddingTop = api.safeArea.top + 'px'; 沉浸式
var statusBarAppearance = api.statusBarAppearance; // 比如: true 当前应用状态栏是否支持沉浸式效果,布尔类型。
这个笔记为了方便查找方便,如果在用的小伙伴可以放到桌面便于查找;对前端感兴趣的小白可以加企鹅群:829568767,免费公开课 。