微信小程序的全局弹窗以及全局实例
全局组件
微信小程序组件关系中,父组件使用子组件需要在父组件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 ) // 全局参数
42 声望
6 粉丝
推荐阅读
前端换肤,聊一聊主题切换那些事
一些网站通常会提供白天、夜间模式,以及自定义主题等等,这种主题切换也就是本文说的前端换肤。这次案例用的是白天和夜间模式的切换,在做换肤之前,得先知道一件事情:css的变量定义,对变量定义不熟悉的同学请...
兔子先森阅读 248
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...
wuwhs赞 39阅读 4.7k评论 5
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 31阅读 7.1k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 19阅读 2k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.6k评论 10
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 18阅读 7.6k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。