小程序笔记

Page构造函数

• Page构造的页面,是没有methods的属性,都是直接写在构造函数里面,而数据则是写在data属性里面,

  Page({
      data:{
          age:123
    },
    todo(){
    
    },
    obj:{
      name:"111"
      }
  })
  //使用obj
  this.obj == 'xxx'
  

• page的method和data都是挂载到当前页的this上,可以定义一些其他的数据,但是不会更新页面,可以做数据存储

  Page({
      data:{
          age:123
    },
    obj:{
      name:"111"
      }
  })
  //使用obj
  this.obj == 'xxx'
  

• 在wxml里面使用数据或者方法不需要使用this获取

  <view >{{age:123}}</view>
  

• 关于生命周期上接收的参数,该参数在生命周期函数执行完成后,会挂载到this上,

  onload(options){}
  //后续使用
  this.options
  

• 1

component构造函数

注册组件

需要在对应的组件的目录的json文件,配置属性 "component": true,

创建组件

使用component构造函数,创建一个自定义组件

Component({
    data:{},
    methods:{}
})

页面使用自定义组件

在页面的json配置文件修改属性,使用之后,即可在wxml文件使用 qg-list作为自定义组件

  "usingComponents": {
    "qg-list": "../../components/List/index"
  }

组件属性

• properties,相当于vue的props,可以规定数据类型和设置默认值,传递时可以使用固定数据也可以使用响应式数据,会被合并到data中

  properties: {
      visible: {
          type: Boolean,
          value: true
      }
  },
  =========js中使用
  this.data.visible
  

• data,当前组件内部维护的状态

  Component({
      data:{
        name:1
          }
  })
  ///
  this.data.name
  

• methods 组件定义内部的方法,推荐使用下划线开头,表示组件内部方法

  Component({
      methods:{
        xx(){
        }
          }
  })
  ///
  this.xxx()
  

• attached :组件加载时的生命周期钩子,写在根节点的写法是<2.2.3的版本,高于之后的版本需要使用lifetimes

• pageLifetimes: 所在页面加载的生命周期

• observers:相当于vue的watch操作,可以监听某些数据的变化

• wxml文件使用data或者method,不需要使用this,如果是data也不是使用this.data

• component 的构造函数不支持 直接定义变量或者方法在最外层,如果定义会被转为undefined

组件和页面的事件通信

0. 给组件绑定事件

   <qg-list pageTitle="111" bindmyevent="onMyEvent"></qg-list>
   

1. 组件通过任意操作触发页面的订阅操作

    this.triggerEvent('myevent', '触发点击事件')
   

2. 页面中需要有对应的处理事件onMyEvent

   Page({
           methods:{
               
           }
   )
   

3. end

组件加载时间线

0. 先是created 此时不能调用setdata
1. 传递props 如果此时监听props改变 会触发observe
2. lifetimes, attached函数(组件进入页面树)触发
3. 父页面show,
4. 然后组件进入 ready状态

behavior

类似与vue的mixin,抽离可复用的代码块,在Component组件构件时,可以使用behavior的形式,将mixin引入,实际上相当于代码的复制,behavior不存在自己的生命周期,而只是单纯的代码,在引入时,会存在与组件内部的冲突,那么就会有一套小程序内置的合并规则

template

没有自己的状态,只是单纯讲视图抽离

创建template模板,使用