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

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

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

例如，当小程序切换到后台时，它必须通过onHide监听然后停止播放视频，然后切换小程序的时候通过onShow启动视频播放；当页面首次加载时，可以要求渲染数据，可以使用onReady实现。

  /**    * 生命周期函数-监听页面首次渲染    */   onReady() {    },    /**    * 生命周期函数-监视页显示    */   onShow() {    },    /**    * 生命周期函数--监听页面隐藏    */   onHide() {    } 

//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() {        } 

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

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

//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     })     } 

//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/photoblog5/3/1/531043/20103/23/_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;
}