钉钉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、数据绑定

<view> {{message}} </view>
// 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属性，作为模板的名字，然后在<template/>内定义代码片段。

（2）使用模板，使用is属性，声明需要的使用的模板，然后将该模板所需要的data传入，is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板
注意：模板拥有自己的作用域，只能用data传入的数据，但可以通过onXX绑定页面的逻辑处理函数

4.5、自定义组件

（1）和页面一样，自定义组件也由4个部分组成：axml、js、json、acss。

（2）开发者需要在 json 中设置 “component”: true，表示这是一个自定义组件

// /components/customer/index.js
Component({
  mixins: [], // mixin 方便复用代码
  data: { x: 1 }, // 组件内部数据
  props: { y: 1 }, // 可给外部传入的属性添加默认值
  didMount(){}, // 生命周期函数
  didUpdate(){},
  didUnmount(){},
  methods: { // 自定义事件
    handleTap() {
  	  this.setData({ x: this.data.x + 1}); // 可使用 setData 改变内部属性
    }, 
  },
})

和vue.js有些相似

开发者需要使用Component函数，注册自定义组件。

didMount 为渲染后回调
didUpdate 为更新后回调
didUnmount 为删除后回调详见开发自定义组件-组件生命周期
data 为局部状态
同页面一样可以通过 setData 修改
props 为外部传过来的属性，可指定默认属性，后面不可修改.
methods 为自定义方法

4.6、事件
（1）常用点击事件，onTap
（2）传参方式： data-参数名=“xxx”，多个，data-参数1， data-参数2……

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

4.7、样式
（1）rpx（responsive pixel）可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

（2）内联样式style、class
style属性：静态的样式统一写到class中。style接收动态的样式，样式在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。

<view style="color:{{color}};height: {{height+'rpx'}}" />

class属性：用于指定样式规则，属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，之间用空格分隔。

<view class="my-awesome-view1 my-awesome-view2" />

二、JSAPI

1、交互反馈

（1）dd.alert 弹窗，和常用的UI框架差不多，就是没有图标

（2）dd.showToast 弱提示，和常用的UI框架差不多，就是没有图标。

注意： showToast在ios系统，延迟时间不起作用，既无论设延迟多少秒，都会一闪而过

2、选择日期

dd.datePicker(object) 打开日期选择列表，很难改变其原样式

3、导航栏

dd.navigateTo 保留当前页面，跳转到应用内的某个指定页面，可以使用dd.navigateBack返回到原来页面。注意：页面最大深度为5
dd.navigateBack 关闭当前页面，返回上一级或多级页面。可通过getCurrentPages获取当前的页面栈信息，决定需要返回几层。dd.navigateBack 关闭当前页面，返回上一级或多级页面。可通过getCurrentPages获取当前的页面栈信息，决定需要返回几层。
dd.redirectTo 关闭当前页面，跳转到应用内的某个指定页面。dd.redirectTo 关闭当前页面，跳转到应用内的某个指定页面。
dd.reLaunch 关闭当前所有页面，跳转到应用内的某个指定页面。dd.reLaunch 关闭当前所有页面，跳转到应用内的某个指定页面。
dd.setNavigationBar 设置导航栏文字及样式。仅支持背景色（backgroundColor）dd.setNavigationBar 设置导航栏文字及样式。仅支持背景色（backgroundColor）
dd.switchTab 跳转到指定 tabBar 页面，并关闭其他所有非 tabBar 页面。dd.switchTab 跳转到指定 tabBar 页面，并关闭其他所有非 tabBar 页面。

注：dd.navigateTo 和 dd.redirectTo 不允许跳转到 tabbar 页面；如果需要跳转到 tabbar 页面，请使用 dd.switchTab，并且初始化数据方法放在 onShow钩子里，否则页面不会获取最新的数据，进行页面刷新。

三、组件

1、图表（雷达图）

（1）一定要给数值添加最小值属性 min: 0 ，才能生成范围网

 ddChart.source(data, {
    'number': {
            min: 0 // 定要设置最小值，才能生成范围网
        }
  });

(2) 图表形状类型，雷达图 type:‘polygon’

ddChart.axis('number', {
    label: null,
    grid: {
        lineDash: null,
        type: 'polygon' // 图表形状类型
    }
 })

（3）设置标题字体大小fontSize: ‘14’

 ddChart.axis('titleName', {
    label: { fontSize: '14' /* 文本大小 */ }
  });

(4) 设置雷达链线条大小 size(1)，颜色color("#6BA2FF")

ddChart.line().position('titleName*number').color("#6BA2FF").size(1);

其他无太大需要注意的

因本人做的项目不需要使用完框架所有的内容，到此先暂告一小段落^_……