钉钉小程序的基础

一个小程序就是一个全局的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"
}

你可能感兴趣的