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

时间：2022-10-15 14:30:00 cnr25d121k电阻

安装和使用微信小程序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          {     
       {item.name}}

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

2).input

//wxml

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

3).ipicker

//wxml           当前选择：{     
       {array[index]}}

//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  日期选择器                       当前选择: {     
       {date}}

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

4).轮播图swiper

//wxml

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

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

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

相关文章