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

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

全局组件

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

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

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

usingComponents中注册的组件就是全局组件,在小程序的任意页面都可以引入并使用组件

直接将组件写入页面即可,组件的使用方法和普通组件一致。



App() 小程序初始化方法,必须调用且只调用一次

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

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

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




getApp() 全局唯一App()实例

getApp()上定义的参数为全局参数,都可以在小程序任意页面直接使用,建议将参数添加到globalData上,globalData默认挂载到getApp()身上,在app.js文件内,默认给我们提供了一个globalData对象,该对象就是用来挂载数据或方法的,你也可以直接挂载到getApp(),这个没有特定要求。

案例一

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

案例二

该案例中,直接在globalData创建数据,没有任何挂载,在getApp()中可以直接访问globalData数据

商品详情页调用getApp()

输出结果:




app.js 小程序初始化调用文件

小程序的生命周期一般都写在app.js里面,其实就是小程序初始化的时候,会进入app.js并调用app.js内的属性和方法,例如onLaunchonShow方法等,我们一般会把初始化的方法写到小程序的生命周期(onLaunch等)内部,但其实方法写到App()外也是可以自动调用的,并且调用的顺序比onLaunch更早,请看下面的例子:

并且,写在App()外的属性和方法也是全局只调用一次,有了这个概念后,我们可以利用这个特性做文章,比如:写一个方法UserInfo,在app.jsnew UserInfo(),将UserInfo内的方法挂载到wx实例上就可以做到全局方法调用。

// UserInfo.js
var point = null;
class UserInfo {
    constructor(e = {}){
        point = this;  
        // wx为小程序的全局的wx实例
        const container = wx;
        if(!container.toLogin){
            // 在小程序实例上挂载toLogin ()方法,在页面中可以直接wx.toLogin 调用该方法
            container.toLogin = this.toLogin
        }
    }
    toLogin(){
        console.log('用户登录方法');
    }
}
module.exports = UserInfo
// app.js
import UserInfo from './utils/UserInfo'
new UserInfo() //  小程序启动会自动调用app.js内的方法,该调用的顺序在App()方法之前
App({
  onLaunch() {
    // xxx...
  },
  globalData: {
    userInfo: null,
    testInfo:'测试数据'
  }
})

上面例子中,小程序初始化,app.jsnew UserInfoUserInfo类中将toLogin挂载到了wx,那么全局实例wx身上就有toLogin方法,我们可以在任何页面调用wx.toLogin,如下:

如果toLogin是一个用户登录方法,那么我们就可以在任何页面调用wx.toLogin来唤醒登录。

总结:其实就是可以在app.js中默认挂载一些东西,例如:在小程序启动的时候,直接全局挂载封装好的方法,这些方法可以全局调用



wx 小程序的全局挂载对象

小程序的页面跳转wx.navigateTo为什么可以全局使用,任何页面都能使用wx.navigateTo,其实wx就是微信小程序的全局属性,我们在任何页面都可以打印wx,并且这些wx.xxx的方法都挂载在wx身上

在刚才的案例中,我们将toLogin挂载到wx身上,也就可以使用wx.toLogin调用该方法。

目录
相关文章
|
7月前
|
小程序 API 开发者
小程序弹窗
小程序弹窗
142 0
|
小程序 JavaScript
小程序简单循环列表数据渲染实例
小程序简单循环列表数据渲染实例
91 0
|
7月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
994 0
|
5月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
186 0
|
2月前
|
人工智能 小程序 Python
Python编程小案例——编一个事件提醒弹窗小程序
Python编程小案例——编一个事件提醒弹窗小程序
33 0
|
5月前
|
小程序 API
跨端技术问题之哪些形态可以通过getApp()获取全局App实例
跨端技术问题之哪些形态可以通过getApp()获取全局App实例
|
7月前
|
小程序
【每周一个小技巧】小程序如何获取页面栈内某个页面的实例
【每周一个小技巧】小程序如何获取页面栈内某个页面的实例
61 9
|
JSON 小程序 前端开发
小程序之实例会议OA的首页 (3)
小程序之实例会议OA的首页 (3)
|
小程序 JavaScript 前端开发
微信小程序(十三)小程序弹窗wx.showToast及wx.showModal
我这版的小程序中,没有使用到确定取消那样的弹窗,基本上用到的就是,加载中,成功或者失败那种消息提示类的弹窗。 微信本身给我们提供了一个这样的弹窗wx.showToast(Object object),挺好用的,我也没有再去折腾第三方组件的消息提醒弹窗。
236 0
|
JSON 小程序 前端开发
微信小程序(十四)小程序自定义弹窗组件
上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件。 首先,放一下,最终的效果图:
351 0