前一节我们对钉钉小程序开发有了一定的了解,我们可以修改标题以及页面内容。本节我们将来对整个目录结构做详细说明。
钉钉小程序分为两层:app层(小程序的全局配置)和page层(页面详细配置)。
app层详解
在项目根目录下有三个以app开头的文件,这三个文件用于管理所有页面和全局数据,以及提供生命周期方法,全局样式。
文件 | 必填 | 描述 |
app.js | 是 | 小程序启动时,生命周期内初始化操作,以及全局变量设置。 |
app.json | 是 | 小程序页面路径,窗口表现,设置多选项卡等等。 |
app.acss | 否 | 全局公共样式 |
(1)app.js
(2)app.json
(3)app.acss
全局样式没什么可说的,和css样式的写法基本一致。
(4)getApp()方法
前边我们已经初始化创建了小程序实例,那么我们如何拿到这个小程序实例呢?官方提供了全局的getApp()函数用于获取小程序实例,一般我们会用来获取全局变量。
var app = getApp();
console.log(app.globalData.userInfo);
注意:
①、App()必须在app.js里调用,且不能调用多次;
②、使用this可以拿到app实例,不能再App()内定义的函数中调用getApp();
③、不能在onLaunch里调用getCurrentPages(),初始化未完成page页面还未生成;
④、通过getApp()获取实例之后,不要私自调用生命周期函数。
2、page层
page层代表的是小程序的一个页面,负责信息展示和交互。一般每个小程序都会有多个页面构成,而每个页面一般包含四个文件。
文件后缀 | 必填 | 描述 |
js | 是 | 页面逻辑,比如数据获取,数据验证等。 |
axml | 是 | 页面结构,由一系列标签堆叠而成。 |
acss | 否 | 页面样式,比如页面纵横布局等。 |
json | 否 | 页面配置,比如页面标题等。 |
(1)axml文件
<view>
Hello,dingtalk!
</view>
<!-- 页面初始化 数据渲染-->
<view>{{ title }}</view>
(2)js文件
Page({
data: {//初始数据或返回初始化数据的函数
title: 'Hello, dingtalk'
},
onLoad(query) {
// 页面加载
console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
},
onReady() {
// 页面加载完成
},
onShow() {
// 页面显示
},
onHide() {
// 页面隐藏
},
onUnload() {
// 页面被关闭
},
onTitleClick() {
// 标题被点击
},
onPullDownRefresh() {
// 页面被下拉
},
onReachBottom() {
// 页面被拉到底部
},
onShareAppMessage() {
// 返回自定义分享信息
return {
title: 'My App',
desc: 'My App description',
path: 'pages/index/index',
};
},
});
(3)json和acss文件
页面json文件中可以更改标题属性,会覆盖app.json中window属性中的值。
页面acss文件是本页面的样式,会覆盖app.acss中相同的样式。
(4)getCurrentPages()获取当前页面栈的实例
该函数是以数组的形式按栈的顺序给出当前页面栈,第一个元素为首页,最后一个元素为当前页面。
编写页面顺序:
(1)在app.json中pages数组中加入页面,如"pages/login/login";
(2)在pages目录下新建目录login;
(3)login目录下新建login.axml、login.js、login.acss、login.json文件;
(4)login.axml中编写视图代码;
(5)login.js中初始化数据、事件等等。
(6)编译代码,在模拟器查看效果。