使用 APICloud 进行 APP 开发的方式以及流程进行讲解

目录

统筹介绍：

一、开发工具的了解

 二、下载地址

三、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,'<li>hello</li>');

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

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

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

29.html()  获取或设置DOM元素的innerHTML  $api.html(el,'<h1>world</h1>');

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

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

    . text (el)      返回值：DOM元素的文本内容   <a id='a'>text</a> 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里面的 <preference name="iOS7StatusBarAppearance" value="false" />一起使用。 var header = document.querySelector('#header'); $api.fixIos7Bar(header);

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

自动识别iOS7+，避免应用与状态栏重叠，无法跟config.xml里面的 <preference name="statusBarAppearance" value="false" /> 一起使用。 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');