您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

微信小程序生命周期以及创建项目

5.小程序生命周期

他分为应用生命周期和页面生命周期

5-1.应用生命周期:

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

在这里插入图片描述

onLaunch : 应用第一次启动就会触发的事件

作用:在应用第一次启动的时候就能拿到用户信息

onShow : 应用 被用户看到;

作用:当应用的数据或者页面效果 发生改变 重置

onHide : 应用 被隐藏

作用: //暂停或者清除定时器

onError :应用的代码发生报错就还会触发

作用:在应用发生代码报错的时候,收集错误信息,通过异步请求,将错误信息发送给后台

onPageNotFound :页面找不到就会触发

注意:应用第一次启动的时候,如果找不到第一个入口页面,才会触发

作用:如果页面不存在了 通过js的方式来重新跳转页面 重新跳到第二个页面

不能跳到tabbar和navigator类似

5-2:页面生命周期

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
在这里插入图片描述

// pages/demo18/demo18.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //页面发送异步请求来初始化页面数据
    console.log('onLoad')
  },

 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('onshow')
  },
   /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //页面渲染完毕
    console.log('onready')

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('onhide')
  },

  /**
   * 生命周期函数--监听页面卸载  也是可以通过超链接跳转
   */
  onUnload: function () {
    console.log('onUnload')
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //进行页面数据 效果进行重新修改
    console.log('onPullDownRefresh')
  },

  /**
   * 页面上拉触底事件的处理函数
      需要让页面出现上下滚动
   */
  onReachBottom: function () {
    //上拉下一页数据
    console.log('onReachBottom')
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log('onShareAppMessage')
  },
  //表示页面滚动就可以触发
  onPageScroll(){
    console.log('onPageScroll')
  },
  //页面尺寸发生变化时触发
  //小程序发生横屏竖屏 切换的时候触发
  onResize(){
    console.log('onResize')
  },
  //必须要求当前页面 也是 tabar
  //点击自己的tab item的时候才触发
  onTabItemTap(){
    console.log('onItemTap')
  }
})

注意: onResize触发需要条件

​ 如果想在全局开启横竖屏,需要把以下代码放到app.json中,所有页面都能实现横竖屏,如果想在当前页面使用,就把以下代码放到当前页面的配置文件(xx.json)中

{
"pageOrientation":"auto"
}

点击就可以实现横屏竖屏:

在这里插入图片描述

onTabItemTap触发需要的条件:

必须要求当前页面 也是 tabar,点击自己的tab item的时候才触发

在全局配置app.json里多复制一份,头部会出现一个图标点击就会触发这个方法

在这里插入图片描述

小程序生命周期图解:

在这里插入图片描述


小程序第三方框架

1.腾讯 wepy 类似 vue

2.美团 mpvue 类似 vue

3.京东 taro 类似 react

4.滴滴 chameleon

5uni-app 类似 vue


6.项目搭建

6-1.新建⼩程序项⽬

​ 填入自己的appid

6-2.搭建⽬录结构
在这里插入图片描述

6-3.搭建项⽬的⻚⾯

在这里插入图片描述

6-4.引⼊字体图标

​ 1.打开阿⾥巴巴字体图标⽹站

​ 2.选择的图标加入购物车

​ 3.添加⾄项⽬

在这里插入图片描述
在这里插入图片描述

​ 4.获取到在线链接复制到浏览器把内容复制下来,在style文件夹里建一个 iconfont.wxss,把内容放进去

​ 5.在全局样式中引入

在这里插入图片描述

6.页面中直接写 类名就可以

在这里插入图片描述
总结:

  • 我学习了微信小程序的生命周期
  • 还学了项目的搭建;
  • 小程序的基础终于完了,开始项目了,希望能帮到大家,作者创作不易,欢迎回访,互相学习;

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进