【小程序入门】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");
  }
})
相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
507 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
611 1
|
14天前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
54 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
家政服务小程序APP开发,做好上门家政最快的方法是什么?
在家政服务领域,打造成功的平台并非易事。本文分享了三个关键步骤:避免初期盲目投入、采用低成本获客方式、建立有效的阿姨筛选机制。遵循这些方法,可助你避开常见陷阱,成为行业头部平台。
|
21天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
226 3
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
198 1
|
18天前
|
小程序 测试技术
上门家政维修系统软件开发,一套类似啄木鸟维修的小程序APP只要3000你敢信?
在数字化商业时代,一款名为“啄木鸟维修”的小程序 APP 以 3000 元的价格亮相,引发了广泛关注。这款 APP 功能全面,支持自营或入驻模式,提供完善的售后服务和详细的运营策略,开发周期仅需 3-5 天。它是否物超所值,还需用户自行判断,但其在市场中的表现确实引人注目。
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
340 0
|
1月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
516 0

热门文章

最新文章

下一篇
无影云桌面