小程序的生命周期和本地生活案例(附源码)

小程序的生命周期

1.什么是生命周期

生命周期（Life Cycle）是指一个对象从创建-> 运行-> 销毁的整个阶段，强调的是一个时间段

我们可以把每个小程序运行的过程，也概括为生命周期：

​ 小程序的启动，表示生命周期的开始

​ 小程序的关闭，表示生命周期的结束

​ 中间小程序运行的过程，就是小程序的生命周期

2. 生命周期的分类

在小程序中，生命周期分为两类，分别是：

①应用生命周期

特指小程序从启动-> 运行-> 销毁的过程

②页面生命周期

特指小程序中，每个页面的加载-> 渲染-> 销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大，

应用生命周期

小程序的应用生命周期函数需要在 app.js 中进行声明

App({
  // 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化工作
  onLaunch() {
    // 展示本地存储能力
    // 登录
  },
  // 小程序启动，或从后台进入前台显示时触发
  onShow(options){

  }
  // 小程序从前台进入后台时触发
  onHide(){}
})

页面的生命周期函数

小程序的页面生命周期函数需要在页面的 .js 文件中进行声明

Page({
  onload(options){}  //监听页面加载，一个页面只调用一次
  onShow(){}  //监听页面显示
  onReady(){}  //监听页面初次渲染完成，一个页面只调用1次
  onHide(){}  //监听页面隐藏
  onunload(){}  //监听页面卸载 一个页面只调用1次
})

本地生活案例

项目效果图

原码地址:https://gitee.com/wanghui0708/bendishenghuo
注意：
1，一定要在微信工作平台，配置合法request请求
2，一定要用自己的AppId，如果使用测试号，打开后修改，否则无法正常运行
教程链接：https://blog.csdn.net/idiot_MAN/article/details/127609648

1.设置tabBar

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath":"/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath":"/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我",
        "iconPath":"/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },

2配置导航栏效果

3.首页轮播图效果

• 获取轮播图数据

  Page({
    /**
     * 页面的初始数据
     */
    data: {
      //1- 存放轮播图数据列表
        swiperList:[]
    },
  
  // 2-获取轮播图数据的方法
    getSwiperList(){
       wx.request({
         url:'https://www.escook.cn/slides',
         method:'GET',
         success:(res)=>{
          //  console.log(res)
           this.setData({
             swiperList:res.data
           })
         }
       })
     },
  
  
    /**
     *3- 生命周期函数--监听页面加载
     */
    onLoad(options) {
       this.getSwiperList()
    },
    }）
  

• 轮播图渲染

  <!-- 轮播图 -->
  <swiper indicator-dots 	circular>
     <swiper-item wx:for="{{swiperList}}" wx:key="*this">
        <image src="{{item.image}}" ></image>
     </swiper-item>
  </swiper>
  

• 样式

  /* pages/home/home.wxss */
  swiper{
    height: 300rpx;
  }
  
  swiper image{
    width: 100%;
    height: 100%;
  }
  

4首页九宫格效果

• 获取数据

  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
        // 存放九宫格数据列表
        gridList:[]
    },
    // 获取九宫格数据的方法
    getGridList(){
      wx.request({
        url: 'https://www.escook.cn/categories',
        method:'GET',
        success:(res)=>{
          // console.log(res)
          this.setData({
            gridList:res.data
          })
        }
      })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
       this.getGridList()
    },
  

• 渲染

  <!-- 九宫格 -->
  <view class="grid-list">
   <navigator class="grid-item" wx:for="{{gridList}}" wx:key="*this">
      <image src="{{item.icon}}"></image>
      <text>{{item.name}}</text>
   </navigator>
  </view>
  

• 样式

  /* 九宫格 */
  .grid-list{
    display: flex;
    flex-wrap: wrap;
    border-left:  1rpx solid #efefef;
    border-top:  1rpx solid #efefef;
  }
  
  .grid-item{
    width: 33.33%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right:  1rpx solid #efefef;
    border-bottom:  1rpx solid #efefef;
    /* 怪异盒模型 */
    box-sizing: border-box;
  
  }
  
  .grid-item image{
    width: 60rpx;
    height: 60rpx;
  }
  
  .grid-item text{
    font-size: 24rpx;
    margin-top: 10rpx;
  }
  

商品列表

• 页面导航传参

  //首页
  <navigator url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}" class="grid-item" wx:for="{{gridList}}" wx:key="*this" >
      <image src="{{item.icon}}"></image>
      <text>{{item.name}}</text>
   </navigator>
  

• shoplist页面接收参数并设置导航标题

  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
      query:{}
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.setData({
        query:options
      })
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
      // 设置页面导航标题
      wx.setNavigationBarTitle({
        title: this.data.query.title,
      })
    },
    })
  

• 根据分类id查找分类下商品

    // 根据传递过来的分类id获取数据列表
    getShopList(){
       wx.request({
         url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
         method:'GET',
         data:{
          _page:this.data.page,
          _limit:this.data.pagesize
         },
         success:(res)=>{
            console.log(res)
            this.setData({
              shopList:res.data,
              total:res.header['X-Total-Count']-0
            })
         }
       })
    },
  

上拉触底加载

下拉刷新