小程序自定义组件

ps: 这是对之前小程序自定义键盘搞成组件形式

组件json文件声明

{
  "components": true,
  "usingComponents": {}
}

Component({
  behaviors: [],
  properties: {
  },

  data: {
  
  },

    lifetimes: {
      created: function () {
        console.log('created'); this.setData({
          status: 'pageReady'
        }) },
      attached: function(){
        console.log('attached')
        // this.setData({
        //   status: 'componentAttached'
        // })
      },
      detached: function(){ console.log('detached') }
    },

    attached: function(){
      console.log('pageattached') 
      // this.setData({
      //   status: 'pageAttached'
      // })
    },
    ready: function () {
      console.log('ready')
      // this.setData({
      //   status: 'pageReady'
      // }) 
      },
    
    pageLifetimes: {
      show: function(){ console.log('show') },
      hide: function(){ console.log('hide') },
      resize: function(){ console.log('resize') }
    },

  methods: {
    
  }
})

自定义组件生命周期

小程序组件的主要生命周期created、attached 、detached

注意的点：1.如果组件是以wx:if载入的不存在运行任何组件的内容包括生命周期包括pageLifetimes（这和if本身的机制有关）2.created组件初始化不能操作setdata；3.如果同时存在lifetimes和components直接lifestyle函数（兼容低版本小程序）重合只执行lifetimes里面的生命函数；4.lifetimes、pageLifetimes、ready：ready为最终执行有效

wxml页面引入

json的配置：

{
  "usingComponents": {
    "car-component": "/components/carNum/carNum"
  }
}

wxml页面标签

<car-component wx:if="{{keyboardFlag}}" prop-warn="{{carWarnFlag}}" bindtransnum="sure" style="width:100%;"></car-component>

组件通信

1.传递的prop在组件properties必须以下列形式声明，否则报错

properties: {
    "propWarn":{
      type: Boolean,
      value: '',
      status: ''
    }
  },

完整代码

目录结构

组件引用页面index.wxml

<!--index.wxml-->
<view class="container">
  <button hidden="{{keyboardFlag}}" bindtap="keyboard">输入车牌号</button>
  <text v-if="{{carStr}}">{{carStr}}</text>
  <car-component wx:if="{{keyboardFlag}}" prop-warn="{{carWarnFlag}}" bindtransnum="sure" style="width:100%;"></car-component>
</view>

<!--index.json-->
{
  "usingComponents": {
    "car-component": "/components/carNum/carNum"
  }
}

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    keyboardFlag: true,
    carWarnFlag: false,
    carStr: ''
  },
  keyboard()
{
  this.setData({
    keyboardFlag: true
  })
},  onLoad: function () {
   
  },
  sure(data) {
    let numArray = data.detail.num
    let result = numArray.every((item) => {
      return item
    })
    if (result) {
      console.log(numArray.join(''))
      this.setData({
        carStr: numArray.join(''),
        carWarnFlag: false,
        keyboardFlag: false
      })
    }else{
      this.setData({
        carWarnFlag: true,
        keyboardFlag: true
      })
    }
  },
  
})

自定义组件

// components/carNum/carNum.js
Component({
  behaviors: [],

  properties: {
    "propWarn":{
      type: Boolean,
      value: '',
      status: ''
    }
  },

  data: {
    arrProvience: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'],
    arrNumber: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
    arrCaptainOne: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
    arrCaptainTwo: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
    arrCaptainThree: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
    activeIndex: 0,
    choosedArr: new Array(7),
  },

    lifetimes: {
      created: function () {
        console.log('created'); this.setData({
          status: 'pageReady'
        }) },
      attached: function(){
        console.log('attached')
        // this.setData({
        //   status: 'componentAttached'
        // })
      },
      detached: function(){ console.log('detached') }
    },

    attached: function(){
      console.log('pageattached') 
      // this.setData({
      //   status: 'pageAttached'
      // })
    },
    ready: function () {
      console.log('ready')
      // this.setData({
      //   status: 'pageReady'
      // }) 
      },
    
    pageLifetimes: {
      show: function(){ console.log('show') },
      hide: function(){ console.log('hide') },
      resize: function(){ console.log('resize') }
    },

  methods: {
    activeNum(e) {
      console.log(e.currentTarget.dataset.index)
      this.data.activeIndex = e.currentTarget.dataset.index
      this.setData({
        activeIndex: this.data.activeIndex
      })
    },
    addProvience(e) {
      if (this.data.activeIndex == 1 && !isNaN(Number(e.currentTarget.dataset.value))) {
        return
      }

      this.data.choosedArr[this.data.activeIndex] = e.currentTarget.dataset.value
      if (this.data.activeIndex < 6) {
        this.data.activeIndex = parseInt(this.data.activeIndex) + 1
        // if (!this.data.choosedArr[parseInt(this.data.activeIndex) + 1]){

        // }
      }
      this.setData({
        choosedArr: this.data.choosedArr,
        activeIndex: this.data.activeIndex
      })

      console.log('选择的车牌号', this.data.choosedArr)
    },
    cancel() {
      // 线判断当前是否有选中操作的车牌号
      if (this.data.activeIndex == -1) return

      this.data.choosedArr[this.data.activeIndex] = ''
      if (this.data.activeIndex > 0) {
        this.data.activeIndex = parseInt(this.data.activeIndex) - 1
        // if (!this.data.choosedArr[parseInt(this.data.activeIndex) + 1]){

        // }
      }
      this.setData({
        choosedArr: this.data.choosedArr,
        activeIndex: this.data.activeIndex
      })
    },
    sure(){
      var myEventDetail = { num: this.data.choosedArr} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('transnum', myEventDetail, myEventOption)
    },
  }
})

{
  "components": true,
  "usingComponents": {}
}

<!--components/carNum/carNum.wxml-->
<!-- 车牌号 -->
  <view style="width: 100%;">
    <view class="moduleTitle" style="">填写车牌号</view>
    <view class="moduleTip">为了给您提供更好的服务</view>
    <view class="moduleTip">请正确填写您的车牌</view>
    <view class="carNum">
      <view wx:for="{{7}}" wx:for-index='index' data-index="{{index}}" class="{{index == activeIndex ? 'active' : ''}}" bindtap="activeNum">{{ choosedArr.length > 0 && choosedArr[index] ? choosedArr[index] : '' }}</view>
    </view>
    <view class="moduleTip" style="text-align: left;width:90%;margin-top:15rpx;margin-left: 5%;">例如：京A88888</view>
    <text>{{status}}</text>
    <text hidden="{{!propWarn}}" class="moduleTip" style="text-align: left;width:90%;color:rgba(255,56,61,1);font-size:24rpx;margin-left: 5%;">*您填写的车牌号有误，请重新填写</text>
    <button class="carNumbtn" bindtap="sure">确认</button>
    <view class="keyProvienceboard" hidden="{{activeIndex != 0 || activeIndex == -1}}">
      <view wx:for="{{arrProvience}}" data-value="{{item}}" bindtap="addProvience">{{item}}</view>
      <view style="flex-grow: 1" bindtap="cancel">
        <image src="../../images/back.png" mode="widthFix" style="width: 60rpx;"></image>
      </view>
    </view>
    <view class="keyboard" hidden="{{activeIndex == 0 || activeIndex == -1}}">
      <view class="key numKey">
        <view wx:for="{{arrNumber}}" data-value="{{item}}" bindtap="addProvience" style="{{activeIndex == 1 ? 'color:#cccccc':''}}">{{item}}</view>
      </view>
      <view class="key">
        <view wx:for="{{arrCaptainOne}}" data-value="{{item}}" bindtap="addProvience">{{item}}</view>
      </view>
      <view class="key">
        <view style="width:4%;border:none;visibility: hidden;"></view>
        <view wx:for="{{arrCaptainTwo}}" data-value="{{item}}" bindtap="addProvience">{{item}}</view>
        <view style="width:4%;border:none;visibility: hidden;"></view>
      </view>
      <view class="key" style="display: flex;justify-content: center;">
        <view wx:for="{{arrCaptainThree}}" data-value="{{item}}" bindtap="addProvience">{{item}}</view>
        <view style="width:20%;border:none;background:none;position:relative;" bindtap="cancel">
          <image src="../../images/back2x.png" mode="widthFix" style="width: 70%;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;"></image>
        </view>
      </view>

    </view>
  </view>