首页 > 编程语言 >微信小程序的全局弹窗以及全局实例

微信小程序的全局弹窗以及全局实例

时间:2023-02-23 22:58:06浏览次数:29  
标签:微信 app getApp 组件 全局 App 弹窗 页面

全局组件

微信小程序组件关系中,父组件使用子组件需要在父组件index.json中引入子组件,然后在父组件页面中使用,这种组件的对应状态是一对一的,一个组件对应一个页面。如果有一个全局弹窗(登录),那么每个页面引入一次组件会非常麻烦,这里就需要封装全局弹窗,在页面直接引入使用即可。

微信小程序提供全局组件,只需要在app.json中引入组件,该组件就会被注册为全局组件,父组件的json文件不需要引入组件即可使用。
在这里插入图片描述

  "usingComponents": {
    "whatStore": "/components/whatStore/index"
  },

usingComponents中注册的组件就是全局组件,在小程序的任意页面都可以引入并使用组件
在这里插入图片描述
直接将组件写入页面即可,组件的使用方法和普通组件一致。


全局实例

App(Object object)
在这里插入图片描述

App()必须在app.js中调用,必须调用并且全局只能调用一次,在App()中有应用的的生命周期。全局函数可以写在App()中,通过getApp()获取App()上挂载的方法。
在这里插入图片描述

// 页面上使用
let app = getApp()
console.log(app.sayHi());  // 全局函数

在这里插入图片描述
可以在App()上挂载登录方法,当用户token过期或者未登录时,通过全局函数配合全局弹窗来发起登录,也可以只调用全局函数默认刷新token


getApp()
在这里插入图片描述

getApp()上定义的参数为全局参数,都可以在小程序任意页面直接使用,建议将参数添加到globalData上。

// A页面
let app = getApp()
app.globalData.params = '全局参数'

// B页面
let app = getApp()
console.log(app.globalData.params )  // 全局参数

标签:微信,app,getApp,组件,全局,App,弹窗,页面
From: https://www.cnblogs.com/wang-fan-w/p/17149755.html

相关文章

  • cnpm全局配置搭建dva-cli脚手架
    (cnpm全局配置搭建dva-cli脚手架&)cnpm全局配置搭建dva-cli脚手架&第一步删除npm配置npmconfigsetproxyhttp://10.0.5.99:80npmconfigsethttps-proxyhttp://......
  • uni-app:微信小程序中用户登录(hbuilderx 3.6.18)
    一,代码:说明:xcxuserinfo是服务端得到用户信息的接口,我们用code作为参数传递给服务端,由服务端得到openid再得到用户信息然后返回<template><view><button......
  • AI人脸检测EasyCVR视频融合平台如何设置视频流全局转码?
    在此前的文章中,我们已经为大家介绍过EasyCVR平台的自动转码功能,该功能具体是指可以在不改变摄像机设置的情况下实现视频流转码播放,如果摄像机的视频编码格式是H.265,利用转......
  • 微信小程序创建项目
    新建项目1、右上角“项目”→“新建项目”,或者(Ctrl+Shift+N)。(图1-1) 2、点击“+”打开创建小程序设置,分别设置用户名、路径、AppID、开发模式。 (图1-2) 3、在右......
  • vue3的element plusd的全局注册的dialog的弹窗空白区域点击无法关闭
    在main.js里面注册//全局修改默认配置,点击空白处不能关闭弹窗app._context.components.ElDialog["props"].closeOnClickModal.default=false//全局修改默认配置,按......
  • JQuery_遍历3_全局each&forof与JQuery_事件绑定1_标准方式
    JQuery_遍历3_全局each&forof遍历1.js的遍历方式for(初始化;循环结束;步长)2.jq......
  • 【Bootstrap】010-全局样式:响应式工具
    目录​​一、说明​​​​二、可用的类​​​​三、打印类​​​​四、测试用例​​​​1、在...上可见​​​​2、在...上隐藏​​一、说明为了加快对移动设备友好的页面开......
  • 【Bootstrap】009-全局样式:辅助类
    目录​​一、情境文本颜色​​​​1、说明​​​​2、演示​​​​代码演示:​​​​运行结果:​​​​3、处理差异​​​​4、向辅助技术传递意义​​​​二、情景背景色​​......
  • 【Bootstrap】008-全局样式:图片
    一、响应式图片1、说明在Bootstrap版本3中,通过为图片添加.img-responsive类可以让图片支持响应式布局。其实质是为图片设置了max-width:100%;、height:auto;和d......
  • matlab 静态变量&全局变量
    https://blog.csdn.net/weixin_36084686/article/details/115830515  Matlab/Simulink中的静态变量和全局变量1、静态变量(persistent)1)Matlab中使用静态变量2、......