0基础开发钉钉E应用看文档学习整理

 

2019-04-28 盘它！！

钉钉E应用学习

（如果有帮助到小伙伴请记得给我评论+32个赞哦，嘿嘿嘿嘿。。。）

1-1文件结构

E应用分为 app 和 page 两层。app 用来描述整体程序，page 用来描述各个页面。

app：由.js  .json  .acss三个文件组成（对应E应用）

      .js         E应用的逻辑

      .json     E应用的配置（路由）

      .acss    E应用的样式

page：由.js  .json  .acss .axml四个文件组成（对应页面）

      .js         页面的逻辑

      .json     页面的设置（路由）

      .acss    页面的样式

      .axml    页面的结构

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

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

1-2逻辑结构

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

请看下面这个简单的例子。

<!-- 视图层.xml -->
<view> Hello {{name}}! </view>
<button onTap="change"> 点击 </button>

//逻辑层.js
Page({
  data: {
     name : '邓超'
  },
  change() {
    // 渲染name值为邓超
    this.setData({
      name: '孙俪'
    })
  },
});

上面代码中，框架自动将逻辑层数据中的name与视图层的name进行了绑定，所以在页面一打开的时候会显示Hello 邓超! 

用户点击按钮的时候，视图层会发送change的事件给逻辑层，逻辑层找到对应的事件处理函数。逻辑层执行了setData的操作，将name从邓超变为孙俪，因为该数据和视图层已经绑定了，从而视图层会自动改变为Hello孙俪!

单击点击按钮

 （下面是纯钉钉文档的）

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

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

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

1-3第三方NPM模块

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

npm install lodash

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

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

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

2-1 APP

App代表顶层应用，管理所有页面和全局数据，以及提供生命周期方法。它也是一个构造方法，生成App实例。一个E应用就是一个App实例。

app：由.js  .json  .acss三个文件组成（对应E应用）

      .js         E应用的逻辑

      .json     E应用的配置（路由）

      .acss    E应用的样式

 app.json:

{
 
  "pages": [
    "pages/test/test",
    "pages/index/index"
  ],
 
  "window": {
    "defaultTitle": "My App"
  }
}

上面配置指定E应用包含两个页面，以及应用窗口的默认标题是My App

app.js:

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

• onLaunch：E应用启动
• onShow：E应用切换到前台
• onHide：E应用切换到后台
• onError: E应用出错

• App({
    onLaunch(options) {
      // E应用初始化
       // 第一次打开
       // options.query == {number:1}
          console.info('App onLaunch');
    },
    onShow(options) {
      // E应用显示
       // 从后台被 scheme 重新打开
       // options.query == {number:1}
    },
    onHide() {
      // E应用隐藏
    },
    onError(msg) {
      console.log(msg)
    },
    globalData: {
      foo: true,
    }
  })

App()

App() 接受一个 object 作为参数，用来配置E应用的生命周期等。

参数说明：

属性	类型	描述	触发时机
onLaunch	Function	监听E应用初始化	当E应用初始化完成时触发，全局只触发一次
onShow	Function	监听E应用显示	当E应用启动，或从后台进入前台显示时触发
onHide	Function	监听E应用隐藏	当E应用从前台进入后台时触发
onError	Function	监听E应用错误	当E应用发生 js 错误时触发

前台、后台定义： 用户点击左上角关闭，或者按了设备 Home 键离开钉钉时，E应用并不会直接销毁，而是进入了后台，当再次进入钉钉或再次打开E应用时，又会从后台进入前台。

只有当E应用进入后台一定时间，或占用系统资源过高，才会被真正销毁。

参考：http://www.php.cn/xiaochengxu-408522.html