钉钉 e应用 mysql_钉钉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 里调用page 还没有生成。

通过 getApp() 获取实例之后，不要私自调用生命周期函数。

3、app.json

文件 类型 必填描述

pages StringArray 是设置页面路径

window Object 否设置默认页面的窗口表现

tabBar Object 否设置底部 tab 的表现(注: 高度，顶部线条颜色，文字大小，图片大小不能修改，无法添加自定义事件)

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

(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 修改。详见开发自定义组件-data

props 为外部传过来的属性，可指定默认属性，后面不可修改.详见开发自定义组件-props

methods 为自定义方法。详见开发自定义组件-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中，以免影响渲染速度。

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

二、JSAPI

1、交互反馈

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

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

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

2、选择日期

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

3、导航栏

(1)dd.navigateTo保留当前页面，跳转到应用内的某个指定页面，可以使用dd.navigateBack返回到原来页面。注意：页面最大深度为5

(2)dd.navigateBack关闭当前页面，返回上一级或多级页面。可通过getCurrentPages获取当前的页面栈信息，决定需要返回几层。

(3)dd.redirectTo关闭当前页面，跳转到应用内的某个指定页面。

(4)dd.reLaunch关闭当前所有页面，跳转到应用内的某个指定页面。

(5)dd.setNavigationBar设置导航栏文字及样式。仅支持背景色(backgroundColor)

(6)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);

2、Picker组件

注意： picker内只能有一个容器，否则会有奇奇怪怪的问题，又没有报错信息。

有时候出现页面一片，控制台没有任何报错信息

ObjectArray

当前选择：{{objectArray[arrIndex].name}}

3、Scroll View属性： scroll-top Number 竖向滚动条位置

该值，一定要发生改变，才触发滚动哦

4、Slider不知道你们有没有发现，扫描官网的示例，滑动Slider后，再点击别的地方，滑动，Slider依然跟着滑动的

不管你手指里Slider多远，Slider仍然跟着滑动的，(既尝试给固定高度，真不起作用)

暂没发现解决方法，如你解决了，请指导指导，谢谢

5、音频(audio)audio在开发文档中没有，因为和微信小程序差不多的，所以很多组件，可以借鉴着用的哦！

想知道可不可以用，可以直接放进页面用。我就是这样的，设置自动播放，竟然可以！

问题：初始化了，(很奇怪打印看是没有paly方法的)紧接着就调用play方法，这时候，音频并没有播放成功。为什么呢？？

解题：因为打印出来又没有play方法，尝试了可以播放，相信是有这个方法的。尝试通过点击按钮，调用play方法，竟然可以成功播放啊！！！个人猜想，刚初始化，就调用paly，可能是还没初始化完成导致

注意：最好用demo中的this.audioCtx保存，因为其他的作用域，有时候会拿不到

其他无太大需要注意的

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