钉钉E应用入门总结

前言：

钉钉E应用是一种全新的开发模式，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、等多端部署。轻量级，容易上手，开发快捷。酷似微信小程序，限制比较多。

一、框架

1、文件结构

与微信小程序一毛一样。
E应用分为app和page两层。app用来描述整体程序，page用来描述各个页面。

1.1、 app 由三个文件组成，必须放在项目的根目录。

• app.js 逻辑
• app.json 公共设置
• app.acss 公共样式表

1.2、page 由四个文件组成，分别是：

js 页面逻辑,app.js赋值this.xxx = 'xxx'。 page.js赋值this.setData({ xxx: 'xxx'}

• axml 页面结构
• acss 页面样式表
• json 页面配置

注意：为了方便开发者，我们规定这四个文件必须具有相同的路径与文件名。

开发者写的所有代码最终将会打包成一份 JavaScript 脚本，在E应用启动的时候运行，在E应用结束运行时销毁。

2、逻辑结构

E应用的核心是一个响应式的数据绑定系统，逻辑上分为视图层和逻辑层。这两层始终保持同步，只要在逻辑层修改数据，视图层就会相应的更新。

注意：由于框架并非运行在浏览器中，所以 JavaScript 在 web 中的一些能力都无法使用，如 document、window等对象。

逻辑层 js 可以用 es2015 模块化语法组织代码：

import util from './util'; // 载入相对路径
import absolute from '/absolute'; // 载入项目根路径文件

3、第三方NPM模块

E应用支持引入第三方模块，需先在E应用根目录下执行如下命令安装该模块:

npm install lodash

引入后即可在逻辑层中直接使用：

import lodash from 'lodash'; // 载入第三方 npm 模块

注意：由于 node_modules 里第三方模块代码不会经过转换器，为了确保各个终端兼容，node_modules 下的代码需要转成 es5 格式再引用，模块格式推荐使用 es2015 的 import/export。同时，浏览器相关web能力同样无法使用。

二、App

1、App 提供四个事件，可以设置钩子方法。

• onLaunch：E应用启动 ，当E应用初始化完成时触发，全局只触发一次
• onShow：E应用切换到前台， 当E应用启动，或从后台进入前台显示时触发
• onHide：E应用切换到后台，当E应用从前台进入后台时触发
• onError: E应用出错，当E应用发生 js 错误时触发

2、onLaunch/onShow 方法的参数

属性	类型	描述
query	Object	当前E应用的 query
path	String	当前E应用的页面地址

注意 query 从启动参数的 query 字段解析而来，path 从启动参数 page 字段解析而来

3、getApp()

提供全局的getApp()函数，可以获取到E应用实例，一般用在各个子页面之中获取顶层应用。

var app = getApp()
console.log(app.globalData) // 获取 globalData

注意：

• App()必须在 app.js 里调用，且不能调用多次。
• 不要在于 App() 内定义的函数中调用 getApp()，使用 this 就可以拿到 app 实例。
• 不要在 onLaunch 里调用getCurrentPages()，这个时候 page 还没有生成。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

3、app.json

文件	类型	必填描述
pages	StringArray	设置页面路径
window	Object	设置默认页面的窗口表现
tabBar	Object	设置底部 tab的 表现（顶部线条颜色，文字size，图片大小不能改，无法添加自定义事件）

4、视图层

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于各种场合。

4.1、数据绑定

 {{message}} 
// page.js
Page({
  data: {
    message: 'Hello dingtalk!'
  }
})

4.2、列表渲染

• 默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。

• 使用a:for-item可以指定数组当前元素的变量名。

• 使用a:for-index可以指定数组当前下标的变量名。

  {{index}}: {{item.message}} {{idx}}: {{itemName.message}}

4.3、引用

axml提供两种文件引用方式import和include

（1）import有作用域的概念，只会import目标文件中定义的template。

（2）include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置

4.4、模板

axml提供模板（template），可以在模板中定义代码片段，在不同的地方调用。此处 template 区别于 slot

（1）定义模板，使用name属性，作为模板的名字，然后在