小程序(二):生命周期和小程序如何传参

微信小程序 · lvlvjs · 于 2个月前 发布 · 165 次阅读

本章节了解小程序的生命周期和小程序如何传参

生命周期

参考文档: 小程序生命周期

小程序的生命周期指一个小程序从创建到销毁的一系列过程,小程序有两种生命周期:通过APP()来注册小程序,通过Page来注册一个页面

小程序的生命周期

小程序应用的生命周期

App()函数用来注册一个小程序。接收一个Objet参数,其指定小程序的生命周期回调等。App()必须在app.js中调用,必须调用且只能调用一次

App({
  onLaunch() {
    // 监听小程序初始化,全局只触发一次
    console.log('监听小程序初始化');
  },
  onShow(){
    // 监听小程序显示,小程序启动时,或从后台进入前台显示时
    console.log('监听小程序显示');
  },
  onHide(){
    // 监听小程序隐藏,小程序从后台进去前台显示时
    console.log('监听小程序隐藏');
  },
  onError(){
    // 错误监听函数,小程序发生脚本错误或者api调用失败时会触发,会带上错误信息
    console.log('错误监听函数');
  },
  onPageNotFound(){
    // 页面不存在监听函数,小程序要打开的页面不存在时触发,会带上页面信息回调该函数
    console.log('页面不存在监听函数');
  },
  // 前后台定义:当用户点击左上角关闭,或者按了设备Home键离开微信,小程序并没有直接销毁,而是进入了后台,当再次进入微信或者再次打开小程序,又会从后台进入前台
})

小程序页面的生命周期

Page()函数用来注册一个页面。接收一个object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等

Page({
  data:{},
    onLoad: function (options) {
	//监听页面加载
    },
    onReady: function () {
	//监听页面初次渲染完成
    },
    onShow: function () {
	//监听页面显示
    },
    onHide: function () {
	//监听页面隐藏
    },
    onUnload: function () {
	//监听页面卸载
    },
})

小程序传参

事件传参

举例子:

wxml文件:传递:在绑定事件的标签上声明 data-参数名(自己起)="{{参数}}"

<view>当前数字:{{count}}</view>
<button type="primary" bindtap="tapHandeler" data-num="{{2}}">事件点击</button>

js文件:获取参数:在事件处理函数中 e.target.dataset.参数名

//定义
Page({
  data:{
    count:0
  }
})
//时间处理函数
 tapHandeler(e) {
   console.log(e)
   this.setData ({
      count:this.data.count+e.target.dataset.num
       })
    },

页面跳转传参

1、wx.navigateTo() :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

举例子:

在要跳转的页面url地址上以key=value的形式传递参数 wxml文件

  <view>
  <button bindtap="navgiatetologs">跳转传参 </button>
  </view>

js文件

   navgiatetologs () {
    wx.navigateTo({
      url: '/pages/logs/logs?id='+2,
    })
  }

接收参数:

在跳转到的页面js文件中的onload()生命周期函数中接收参数

onLoad(options) {
  console.log(options);
}

2、wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。传递和接收参数的用法和wx.navigateTo()一样。

但是需要注意的是:wx.navigateTo和 wx.redirectTo不允许跳转到 tab 所包含的页面,只能用 wx.switchTab跳转。而 wx.switchTab中的 url不能传参数。

使用全局变量

全局变量实际上是定义了一个全局的对象,并在每个页面中引入。

在初始化代码的时候,小程序会读取一个 app.js的文件,在这里我们可以定义我们所需要的全局变量。

 globalData:{
    num:3
  }

然后在需要使用数据的页面中,可以通过 getApp()方法获取到全局应用对象,可以对全局变量进行读取和修改

//获取全局变量
const app = getApp()
var num = app.globalData.num
console.log('获取全局变量',num)

打印结果

获取全局变量的打印结果

使用本地缓存

在A页面进行本地存储数据

//获取全局变量
  onLoad () {
    // 本地存储
    var num = 3
    wx.setStorageSync('num', num)
  },

在B页面获取数据

//获取全局变量
  onLoad () {
  //获取本地存储
  var getnum = wx.getStorageSync('num')
  console.log('本地存储',getnum);
  },

打印结果

本地存储打印结果

自定义组件之间传参

小程序自定义组件创建和使用

共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册