小程序开发知识必备-自定义组件

1.认识自定义组件的属性、数据、方法和生命周期。

1>自定义组件的属性、数据、方法

  • 【properties】:自定义组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段, type 表示属性类型(可以是String,Boolean,Array)、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。
  • 【data】: 组件的内部数据,和 properties 一同用于组件的模版渲染。
  • 【methods】: 组件的方法,包括事件响应函数和任意的自定义方法
Component({
  //1.组件的需要渲染的数据
  properties: {
    //属性值可以在组件使用时指定
    isShow: {
      type: Boolean,
      value: false
    }
  },
  // 这里是一些组件内部数据
  data: {
  	isValue:false
  },  
  methods: { //页面方法
    preventTouchMove() {},
    closeModel() {
      this.setData({
        isShow: false
      })
      //获取组件内data的数据
      console.log(this.data.isValue)
      //获取渲染的properties的数据
       console.log(this.properties.isValue)
    }
  }
})
  • methods中获取数据,
  • 一种是获取data里的数据: this.data.属性名;
  • 一种是获取 properties 中的属性值: this.properties.属性名。

2>自定义组件的生命周期

  • created:在组件实例进入页面节点树时执行,注意此时不能调用 setData
  • attached:在组件实例进入页面节点树时执行, this.data 已被初始化为组件的当前值,绝大多数初始化工作可以在这个时机进行。
  • ready:在组件布局完成后执行,此时可以获取节点信息(使用 SelectorQuery
  • moved:在组件实例被移动到节点树另一个位置时执行。
  • detached:在组件实例被从页面节点树移除时执行。
Component({
        created:function(){
            // 组件生命周期函数,在组件实例进入页面节点树时执行,
            //注意此时不能调用setData
            console.log('Component-1 >> created');
        },
        attached:function(){
            // 组件生命周期函数,在组件实例进入页面节点树时执行。
            console.log('Component-1 >> attached');
        },
        ready:function(){
            // 在组件布局完成后执行,此时可以获取节点信息
            // (组件生命周期函数-在组件布局完成后执行)
            console.log('Component-1 >> ready');
        },
        moved:function(){
            // 在组件实例被移动到节点树另一个位置时执行
            console.log('Component-1 >> moved');
        },
        detached:function(){
            // 在组件实例被从页面节点树移除时执行
            console.log('Component-1 >> detached');
        },
        lifetimes:{
            // 组件生命周期声明对象,将组件的生命周期收归到该字段进行声明///,
            //原有声明方式仍旧有效,如同时存在两种声明方式
           // ,则lifetimes字段内声明方式优先级最高
            created:function(){
                console.log('Component-1 lifetimes >> created');
            },
            attached:function(){
                console.log('Component-1 lifetimes >> attached');
            },
            ready:function(){
                console.log('Component-1 lifetimes >> ready');
            },
            moved:function(){
                console.log('Component-1 lifetimes >> moved');
            },
            detached:function(){
                console.log('Component-1 lifetimes >> detached');
            }
        },
        pageLifetimes:{
            // 组件所在页面的生命周期声明对象,
            //目前仅支持页面的show和hide两个生命周期
            show:function(){
                console.log('Component-1 pageLifetimes >> Show');
            },
            hide:function(){
                console.log('Component-1 pageLifetimes >> Hide');
            }
        }

    })

2.小程序页面生命周期函数

1>小程序生命周期App.js

App({

  /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {

    var userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.globalData.userInfo = userInfo;
    }

  },
onShow(): function() {
  console.log('onShow监听小程序显示');
},

onHide(): function() {
  console.log('onLaunch监听小程序隐藏');
},

2> 小程序生命周期xxx.js(非App.js)

Page({
  data:{
    },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    console.log("onLoad");
  },
  onReady:function(){
    // 生命周期函数--监听页面初次渲染完成
    console.log("onReady");
  },
  onShow:function(){
    // 生命周期函数--监听页面显示
   console.log("onShow");
  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏
     console.log("onHide");
  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载
     console.log("onUnload");
  },
  onPullDownRefresh: function() {
    // 页面相关事件处理函数--监听用户下拉动作
     console.log("onPullDownRefresh");
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
     console.log("onReachBottom");
  },
   /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

3>生命周期图示



  1. 小程序注册完成后,加载页面,触发onLoad方法,一个页面只会调用一次(刚加载时调用一次);
  2. 页面载入后触发onShow方法,显示页面,每次打开页面都会调用一次 (只要展示这个页面,就会自动加载);
  3. 首次显示页面,会触发onReady方法,渲染页面和样式,一个页面只会调用一次(刚加载时调用一次);
  4. 当小程序后台运行或跳转(wx.navigateTo)到其他页面时,触发onHide方法;
  5. 当小程序从后台进入前台运行或重新载入页面时,触发onShow方法;
  6. 当小程序使用wx.readirectTo()、关闭当前页和返回上一页wx.navigateBack(),会触发onUnload

**

1.小程序

  • 页面加载顺序是先加载onLoad,再是onShow,最后onReady

2.原生JS

  • document.ready 表示文档结构加载完成(不包含图片等非文字媒体文件);ready如果定义多个,都会按渲染顺序执行。
  • window.onload 包含图片等在内的所有元素都加载完成。但是,onload不管定义多少个,只执行一个(最后一个)
  • 加载顺序是先加载ready,后onload,正好和小程序相反

3.Jquery

(document).ready(function())
简写为
(function(){});

3.小程序组件的使用

父组件:

index.json

{
  "usingComponents": {
    "v-select": "/component/select/select"
  }
}

注意事项:
v-select是你定义的组件的名称,后面的是组件所在的位置。 / 单斜杠表示根目录,是绝对路径。
如果控制台报错,出现没找到路径的情况,一定是自己填写的路径不对,认真检查路径代码。

index.wxml

  <v-select select-array='{{selectArray}}'  bind:getNowData='getCurrentTextAction'  current-text="{{current_text}}"></v-elect>
  • 1.select-array 是我在组件中自定义的属性名,这个是和组件所在的 js 中properties中的属性是对应的。在 properties 定义的属性中,属性名采用驼峰写法例如:selectArray。在引入组件的 wxml 中,指定属性值时则对应使用连字符写法例如:select-array='{{selectArray}},selectArray为select组件中所需展示的数据源
  • 2.这里getNowData是自定义的子组件需要触发的事件名,getNowData是引入组件的页面需要获取传过来的数据的自定义的事件名。

index.js

getCurrentTextAction(e){
    let item = e.detail;
    this.setData({
      current_text: item.name, 
      current_type: item.type
    });
  }

子组件:

在component文件目录下,创建一个select文件夹,随后select文件夹下手动创建:select.js、select.json、select.wxml、select.wxss 四个文件。

select.json

{
  "component": true
}

select.wxml

<view class='section-select-box'>
  <view class='select-content' bindtap='selectToggleAction'>
    <view class='select-text'>{{currentText}}</view>
    <image class='select-img' src='../../images/icon_arrow_down.png' animation="{{arrowAnimation}}"></image>
  </view>

  <view class='select-list' wx:if="{{isShow}}">
      <view class='select-list-item' wx:for="{{selectArray}}" data-index="{{index}}" wx:key='{{index}}' bindtap='selectItemAction'>{{item.name}}</view>
  </view>
</view>


select.js

Component({
  /**
 1. 组件的需要渲染的数据
   */
  properties: {
    selectArray: {
      type: Array,
    },
     // 初始时要展示的内容
    currentText:{
      type:String,
    }
  },

  /**
 2. 是组件的内部数据
   */
  data: {
    isShow: false, // 初始option不显示
  },

  /**
 3. 组件的方法列表
   */
  methods: {
    //option的显示与否
    selectToggleAction: function () {
      // 获取当前option显示的状态
      var nowShow = this.data.isShow;

      if (nowShow) {
       
      } else {
        
      }
      this.setData({
        isShow: !nowShow
      })
    },
    //设置内容
    selectItemAction: function (e) {
      // 当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
      var nowData = this.properties.selectArray;
      var index = e.target.dataset.index; // 当前点击的索引
      var current_text = nowData[index].name; // 当前点击的内容
      var current_type = nowData[index].type; // 当前点击的内容
 
      this.setData({
        isShow: false,
        current_text: current_text,
      })
      // 内容更新后,需要把更新的数据传输出去
      var nowDate = {
        id: index,
        name: current_text,
        type: current_type
      }
      // 这里的 getNowData 要和外部的 bind:getNowData ,名称一定要对应
      this.triggerEvent('getNowData', nowDate);
    }
  }
})

传参

//父组件传值
<v-select select-array='{{selectArray}}' current-text="{{current_text}}"></v-elect>

//子组件接收使用properties接收
 properties: {
    selectArray: {
      type: Array,
    }
  }

传事件

//子组件给父组件传递值(通过方法传值) 
// 这里的 getNowData 要和外部的 bind:getNowData ,名称一定要对应
   this.triggerEvent('getNowData', nowDate);

//父组件
<v-select  bind:getNowData='getCurrentTextAction'></v-elect>


文章参考:
https://www.cnblogs.com/xiao-apple36/p/12867092.html
https://www.jianshu.com/p/1b83e00738a9
https://blog.csdn.net/qq_35872379/article/details/87935688

posted @ 2021-01-16 13:07  Leader755  阅读(243)  评论(0编辑  收藏  举报