钉钉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、导航栏

  1. dd.navigateTo 保留当前页面,跳转到应用内的某个指定页面,可以使用dd.navigateBack返回到原来页面。注意:页面最大深度为5
  2. dd.navigateBack 关闭当前页面,返回上一级或多级页面。可通过getCurrentPages获取当前的页面栈信息,决定需要返回几层。dd.navigateBack 关闭当前页面,返回上一级或多级页面。可通过getCurrentPages获取当前的页面栈信息,决定需要返回几层。
  3. dd.redirectTo 关闭当前页面,跳转到应用内的某个指定页面。dd.redirectTo 关闭当前页面,跳转到应用内的某个指定页面。
  4. dd.reLaunch 关闭当前所有页面,跳转到应用内的某个指定页面。dd.reLaunch 关闭当前所有页面,跳转到应用内的某个指定页面。
  5. dd.setNavigationBar 设置导航栏文字及样式。仅支持背景色(backgroundColor)dd.setNavigationBar 设置导航栏文字及样式。仅支持背景色(backgroundColor)
  6. 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);

其他无太大需要注意的

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

展开阅读全文

没有更多推荐了,返回首页