关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

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

发布时间:2023-06-29 23:00:28

全局组件

微信小程序组件关系中,父组件使用子组件需要在父组件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调用该方法。


/template/Home/leiyu/PC/Static