小程序组件的生命周期、用法

page.js

Page({
  data: { // 页面初始化数据
    num: 1
  },
  onLoad:function(options){
     // 生命周期函数，监听页面加载
  }，
  onReady:function(){ 
    // 监听页面初次渲染完成
  }，
  onShow:function(){
    // 监听页面显示
  },
  onHide:function(){
    //监听页面隐藏
  }，
  onUnload:function(){
    //监听页面卸载
  },
  onPullDownRefresh:function(){
    //监听用户下拉动作
  },
  onReachBottom:function(){
    //页面上拉触底事件的处理函数
  },
  onShareAppMessage:function(){
    //用户点击右上角分享
  }, 
  onPageScroll:function(){
    //页面滚动时执行
  }, 
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
    // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

一：components/adDialog.js

Component({
  properties: { / 组件属性列表
    isStringVal: {
      type: String,
      value: '是'
    },
    isBooleanVal: {
      type: Boolean,
      default: false,
      observer: function(newVal, oldVal){
      }，
    }
  },
  observers:{    /观察者，属性监听（properties与data中数据均可监听）
   'num'(data){  //单个监听
       console.log('数量改变了')
    },
    'num,key'(num, key){ // 多个监听
      this.setData({
          newKey:  num+ key
      })
    }
  },
  data:{  / 组件内部的初始化数据
    num: 1,
    key: 'test',
    newKey: test1
  },

  created: function(){
    / 组件实例刚刚被创建好时触发
    // 组件的this.data 就是在Component构造器中定义的数据data
    // 用于给组件this增加一些属性
    // 不可以调用setData
  },

  attached: function(){
    / 在组件完全初始化完毕、进入页面节点树后触发
    // this.data 被初始化为组件的当前值
    // 绝大多数初始化工作可在这个时机进行
    // 可以使用setData
  },

  detached: function(){
     /在组件离开页面节点树  后   触发
    // 退出一个页面时。 如果组件还在页面节点树中,则会触发
  },

  methods:{ / 组件的方法列表
    isOK: function(){
        console.log('完美')
    }
  }
})

二：components/adDialog.wxml

<block>
  <view>页面呈现的HTML内容</view>
</block>

三：components/adDialog.json

{
  "navigationBarTitleText": '导航条名称',
  "navigationStyle": 'default', // default是默认样式, custom自定义导航栏
  "component": true, 
  "usingComponents": { // 组件引用
      "showAdPop": "/components/adDialog", // 举例子  引自己
  } 
}

四：components/adDialog.wxss

  .styleVal{
    样式
  }

组件使用

<showAdPop isBooleanVal ="{{isBooleanVal}}" isStringVal ="否" ></showAdPop>