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

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

注册小程序 - App函数


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


注册App时,一般会做:


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


image.png

image.png

App函数的参数

微信图片_20221013124637.png

判断打开场景


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

image.png

image.png

定义全局APP数据


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

image.png

// 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);
  }
})

生命周期函数


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

微信图片_20221013124834.png微信图片_20221013124907.png

完整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");
  }
})
相关文章
|
13天前
|
Linux Shell 网络安全
【Azure 应用服务】如何来检查App Service上证书的完整性以及在实例中如何查找证书是否存在呢?
【Azure 应用服务】如何来检查App Service上证书的完整性以及在实例中如何查找证书是否存在呢?
|
13天前
【Azure App Services】多次操作App Service伸缩实例遇见限制操作记录
【Azure App Services】多次操作App Service伸缩实例遇见限制操作记录
|
13天前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
8天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
22 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
15天前
|
Java PHP
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
|
16天前
|
小程序 API PHP
零成本搭建个人 APP 和小程序后台
虽然网上也有很多人介绍这俩平台的玩法,但都是 2024 年以前的文章,有些平台最新的修改,和自己踩到的坑而别人没提到的细节,我还是想记录一下。
38 9
|
13天前
|
安全 JavaScript 应用服务中间件
【Azure Function App】如何修改Azure函数应用的默认页面呢?
【Azure Function App】如何修改Azure函数应用的默认页面呢?
|
13天前
|
Python
【Azure 应用服务】App Service的运行状况检查功能失效,一直提示"实例运行不正常"
【Azure 应用服务】App Service的运行状况检查功能失效,一直提示"实例运行不正常"
|
13天前
【Azure Standard Logic App】Workflow积压非常严重的情况下, 执行实例居然不能自动缩放的原因?
【Azure Standard Logic App】Workflow积压非常严重的情况下, 执行实例居然不能自动缩放的原因?
|
13天前
|
开发框架 JavaScript Java
【Azure 应用服务】Azure App Service多实例中,出现某一个实例CPU居高不下的情况,如何重启单个实例呢?
【Azure 应用服务】Azure App Service多实例中,出现某一个实例CPU居高不下的情况,如何重启单个实例呢?
下一篇
DDNS