jjzjj

微信小程序的生命周期

Lin_25937 2023-04-08 原文

1小程序全局的生命周期

主要有如下四个(在app.js中)
onLaunch 启动-(本地存储,登录)
onShow前台展示-开始播放与运行
onHide后台运行-停止播放与运行)
onError发生错误-监听处理错误)

 onError(){
    console.log("小程序生命周期:onError小程序发送错误")
    // 提示与重启
  },
  onHide(){
    console.log("小程序生命周期:onHide小程序后台运行")
    // 停止播放
  },
  onShow(){
    console.log("小程序生命周期:onShow小程序前台展示")
    // 恢复播放
  },
  onLaunch() {
    console.log("小程序生命周期:onLaunch页面启动")
    // 本地存储,系统信息获取,登录获取code

2.页面的生命周期(局部)

onLoad 加载完-(获取页面传参,初始化,网络请求,本地出错)
onReady首次渲染完毕-(获取节点)
onShow前台显示
onHIde后台运行
onUnload 页面被卸载

* 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("页面生命周期:onLoad加载")
    // 1. 发起网络请求2. 获取页面传递的参数3. 页面本地存4. 初始化
  },  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("页面生命周期:onReady第一次渲染完成")
    // 1. 操作节点(没有window,document.getxxx,document.getElement)
    // 创建一个选中器
    const query = wx.createSelectorQuery()
    // 选中h1节点 获取他的边界
    query.select('.h1').boundingClientRect()
    // 获取窗口的位置信息
    query.selectViewport().scrollOffset();
 
    // 执行命令返回结果
    query.exec(function(res){
      // 获取元素的边界信息,bottom,top ,left,right,height,width
      console.log(res[0]);
      // 窗口信息 scrollHeight  scrollLeft: 0  scrollTop: 0  scrollWidth: 320
      console.log(res[1]);
      
    })
    // create创建Selector选择器,query查询;bounding边界Client客户界面Rect区域
    // Viewport视口,scrollOffset滚动与偏移
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
      console.log("页面生命周期:onShow页面前台显示")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("页面生命周期:onHide后台运行")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log("页面生命周期:onUnload页面被卸载")
    // 当页面被移除页面栈时候执行(redirect会移出,navigateBack移出)
    // 小程序页面栈总共5层
  },

3.固定的回调函数

onPullDownRefresh:下拉刷新

  onPullDownRefresh() {
    console.log("下拉刷新回调函数")
    // 在配置.json中 "enablepullDownRefresh":true
    // wx.stopPullDownRefresh()//停止下拉刷新
  },

onReachBottom:上拉触底
onShareAppMessage:右上角分享

  onShareAppMessage() {
      // 默认以当前页面的截图
      // 实际中,可以网络请求一个数组,从数组随机的获取一组参数
      return {
        title:"送你50元现金红包",
        path:"/pages/yidian/yidian",
        imageUrl:"https://img1.baidu.com/it/u=2192736850,1088345825&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500"
      }
  },

onShareTimeline:分享到朋友圈

// 分享到朋友圈
  onShareTimeline(){
    // 不返回也是有个默认的当前页面效果的
    return {
      title:"给,这是你喜欢的",
      query:"?name=mumu&age=18",
      imageUrl:"https://img1.baidu.com/it/u=2192736850,1088345825&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500"
    }
  },

onPageScroll:页面滚动 e.scrollTop:页面滚动的距离

 onPageScroll(e){
    //  当页面的滚动距离大于100时候显示回到顶部
    if(e.scrollTop>100){
      this.setData({showTop:true})
    }else{
      // 否则隐藏回到顶部
      this.setData({showTop:false})
    }
  },
  // 回到顶部
  goTop(){
    // 页面滚动到0的位置,时间为600毫秒
    wx.pageScrollTo({
      duration: 600,
      scrollTop:0,
    })
  }

onTabitemTap:页面底部栏被点击

4.获取节点信息

在页面创建标签

//wxml页面
<view class="h1">
  中华人民共和国
</view>

在js中构建方法

//js中
onReady() {
    console.log("页面生命周期,onReady第一次渲染完成");
    // 可以操作节点
    //创建一个选中器
    const query = wx.createSelectorQuery()
    //选中h1节点,获取它的边界
    query.select(".h1").boundingClientRect()
    //获取窗口的位置信息
    query.selectViewport().scrollOffset()
    //执行命令返回结果
    query.exec(function(res){
      //获取元素的边界信息 ,bottom,top,left,height,width
      console.log(res[0]);
      //窗口信息 scrollHeight scrollLift scrollTop scrollWidth
      console.log(res[1]);
      //create创建 Selector选择器  query查询 bounding边界 ,Client客户界面 Rect区域
      //Viewport视口 scrollOffset 滚动与偏移
    })
},

5.微信内置api

1.界面
wx.showModal:显示模态框
wx.showToast:显示提示
wx.showLoading:加载提示
wx.setNavigationBarTitle:设置标题栏的文本
wx.setNavigationBarColor:设置标题栏的颜色(背景颜色和字体颜色)
2.网络请求:wx.request()
3.用户头像
4.登录
5.图片与文件

//wxml页面
<image src="{{pic}}" mode="aspectFill" bindtap="downPic"></image>
<button type="warn" bindtap="upImg">上传图片</button>

js配置

//js
upImg(){
    var that  =  this;
    // 选择图片
    // wx.chooseImage({
    // 选择媒体
    wx.chooseMedia({
      count: 1, //媒体数量
      success(res){
        console.log(res)
        // 获取选择的第0个图片临时地址
        var tempFile = res.tempFiles[0].tempFilePath;
        wx.uploadFile({
          filePath: tempFile,
          name: 'file',
          url: 'http://dida100.com/ajax/file.php',
          success:res=>{
            console.log(res);
            // 转换为js对象
            var data = JSON.parse(res.data);
            // 更新图片信息
            that.setData({pic:"http://dida100.com"+data.pic})
          }
        })
      }
    })
  },
  downPic(){
    wx.downloadFile({
      url: this.data.pic,
      success(res){
        console.log(res);
        // 把临时文件保存到相册(需要用户授权)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(){
            // 提示保存成功
            wx.showToast({
              title: '下载图片成功',
              icon:"none"
            })
          }
        })
      }
    })
  },

6.系统信息
7.网络

有关微信小程序的生命周期的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信

  5. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  6. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进

  7. 微信小程序切换云环境 - 2

    在开发微信小程序的时候,我们可能需要开发环境和测试环境,或者其他环境,下面是切换环境的方法。首先需要明确的是:前端的页面代码是不区分环境的,环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud,这个改完是没有用的,因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下,但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表,这里把test-cloud加到这个列表里,需要填写envId和alias,参照cloud1写就行。3、更

  8. Spring Boot中的微信支付(小程序) - 2

    前言微信支付是企业级项目中经常使用到的功能,作为后端开发人员,完整地掌握该技术是十分有必要的。一、申请流程和步骤图1-1注册微信支付账号获取微信小程序APPID获取微信商家的商户ID获取微信商家的API私钥配置微信支付回调地址绑定微信小程序和微信支付的关系搭建SpringBoot工程编写后台支付接口发布部署接口服务项目使用微信小程序或者UniAPP调用微信支付功能支付接口的封装配置jwt或者openid的token派发原生微信小程序完成支付对接二、注册商家2.1商户平台商家或者企业想要通过微信支付来进行商品的销售,必须先通过微信平台(pay.weixin.qq.com)去将商家进行注册。注册成

  9. 微信小程序顶部标题栏与胶囊对齐 - 2

    介绍    最近在做微信小程序时,顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了,在另外一款手机差很多。我在查阅资料后,提出了一种方法解决这个问题,即:在页面onLoad或组件created时,利用微信小程序提供的API,获取系统状态栏高度和胶囊信息,进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证,能做到精准对齐。理论        胶囊样式应该是垂直居中,有1px的border,border-radius为18px。        若要使顶部标题栏与胶囊对齐,则其高度必须是导航栏高度,标题栏内容也要垂直居中,顶部标题栏的外边距或内边距必须是状态栏高度。        如果顶部

  10. ruby - 在 Ruby 中查找周期和范围集差异的有效方法 - 2

    我在Ruby中有很多时间范围:period=Time.parse('8:00am')..Time.parse('8:00pm')incidents=[Time.parse('7:00am')..Time.parse('9:00am'),Time.parse('1:00pm')..Time.parse('3:00pm'),Time.parse('1:30pm')..Time.parse('3:30pm'),Time.parse('7:00pm')..Time.parse('9:00pm'),]我正试图在这段时间内获得一系列无事件block。对于以上内容:[Time.parse('9:00

随机推荐