目录

统筹介绍：

一、开发工具的了解

二、下载地址

三、Avm.js跨端框架的优势

四、关于 window 和 frame 这二者的区别使用。

统筹介绍：

目的：前端开发APP，基于 APICloud 进行 APP 开发。

工具：前端开发 APP， DCloud 与 APICloud可以用，DCloud 官方并没有一个很好的社区，APICloud 有比较活跃的社区。

一、开发工具的了解

编辑器：APICloud Studio 3

通俗来说：是一个平台，为你提供很多组件和 API，然后帮你把你的 html 文件打包成为安卓和苹果的安装包。

二、下载地址

APICloud Studio3代码编辑器-应用软件开发工具

三、Avm.js跨端框架的优势

AVM（Application-View-Model））是APICloud基于标准H5子集设计的DSL中间语言编程框架，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。

Avm核心库只关注终端差异、虚拟DOM、组件化和数据绑定，与其他重量级框架不同的是，Avm不需要太多的外部依赖，仅需要组件化、数据驱动等更现代化框架的能力。其可具备如下能力：

1、Virtual DOM：通过虚拟DOM，渲染到不同终端，充分尊重系统特性，为不同终端执行差异处理，实现高效渲染；

2、组件化：高可重用性、可组合性、可维护性的架构设计，隐藏了复杂的DOM结构和行为，让开发者专注于应用的功能和外观；

3、数据绑定：轻松将数据源绑定到应用用户界面，降低逻辑复杂性和开发难度；

4、状态管理和路由：有效分离用户界面和数据处理，实现项目的工程化管理；

5、类Vue语法和兼容React JSX，兼具Vue的轻巧和React的灵活性。

APICloud DSL最终可编译为标准JS，通过DeepEngine渲染到app端和Web端，或者编译为微信小程序代码，用于微信小程序平台发布。

四、关于 window 和 frame 这二者的区别使用。

我们要实现页面切换，往往都是通过 api.openWin和api.closeWin 来执行，也就是打开一个页面，关闭一个页面。如果我们要在当前页面的某个位置打开一个窗口，也就是之前提到的 frame，也是同样的通过 api.openFrame和api.closeFrame 来实现。

api.openWin({

name: 'page1',

url: './page1.html',

pageParam: {

name: 'test'

}

});

一旦执行了代码，它就会根据url来进行页面跳转，然后给跳转的页面一个名字。如果是关闭的话，只需要执行下面这段代码就 OK 了。

api.closeWin({

name: 'page2'

});

我们只需要告诉它需要关闭的页面的名称就可以了。

五、CSS Framework

清除浏览器默认样式（借鉴CSS Reset，Normalize.css）禁用系统长按菜单（-webkit-touch-callout:none）禁用字体大小自动调整（-webkit-text-size-adjust:none）去掉点击高亮（-webkit-tap-highlight-color:rgba(0, 0, 0, 0)）禁止选择内容（-webkit-user-select:none）清除浮动（.clearfix）加载更多默认样式（.loading_more）

JavaScript Framework

命名空间为 $api ，所有方法如下：

1.trim() 描述：去掉字符串首尾空格

2.trimAll() 描述：去掉字符串所有空格

3.isArray() 判断对象是否为数组 isArray(obj)

4..addEvt() 为DOM元素绑定事件 $api.addEvt(element, 'click', function(){ //do something });

5..rmEvt() 移除DOM元素绑定的事件 $api.rmEvt(element, 'click', function(){ //do something });

6..one() 为DOM元素绑定事件，事件只执行一次 $api.one(element, 'click', function(){ //do something });

7..dom() 选择首个匹配的DOM元素 .dom(el, selector) 从el元素开始查找 el (类型：Element)：DOM元素 selector (类型：Selector)：CSS 选择器

8..domAll() 选择所有匹配的DOM元素 $api.domAll('.class');

9..byId() 通过Id选择DOM元素 $api.byId('idStr')

10..first() 选择DOM元素的第一个子元素

11.last() 选择DOM元素的最后一个子元素

12.eq() 选择第几个子元素 .eq(el, index) el (类型：Element)：DOM元素 index (类型：String | Number)：索引值

$api.eq(el, 2); $api.eq(el, '2');

13.not() 根据排除选择器选择子元素 返回不匹配选择器的所有子元素 $api.not(el, '.active');

14.prev() 选择相邻的前一个元素

15.next() 选择相邻的下一个元素

16.contains() 判断某一个元素是否包含目标元素 contains(parentEl, targetEl)

17..closest() 根据选择器匹配最近的父元素

18.remove() 移除DOM元素

19.attr() 获取或设置DOM元素的属性 .attr(el, name, value) el (类型：Element)：DOM元素 name (类型：String)：属性名 value (类型：String)：属性值

$api.attr(el,'data','123');

20.removeAttr() 移除DOM元素的属性 $api.removeAttr(el, 'data')

21..hasCls() DOM元素是否含有某个className 返回值：Boolean $api.hasCls(el, 'classname'); // => true

22 .addCls() 为DOM元素增加className $api.addCls(el, 'newclass');

23..removeCls() 移除指定的className $api.removeCls(el, 'newclass');

24..toggleCls() 切换指定的className

25..val() 获取或设置常用 Form 表单元素的 value 值 .val(el, val) 设置表单元素value值 $api.val(el,'123');

25.prepend() 在DOM元素内部，首个子元素前插入HTML字符串 $api.prepend(el,'

hello

');

26.append() 在DOM元素内部，最后一个子元素后面插入HTML字符串 $api.append(el,'

hello

');

27..before() 在DOM元素前面插入HTML字符串

28.after() 在DOM元素后面插入HTML字符串

29.html() 获取或设置DOM元素的innerHTML $api.html(el,'

world

');

30.text() 设置或者获取元素的文本内容

. text (el, txt) 返回值：当前DOM元素 var a = document.getElementById('a'); $api.text(a, 'text'); // => text

. text (el) 返回值：DOM元素的文本内容 text var a = document.getElementById('a'); $api.text(a); // => text

31.offset() 获取元素在页面中的位置与宽高，(此为距离页面左侧及顶端的位置，并非距离窗口的位置)

var offset = $api.offset(el); var left = offset.l; var top = offset.t; var width = offset.w; var height = offset.h;

32.css() 设置所传入的DOM元素的样式，可传入多条样式 $api.css(el,'width:800px;border:1px solid red');

33.cssVal() 获取指定DOM元素的指定属性的完整的值，如800px $api.cssVal(el,'width'); // => 800px

34.jsonToStr() 将标准的JSON 对象转换成字符串格式 var json = {a:111, b:222}; $api.jsonToStr(json); // => "{"a":111,"b":222}"

35. strToJson () 将JSON字符串转换成JSON对象 var a = '{"a":"111", "b":"222"}'; $api.strToJson(a); // => Object {a: "111", b: "222"}

36.setStorage() 设置localStorage数据 setStorage (key,value) $api.setStorage('name','Tom');

37.getStorage() 获取localStorage数据，必须与$api.setStorage()配套使用 $api.getStorage('name'); // => "Tom"

38.rmStorage() 清除localStorage中与键名对应的值 $api.rmStorage('name')

39.clearStorage () 清除localStorage的所有数据，慎用 $api.clearStorage ();

40.fixIos7Bar() 适配iOS7+系统状态栏，为传入的DOM元素增加20px的上内边距

自动识别iOS7+，避免应用与状态栏重叠，无法跟config.xml里面的 一起使用。 var header = document.querySelector('#header'); $api.fixIos7Bar(header);

41.fixStatusBar() 适配iOS7+、Android4.4+系统状态栏，为传入的DOM元素增加适当的上内边距，避免header与状态栏重叠

自动识别iOS7+，避免应用与状态栏重叠，无法跟config.xml里面的 一起使用。 var header = document.querySelector('#header'); $api.fixStatusBar(header);

42.toast() 延时提示框 .toast(title,text,time)

title (类型：String) ： 标题(可选参数) text(类型：String)：内容(可选参数) time(类型：Number)：延时的时间(可选参数),单位为毫秒，默认值为500

$api.toast('演示','延时提示框',1000);

43.get() api.ajax()方法的get方式简写 get(url,fnSuc,dataType)

url (类型：String) : url(必传参数)

fnSuc (类型：Function)：成功回调函数(可选参数) dataType(类型：String)：

返回值的类型(可选参数)，有text与json两种类型，默认为json

$api.get('http://www.pm25.in/api/querys/pm2_5.json?city=beijing&token=5j1znBVAsnSf5xQyNQyq',function(ret){ alert(ret); },'text');

44.post() api.ajax()方法的post方式简写 .post(url,data,fnSuc,dataType)

url (类型：String) ：url(必传参数)

data(类型：JSON): 可以有body：请求体（字符串类型）values：post参数（JSON对象）

files：post文件（JSON对象）等参数(可选参数)

fnSuc (类型：Function)：成功回调函数(可选参数)

dataType(类型：String)：返回值的类型(可选参数)，有text与json两种类型，默认为json

返回值：向url地址发送ajax请求，并发送数据data，根据dataType在成功回调函数返回相应数据

$api.post('http://192.168.1.233:4321/getString',{ body: 'String' },function(ret){ alert(ret); },'text');