01-小程序开发之App函数

788 阅读3分钟

1.概念

App() 函数是微信小程序的入口函数,它用于注册一个小程序。当小程序启动时,该函数会被调用执行。在 App() 函数中,可以定义一些全局的变量和方法,以及小程序的生命周期函数等。通过在其中定义全局变量和方法,可以方便地在整个小程序中共享数据和调用方法。同时,还可以在其中定义生命周期函数,用于在小程序启动、显示、隐藏等不同情况下执行一些操作。

2.App函数的真实场景

2.1 判断用户进入小程序的场景

App() 函数可以判断用户进入场景,即判断小程序的启动来源。在 App() 函数中,可以通过 onLaunch 生命周期回调的参数 options 来获取用户进入场景的信息。

options 参数是一个包含启动场景的对象,包括以下字段:

scene:场景值,表示用户进入小程序的场景,例如通过扫描小程序码、搜索小程序、从其他应用打开小程序等。如下图,可以根据具体ID来判断进入场景。

query:启动参数,表示用户进入小程序时携带的参数,例如分享参数、自定义参数等。

referrerInfo:来源信息,表示用户从哪个小程序、公众号或 App 进入的小程序。

例如下列代码中:通过判断用户进入场景,就可以对应执行不同的逻辑。

// app.js

App({
  onLaunch(options) {
    // 判断用户进入场景
    switch(options.scene) {
      case 1001:
        console.log('用户从发现栏小程序主入口进入')
        break;
      case 1005:
        console.log('用户从顶部搜索框的搜索结果页进入')
        break;
      case 1011:
        console.log('用户扫描二维码进入')
        break;
      // ...
      default:
        console.log('用户从其他场景进入')
    }
    // 输出启动参数和来源信息
    console.log('启动参数:', options.query)
    console.log('来源信息:', options.referrerInfo)

    // 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: "kobe", level: 100 })
    }
    console.log('打印options',options)

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


    // 3.发送网络请求, 优先请求一些必要的数据
    // wx.request({ url: 'url'})
  }
})

2.2 定义全局数据

App() 函数可以定义全局数据,可以通过 globalData 属性来定义全局数据,从而在小程序的各个页面中共享数据,方便开发者在不同的页面之间共享数据,并减少代码的冗余程度。

globalData 属性是一个对象,用于存储全局数据。在 App() 函数中定义的 globalData 属性,可以在小程序的所有页面中使用,包括页面的 js 文件、wxml 文件和 wxss 文件。

以下代码举例:

在App中定义全局数据

App({
  globalData: {
    userInfo: null,
    token: ''
  }
})
// 在其他js中就可以进行访问
// 在页面的 js 文件中获取全局数据
const app = getApp()
console.log(app.globalData.userInfo)
console.log(app.globalData.token)

// 在页面的 wxml 文件中使用全局数据
<view>{{globalData.userInfo.nickname}}</view>

// 在页面的 wxss 文件中使用全局数据
.text {
  color: red;
  font-size: {{globalData.userInfo.fontSize}}px;
}

2.3 生命周期函数

App() 函数是小程序的全局函数,可以定义小程序的全局配置。其中,生命周期函数是 App() 函数中非常重要的部分,它们在小程序的不同阶段会被自动调用,从而实现不同的逻辑。具体详情可参考文档developers.weixin.qq.com/miniprogram…

  • onLaunch(options):小程序初始化完成时触发,只会触发一次。可以在此函数中进行全局数据的初始化、网络请求等操作。
  • onShow(options):小程序启动或从后台进入前台显示时触发。可以在此函数中获取用户进入场景、检查用户登录状态等操作。
  • onHide():小程序从前台进入后台时触发。可以在此函数中进行页面或全局数据的存储、网络请求等操作。