钉钉小程序的基础

一个小程序就是一个全局的app函数，函数在初始化时加载各个页面page，页面加载各个组件component。
小程序分为app和page两层。

一、App() 全局函数

管理所有页面和全局数据，以及提供生命周期回调函数。是一个构造方法，构成App实例，一个小程序就是一个App实例。
包含三个文件：
1、app.json：应用配置
设置页面文件的路径、窗口表现、多Tab、分包、插件等。
示例：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "defaultTitle": "Demo"
  }
}

2、app.js：应用逻辑

 // 小程序首次启动时会调用（第一次打开），只会调用一次
onLaunch(options){
  console.log(options.query);
  console.log(options.path);
} 
// 小程序启动，从后台进入前台
onShow(options){
  console.log(options.query);
  console.log(options.path);
} 
// 注意1：不要在onShow()中进行 my.redirectTo或my.navigateTo 等操作页面栈的行为。
// 注意1：不要在 onLaunch() 里调用 getCurrentPages 方法，因为此时 page 还未生成。
// 小程序从前台进入后台会触发
onHide(){}
// 小程序发生错误脚本或API调用出错时触发
onError(err){
  console.log(err)
}
// 全局分享配置。返回自定义分享信息
onShareAppMessage() {},
// 当Promise被reject且没有reject处理器时触发。也可使用 my.onUnhandledRejection绑定监听。
onUnhandledRejection(res) {
  console.log(res.reason, res.promise);
   // res.reason 是reject原因，res.promise 是被reject的Promise对象
},
// 小程序要打开的页面不存在时触发。也可以使用 my.onPageNotFound 绑定监听。
onPageNotFound(res) {
  my.redirectTo({
    url: '/pages/...'
  }) 
  // 如果是 tabbar 页面，请使用 my.switchTab
}
// 设置全局数据
globalData:1

无法在app.js关掉小程序。关闭小程序的方法仅支持小程序页面点击右上角的关闭按钮。
3、app.acss：应用样式
作为全局样式，作用于当前小程序的所有页面

二、Page() 页面函数

代表应用的一个页面，负责页面展示和交互。是一个构造方法，构成页面实例。
包含四个文件：
1、[pageName].js：页面内逻辑

Page({
  data: {
    title: "Alipay",
  },
  onLoad(query) {
    // 页面加载
  },
  onShow() {
    // 页面显示
  },
  onReady() {
    // 页面加载完成
  },
  onHide() {
    // 页面隐藏
  },
  onUnload() {
    // 页面被关闭
  },
  onTitleClick() {
    // 标题被点击
  },
  onPullDownRefresh() {
    // 页面被下拉
  },
  onReachBottom() {
    // 页面被拉到底部
  },
  onShareAppMessage() {
   // 返回自定义分享信息
  },
  // 事件处理函数对象
  events: {
    onBack() {
      console.log('onBack');
    },
  },
  // 自定义事件处理函数
  viewTap() {
    this.setData({
      text: 'Set data for update.',
    });
  },
  // 自定义事件处理函数
  go() {
    // 带参数的跳转，从 page/ui/index 的 onLoad 函数的 query 中读取 type
    my.navigateTo({url:'/page/ui/index?type=mini'});
  },
  // 自定义数据对象
  customData: {
    name: 'alipay',
  },
});

2、[pageName].axml：页面结构
3、[pageName].acss：页面样式(可选)
4、[pageName].json：页面配置(可选)
用于配置当前页面的窗口表现。只能设置 window 相关配置项，但无需写 window 这个键。页面配置项会优先于全局配置项。
示例：

{
  // 设置导航栏额外图标
  "optionMenu": {
    "icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"
  },
  // 设置导航栏点击穿透，取值（"YES"，"NO"）
  "titlePenetrate": "YES",
  // 设置导航栏图标主题，仅支持真机预览。“default”为蓝色图标，“light”为白色图标
  "barButtonTheme": "light",
  "usingComponents": {
    "other":"../other/index" // 依赖的组件
  },
  // 避免页面的样式影响到外部
  "styleIsolation": "apply-shared"
}

三、Component() 组件函数

1、[componentName].js：组件内逻辑

Component({
  mixins: [], // mixins 方便复用代码
  data: { x: 1 }, // 组件内部数据
  props: { y: 1 }, // 可给外部传入的属性添加默认值
  didMount(){}, // 生命周期函数
  didUpdate(prevProps,prevData){}, // 用于监听data跟props里的数据变化
  didUnmount(){},
  methods: {   // 自定义方法
    handleTap() {
      this.setData({ x: this.data.x + 1}); // 可使用 setData 改变内部属性
    }, 
  },
})

2、[componentName].axml：组件结构
3、[componentName].acss：组件样式
4、[componentName].json：组件配置
声明自定义组件。如果该自定义组件还依赖了其它组件，则还需要额外声明依赖哪些自定义组件。
示例：

{
  "component": true, // 必选，自定义组件的值必须是 true
  "usingComponents": {
    "other":"../other/index" // 依赖的组件
  },
  // 组件样式隔离
  "styleIsolation": "apply-shared"
}