全局组件

微信小程序组件关系中,父组件使用子组件需要在父组件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 ) // 全局参数

微信小程序的全局弹窗以及全局实例的更多相关文章

  1. 微信小程序app.json文件常用全局配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...

  2. 微信小程序,超能装的实例教程

    序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...

  3. 微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...

  4. 微信小程序封装自定义弹窗

    最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中 ...

  5. 微信小程序弹框提示绑定手环实例

    今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次 ...

  6. 「微信小程序」PHP异步进程async-helper实例详解

    PHP异步进程async-helper实例详解 PHP 的异步进程助手,借助于 AMQP 实现异步执行 PHP 的方法,将一些很耗时.追求高可用.需要重试机制的操作放到异步进程中去执行,将你的 HTT ...

  7. 微信小程序封装http访问网络库实例代码

    之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接 ...

  8. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  10. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. HTTP2 协议长文详解

    一.HTTP2 简介 HTTP2 是一个超文本传输协议,它是 HTTP 协议的第二个版本.HTTP2 主要是基于 google 的 SPDY 协议,SPDY 的关键技术被 HTTP2 采纳了,因此 S ...

  2. nvm下升级npm版本

    1 3445 error path C:\Users\xxx\AppData\Roaming\nvm\v12.18.3\npm.cmd 2 3446 error Refusing to delete ...

  3. ArcObjects SDK开发 017 在ArcObject SDK 中使用Toolbox

    1.Geoprocessor和IGPProcess Geoprocessor是ArcObjects SDK中定义Tool执行器.IGPProcess接口是ArcObjects SDK中定义的ArcTo ...

  4. avue框架 拼接后端返回的数据到table中

    根据要求展示下列详细地址情况: 后端返回的数据: 具体实现步骤: { label: "详细地址", prop: "buildingName", display: ...

  5. 彻底弄懂Javascript模块导入导出

    笔者开始学习Javascript的时候,对模块不太懂,不知道怎么导入模块,导出模块,就胡乱一通试 比如 import xx from 'test.js' 不起作用,就加个括号 import {xx} ...

  6. VSCTF的Recovery

    题目如下: from random import randint from base64 import b64encode def validate(password: str) -> bool ...

  7. 跟光磊学Java-Windows版Java8开发环境搭建

    Java语言核心技术 如果想要开发Java程序/Java项目之前,必须要安装和配置JDK,这里的JDK表示Java8\JDK8,不过下载软件的时候,强烈推荐大家一定要去软件的官网下载,因为官网提供的软 ...

  8. 2022年7月10 第四组 周鹏 CSS的基本认识

    CSS 层叠样式表 网页美观 html相当于原材料,css用来加工好看 如何嵌入? 样式如何显示html元素? 样式通常存储在样式表中 把样式表添加到html元素里 定义CSS方式 1,行内样式,可以 ...

  9. MyBatis四大参数两种写法

    MyBatis四大参数两种写法 1.在主配置文件中,直接写到value值里面 2.四大参数写入单独配置文件 开始是 为了避免以后其他框架冲突 都加个前缀 jdbc. 主要是红色框里的三个部分 自己定义 ...

  10. 分享一个项目中在用的图片处理工具类(图片缩放,旋转,画布格式,字节,image,bitmap转换等)

    using System; using System.Collections.Generic; using System.IO; using System.Text; using System.Dra ...