当前位置：首页 > news >正文

【小程序入门】App函数注册小程序实例

news 来源：原创 2024/5/8 0:38:12

🍳作者： $\color{#FF0000}{贤蛋大眼萌，一名很普通但不想普通的程序媛}$ 🤳

🙊语录： $\color{#0000FF}{多一些不为什么的坚持}$

📝本文章收录于专栏：小程序从0到放飞自我

PS: 💭 $\color{#ff7f50}{眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂offer，程序员的必备刷题平台--牛客网}$
国庆就是弯道超车的好机会，别人游玩我独醒。

求知无坦途，学问无捷径。👣 $\color{#ff7f50}{一步一个脚印，你走过的路，每一步都算数。}$ 每一次进步都是对自己努力的肯定，不如一起来学习，一起进步吧。传送门🚪刷题神器

App函数注册小程序实例

- 🎉 注册小程序 - App函数
- - App函数的参数
- 🍳 判断打开场景
- 🥩 定义全局APP数据
- 🍬 生命周期函数

🎉 注册小程序 - App函数

每个小程序都需要在 app.js 中调用 App 函数注册小程序实例。在注册时, 可以绑定对应的生命周期函数。App(Object object) | 微信开放文档 (qq.com)

注册App时，一般会做：

判断小程序的进入场景
监听生命周期函数，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中进行登录操作或者请求网络数据；
因为App()实例只有一个，并且是全局共享的（单例对象），所以我们可以将一些共享数据放在这里；

App函数的参数

🍳 判断打开场景

常见的打开场景：群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开。微信开放文档 (qq.com)

🥩 定义全局APP数据

可以在Object中定义全局App的数据。因为小程序是没有类似Vuex这样可以存储数据的容器的，所以我们可以把共享数据存在app.js 中，定义一些其他页面都可以访问的数据。

// pages/my/my.js
Page({
  data: {
    userInfo: {}
  },

  onLoad() {
    // 获取共享的数据: App实例中数据
    // 1.获取app实例对象
    const app = getApp()

    // 2.从app实例对象获取数据
    const token = app.globalData.token
    const userInfo = app.globalData.userInfo
    console.log(token, userInfo);

    // 3.拿到token目的发送网络请求
    
    // 4.将数据展示到界面上面
    // this.data.userInfo = userInfo
    this.setData({ userInfo })
    console.log(this.data.userInfo);
  }
})

🍬 生命周期函数

在生命周期函数中，完成应用程序启动后的初始化操作。

完整app.js代码

// app.js
App({
  // 作用二: 共享数据
  // 数据不是响应式, 这里共享的数据通常是一些固定的数据
  globalData: {
    token: "",
    userInfo: {}
  },
  onLaunch(options) {
    // 0.从本地获取token/userInfo
    const token = wx.getStorageSync("token")
    const userInfo = wx.getStorageSync("userInfo")

    // 1.进行登录操作(判断逻辑)
    if (!token || !userInfo) {
      // 将登录成功的数据, 保存到storage
      console.log("登录操作");
      wx.setStorageSync("token", "kobetoken")
      wx.setStorageSync("userInfo", { nickname: "elva", level: 100 })
    }

    // 2.将获取到数据保存到globalData中
    this.globalData.token = token
    this.globalData.userInfo = userInfo


    // 3.发送网络请求, 优先请求一些必要的数据
    // wx.request({ url: 'url'})
  },
  onShow(options) {
    // 作用一: 判断小程序的进入场景
    console.log("onShow:", options);
  },
  onHide() {
    console.log("onHide");
  }
})