微信小程序3-小程序生命周期和组件

微信小程序1-小程序基础,开发工具安装使用
微信小程序2-WXSS,WXS

1.小程序生命周期

    1).微信小程序生命周期

        (1).小程序加载页面会触发onLoad方法，一个页面只会触发一次onLoad
        (2).页面载入后触发onShow方法，显示页面，每次页面在前台显示都会触发此方法
        (3). 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次
        (4). 当小程序进入后台运行或跳转到其他页面时，触发onHide方法
        (5). 关闭当前页会触发onUnload

    2).微信小程序销毁

用户点击返回键或者home键，小程序并不会被销毁，而是进入后台，当用户再次打开小程序的时候小程序就会进入前台。只有当小程序进入后台一段时间后或者系统资源不足的情况下，小程序才会销毁

    3).onShow、onHide简单案例

比如，当小程序切换后台后就要通过onHide监听然后停止播放视频，然后切换小程序的时候通过onShow启动视频播放；当页面初次加载完成就可以请求数据进行渲染，可以使用onReady实现。

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  }

2.小程序组件

    1).checkbox-group和checkbox

//wxml
<view>
<checkbox-group bindchange="btnClick1">
  <block wx:for="{{books}}" wx:key="{{item.value}}">
    <checkbox value="{{item.value}}">{{item.name}}</checkbox>
  </block>
</checkbox-group>
</view>

//ts
  data: {
    books:[
      {value:"1",name:"语文"},
      {value:"2",name:"数学"},
      {value:"3",name:"哲学"}
    ]

  },

  btnClick1() {
    
  }

    2).input

//wxml
<input bindinput="inputAction"  class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />

//ts
 /**
   * 输入框实时回调
   */
  inputAction: function (options) {
    //获取输入框输入的内容
    let value = options.detail.value;
    console.log("输入框输入的内容是 " + value)
  }

    3).ipicker

//wxml
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
    当前选择：{{array[index]}}
    </view>
</picker>

//ts
data: {
    array: ['key1', 'key2', 'key3', 'key4'],
    index: 0,
  },
  bindPickerChange: function (e:any) {
    console.log('picker下拉项发生变化后，下标为：', e.detail.value)
    this.setData({
        index: e.detail.value
    })
}

//wxml
<view class="section">
<view class="section__title">日期选择器</view>
    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
        <view class="picker">
        当前选择: {{date}}
        </view>
    </picker>
</view>

//ts
  data: {
      date: '2016-09-01',
    },
    bindTimeChange: function (e:any) {
      this.setData({
        date: e.detail.value
    })
    }

    4).轮播图swiper

//wxml
<swiper indicator-active-color='#fff' indicator-dots="true" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
  interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="item">
    <swiper-item class="swiper-items">
      <image class="swiper-image" src="{{item}}"></image>
    </swiper-item>
  </block>
</swiper>

//ts
 data: {
      imgs: [
       "https://img.pconline.com.cn/images/photoblog/5/3/1/0/5310413/20103/23/1269348904383_mthumb.jpg",
        "http://ah.anhuinews.com/hs/hsyxhz/202110/W020211012337742177742.jpg",
        "http://www.cnr.cn/ah/jhfc/20210806/W020210806566411029142.png",
      ],

      duration: 2000, // 滑动动画时长
      indicatorDots: true, // 是否显示指示点
      autoplay: true, // 是否自动切换
      interval: 3000, // 自动切换时间间隔
    }

//wxss
swiper {
  position: absolute;
  height: 30%;
  width: 100%;
}
 
.swiper-image {
  height: 100%;
  width: 100%;
  opacity:0.9;
}