微信小程序的全局弹窗以及全局实例
全局组件
微信小程序组件关系中,父组件使用子组件需要在父组件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.json文件常用全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...
- 微信小程序,超能装的实例教程
序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...
- 微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...
- 微信小程序封装自定义弹窗
最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中 ...
- 微信小程序弹框提示绑定手环实例
今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次 ...
- 「微信小程序」PHP异步进程async-helper实例详解
PHP异步进程async-helper实例详解 PHP 的异步进程助手,借助于 AMQP 实现异步执行 PHP 的方法,将一些很耗时.追求高可用.需要重试机制的操作放到异步进程中去执行,将你的 HTT ...
- 微信小程序封装http访问网络库实例代码
之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接 ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- CSS伪类使用详解
基本描述 CSS伪类是很常用的功能,主要应用于选择器的关键字,用来改变被选择元素的特殊状态下的样式. 伪类类似于普通CSS类的用法,是对CSS选择器的一种扩展,增强选择器的功能. 目前可用的伪类有大概 ...
- python3 利用当前时间、随机数产生一个唯一的数字作为文件名
一.python3 利用当前时间.随机数产生一个唯一的数字作为文件名 代码如下: #-*-coding:utf-8-*- #python3自动生成文件名 from datetime import * ...
- 使用Google OR-Tools分析过去20年中国金融资产最佳配置组合
前两天,在朋友圈里看到一张截至2022年Q2的金融资产历年收益图如下,图中列举了国内从2005年到2022年近20年主要的金融资产历年收益率,随产生想法分析和验证下面几个问题: 过去20年,基于怎样的 ...
- 搭建漏洞环境及实战——在Linux系统中安装LANMP
LANMP是Linux下Apache.Nginx.mysql和php的应用环境 演示的是WDLinux 命令:wget http://dl.wdlinux.cn/files/lamp_v3.tar.g ...
- Spring IOC官方文档学习笔记(一)之IOC容器概述
1.IOC容器简介 (1) org.springframework.beans 与 org.springframework.context 这两个包是Spring IOC容器的基础,在org.spri ...
- JavaScript:控制跳转:break、continue与标签
在循环结构中,经常需要使用关键字break和continue来控制跳转: 遇到break,就会跳出循环结构,执行循环体后面的代码: 遇到continue,就会跳出本次循环,进入下一次循环: 那么,假如 ...
- JavaScript:操作符:比较运算符及其隐式转换数据类型
不等关系 即大于>:大于等于>=:小于<:小于等于<= 当比较的两个变量,有非数字时,会隐式转换为数字再比较,转换情况同算术运算符: 当两个变量均为字符串时,不会进行转换,而是 ...
- 有关WCH的CH42x以及CH45x选型,常见问题处理方法
南京沁恒微电子的CH45x系列为数码管.按键驱动芯片. CH42x系列为IO扩展芯片.CH422和CH423除了支持的OC数量有一些区别,在单片机的驱动上,并没有任何区别,驱动CH423的代码是可以套 ...
- Centos7下vim最新版本安装
一直以来用的都是vim,因为之前都是系统自带的vim没有研究过怎么自己安装,今天趁着刚装完新系统,顺便装下vim. 同样vim也有两种安装方法: 一.yum安装,centos下安装软件最简单的方法了, ...
- Hive详解(01) - 概念
Hive详解(01) - 概念 hive简介 Hive:由Facebook开源用于解决海量结构化日志的数据统计工具,是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类S ...