全局组件
微信小程序组件关系中,父组件使用子组件需要在父组件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
内的属性和方法,例如onLaunch
、onShow
方法等,我们一般会把初始化的方法写到小程序的生命周期(onLaunch
等)内部,但其实方法写到App()
外也是可以自动调用的,并且调用的顺序比onLaunch
更早,请看下面的例子:
并且,写在App()
外的属性和方法也是全局只调用一次,有了这个概念后,我们可以利用这个特性做文章,比如:写一个方法UserInfo
,在app.js
中new 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.js
内new UserInfo
在UserInfo
类中将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
调用该方法。