全局组件

微信小程序组件关系中,父组件使用子组件需要在父组件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. Go1.20 新版覆盖率方案解读

    玩过Go覆盖率的同学当有所了解,Go的覆盖率方案最初的设计目标仅是针对单测场景,导致其局限性很大.而为了适配更多的场景,行业内各种博客.插件.黑科技介绍也层出不穷.当然,过去我们也开源过Go系统测试覆 ...

  2. Spring01:概述、工厂模式解耦、Spring中的IOC

    四天课程安排 第一天:Spring框架的概述.Spring中基于XML的IOC配置 第二天: Spring中基于注解的IOC和IOC的案例(单表增删改查,持久层随意) 第三天:Spring中的AOP和 ...

  3. CCS选择器 选择器优先级 选择器常见属性

    目录 CSS前戏 1.css语法结构 2.css注释语法 3.引入css的多种方式 CSS基本选择器 1.标签选择器 2.类选择器 3.id选择器 4.通用选择器 CSS组合选择器 1.后代选择器(空 ...

  4. 前端(js部分讲解)

    BOM操作 BOM概念 BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的.可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗 ...

  5. 东拼西凑学java

    前言 随着大环境的影响,互联网寒冬降临,程序员的日子越来越难,搞不好哪天就被噶了,多学点东西也没啥坏处,国内市场java如日中天,出门在外不会写两行java代码,都不好意思说自己是程序员,伪装成一个萌 ...

  6. django 之swagger配置与生成接口文档

    swagger好处不多说,直接上配置步骤 1.安装swagger pip install django-rest-swagger 2.将swagger配置到setting.py文件中 3.在主url. ...

  7. ob-myfreemp3

    网站 aHR0cDovL3Rvb2wubGl1bWluZ3llLmNuL211c2ljLw== 打开之后随便搜一个歌手的名字或歌曲(这里搜林俊杰)  m/api/search,可以看到数据全在这里 全 ...

  8. Java类、对象以及(静态)方法的探讨

    大家好,这是我的第一篇博客.在这里我想跟大家分享一下Java最基础的Class and Object,也就是我们熟说的类和对象,以及对Java方法的探讨. 初学时的我因为没有对这里面的每一行代码思考透 ...

  9. (Java)设计模式:结构型

    前言 这篇博文续接的是 UML建模.设计原则.创建型设计模式.行为型设计模式,有兴趣的可以看一下 3.3.结构型 这些设计模式关注类和对象的组合.将类和对象组合在一起,从而形成更大的结构 * 3.3. ...

  10. [1]SpinalHDL安装环境

    [1]SpinalHDL安装环境 最好的教程是官方文档!不过推荐英文文档 英文版 中文版 一.安装java环境 SpinalHDL相当于是scala的一个包,而scala是运行在jvm上的.所以我们先 ...