前言:
钉钉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 的表现(注: 高度,顶部线条颜色,文字大小,图片大小不能修改,无法添加自定义事件)
4、视图层
数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于各种场合。
4.1、数据绑定
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello dingtalk!'
}
})
4.2、列表渲染
默认数组的当前项的下标变量名默认为index
,数组当前项的变量名默认为item
。
使用a:for-item
可以指定数组当前元素的变量名。
使用a:for-index
可以指定数组当前下标的变量名。
<view a:for="{{array}}">
{{index}}: {{item.message}}
</view>
<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
{{idx}}: {{itemName.message}}
</view
4.3、引用
axml
提供两种文件引用方式import
和include
(1)import
有作用域的概念,只会import
目标文件中定义的template
。
(2)include
可以将目标文件除了<template/>
的整个代码引入,相当于是拷贝到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 修改。详见开发自定义组件-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
中,以免影响渲染速度。
<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
获取当前的页面栈信息,决定需要返回几层。
(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内只能有一个容器,否则会有奇奇怪怪的问题,又没有报错信息。
有时候出现页面一片,控制台没有任何报错信息
<picker onChange="bindObjPickerChange" value="{{arrIndex}}" range="{{objectArray}}" range-key="name">
<!-- 注意,picker内只能有一个容器 -->
<view class="row">
<view class="row-title">ObjectArray</view>
<view class="row-extra">当前选择:{{objectArray[arrIndex].name}}</view>
<image class="row-arrow" src="/image/arrowright.png" mode="aspectFill" />
</view>
</picker>
3、Scroll View
- 属性: scroll-top Number 竖向滚动条位置
- 该值,一定要发生改变,才触发滚动哦
4、Slider
- 不知道你们有没有发现,扫描官网的示例,滑动Slider后,再点击别的地方,滑动,Slider依然跟着滑动的
- 不管你手指里Slider多远,Slider仍然跟着滑动的,(既尝试给固定高度,真不起作用)
- 暂没发现解决方法,如你解决了,请指导指导,谢谢
5、音频(audio)
- audio在开发文档中没有,因为和微信小程序差不多的,所以很多组件,可以借鉴着用的哦!
- 想知道可不可以用,可以直接放进页面用。我就是这样的,设置自动播放,竟然可以!
- 问题:初始化了,(很奇怪打印看是没有paly方法的)紧接着就调用play方法,这时候,音频并没有播放成功。为什么呢??
- 解题:因为打印出来又没有play方法,尝试了可以播放,相信是有这个方法的。尝试通过点击按钮,调用play方法,竟然可以成功播放啊!!!个人猜想,刚初始化,就调用paly,可能是还没初始化完成导致
- 注意:最好用demo中的this.audioCtx保存,因为其他的作用域,有时候会拿不到
其他无太大需要注意的
因本人做的项目不需要使用完框架所有的内容,还在接触中,边使用边记录,到此先暂告一小段落^_^……