小程序基础 （三）

5. 使用 slot

• 使用单个slot

// 页面
<Test>
  <view>自定义内容view>
Test>

// 组件
<view>
  <view>前面的内容view>
  <slot>slot>
  <view>后面的内容view>
view>

• 使用多个slot - 具名

// 页面

  自定义内容1
  自定义内容2


// 组件

  
  

• 想要使用多个slot ,一定要添加这个配置

Component({
  
  // slot 配置
  options: {
    multipleSlots: true
  },
  .....
}

vue  => 页面组件   获取数据  ajax  
     => 公共组件   复用的ui模块
     
小程序 => 页面   获取数据  ajax   (很多钩子好好学习)   ★
      => 组件    复用的ui模块  

6. 定义段与示例方法

Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。

定义段	类型	是否必填	描述
properties(★)	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，参见下文
data(★)	Object	否	组件的内部数据，和 properties 一同用于组件的模板渲染
observers(★)	Object	否	组件数据字段监听器，用于监听 properties 和 data 的变化，类似vue里面的 watch
methods(★)	Object	否	组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件事件
created	Function	否	组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用 setData ，参见 组件生命周期
attached(★)	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行，参见 组件生命周期
ready	Function	否	组件生命周期函数，在组件布局完成后执行，参见 组件生命周期
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行，参见 组件生命周期
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行，参见 组件生命周期

// observers 监听
observers :{
    name(newVal) {
      console.log('新值', newVal)
    },
    obj(newVal) {
      console.log('新值obj', newVal)
    },
    'obj.num'(newVal) {
      console.log('新值obj的num', newVal)
    }
  },
  const { obj } = this.data
      obj.num = 100
      this.setData({
        name :'大马哥',
        obj,
      })   

7. 组件通信

• 父传子 : 父组件通过属性传递给子组件数据
• 子传父 : 子组件通过事件传递给父组件数据

7.1 父传子

// 父
// 第一步 :父传子
<Test msg='父的数据'></Test>

// 子
// 第二步 : 声明
  properties: {
    msg : String,
    msg: {
      type: String,
      value: ''
    }
  },

// 第三步 : 使用
// 使用1 : 读取显示
<view> 父传子 : {{ msg }} </view>
// 使用2 : 打印
 attached() {
    console.log(123, this.properties.msg)
  }

7.2 子传父

// 父
// 第一步 : 父准备好一个方法
  myTap(e) {
    console.log('父的方法:', e.detail)
  }
// 第二步 : 通过自定义事件传递给子组件
<Test bindmytap='myTap'></Test>

// 子
 methods: {
    fn() {
      // 第三步 : 子组件触发
      this.triggerEvent('mytap', '子的数据')
    }
  },

7.3 命名规则

• 使用组件 使用中划线的方法

// 引入
"usingComponents": {
  "nav-header" : "/components/NavHeader/NavHeader"
}
// 使用1
<nav-header></nav-header>
// 使用2
<my-component></my-component>

• 属性的方式也是要中划线的方法

<nav-header  prop-a='aa' prop-b='bb'>nav-header>
<my-component my-class='cls'>my-component>

小程序生命周期

1. 应用生命周期

• 应用生命周期链接

属性	类型	默认值	必填	说明
onLaunch	function		否	监听小程序初始化。
onShow	function		否	监听小程序启动或切前台。
onHide	function		否	监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。

App({
  // 1. 应用第一次启动的时候会触发
  onLaunch() {
    // 在应用第一次启动的时候 获取用户的个人信息
    console.log('onLaunch')
  },

  // 2. 应用 被用户看到
  onShow() {
    // 对应用的数据或者页面效果 重置
    console.log('onShow')
  },

  // 3. 应用被隐藏
  onHide() {
    // 暂停或者清除定时器
    console.log('onHide')
  },

  // 4. 应用的代码发生了报错的时候 就会触发
  onError(err) {
    // 在应用发生代码报错的时候  收集用户的错误信息 通过异步请求 将错误的信息发送后台
  },
  // 5. 应用找不到就会触发
  onPageNotFound(err) {
    // 编译模式下演示
    // 如果页面不存在了, 通过js的方法来重新跳转页面
    // 1. pages/two/two在pages最前面
    // 2. 添加编译模式
    // 3. 把这个路径删掉
    console.log('找不到页面',err)
  }
})

2. 页面生命周期

• 页面生命周期链接

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发

Page({
  /**
   * 生命周期函数--页面加载的时候触发
   */
  onLoad: function(options) {
    // 发送网络请求
  },
  /**
   * 生命周期函数--页面显示的时候触发
   */
  onShow: function() {},

  /**
   * 生命周期函数--页面初次渲染完成的时候触发
   */
  onReady: function() {
    // 渲染完成
  },
  /**
   * 生命周期函数--页面隐藏的时候触发
   */
  onHide: function() {},

  /**
   * 生命周期函数--页面卸载的时候触发
   */
  onUnload: function() {
    wx.redirectTo({
      url: '/pages/one/one'
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   * 配合 配置 :  "enablePullDownRefresh": true
   */
  onPullDownRefresh: function() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {},

  // 滚动页面
  onPageScroll(e) {
    console.log(e.scrollTop)
  },

  /**
   *  监听尺寸变化
   */
  onResize() {
    console.log('尺寸变化了')
    // 页面配置 "pageOrientation" :"auto"
  },
  /**
   * 当前是 tab 页时，点击 tab 时触发
   */
  onTabItemTap(res) {
    // 每个tab对应的页面都要点击
  }
})