本文主要介绍微信小程序全球现状的相关信息。通过示例代码进行了非常详细的介绍，对大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
序
在微信小程序中，App.js的globalData可以作为页面与组件之间传递信息的中间桥梁，包括页面与页面、页面与组件、组件与组件。但是，我们无法及时了解globalData下的变化。在官方默认创建新小程序的情况下，延迟了获取UserInfo的网络操作，所以写了很多不必要的代码。这种情况即使在官方案例中也是存在的，相信你在开发中也会遇到类似的情况。本文将介绍如何解决这类问题。
需求分析
我认为，在没有全局状态管理的情况下，以下情况是我们的常见操作：
在页面和组件的两个生命周期钩子函数OnLoad和Attached中，一些已有的属性是从App的globalData赋给页面或组件中的数据的。
最开始有一些异步的网络请求，获取的数据是全局使用的。起初，这个globalData中可能没有相关属性，直到请求成功，相关属性才会添加到globalData中。此时，来自globalData的Page的赋值操作可能已经完成，但只是未定义。因此，在分配给页面和组件之前，需要进一步判断。如果这些只有一两个简单，但是需要赋值多个页面或者变量，我想你会拒绝，会想办法偷懒。
在一些页面和组件中，从globalData赋值的变量不仅仅用于判断和显示，我们可能还需要根据用户交互改变变量的值，所以在其他页面中，其他组件中的相同变量需要统一改变。
以上情况我们可提出以下几点需求：
最初加载页面和组件时，尽早从globalData获取并分配页面和组件所需的一些属性。
及时获取globalData的某个属性的一些变化，并进行一些后续的相关操作。
在更改页面和组件的值时，其他页面和组件也会以同样的方式进行更改。
以下是需求的原始代码。
//app.js
应用程序({
全局数据：{
userInfo:空
},
onLaunch(){
wx.getSetting({
成功：res={
if(RES . auth setting[‘ scope . userinfo ‘]){
wx.getUserInfo({
成功：res={
this . global data . userinfo=RES . userinfo
//需求2
if(this . userinfoeadycallback){
//这个回调函数的存在意味着page已经执行了onLoad
//没有获取userInfo并赋给page的数据。
//执行这个回调函数，分配给对应的页面。
this . userinfoeadycallback(RES)
}
}
})
}
}
})
}
})
//Pages/索引/index.js
const app=getApp()
页面({
//.
加载(选项){
//需求1
const userInfo=app . global data . userInfo
userInfo this.setData({useInfo})
//需求2
//如果没有获得app.globalData.userInfo
//表示没有执行wx.getUserInfo的回调函数。
//给app添加一个响应回调函数，此时将这个绑定到回调函数。
userInfo | | app . userinfoeadycallback=RES={
this.setData({
用户信息：res.userInfo
})
删除app.userInfoReadyCallback
}
}
})
这是官方小程序案例的代码。我只做了一点点修改。这里我只展示需求2的回调函数，globalData属性从头开始执行页面设置，但并没有意识到回调函数每次都会执行。需求3的代码比较复杂，这里就不展示了。
我们可以思考一下，实现上述需求需要哪些代码。可以发现，需求1和3主要是在页面、组件初始化、globalData属性发生变化时，需要使用this.setData方法，但每次这指向的都是不同的实例。要求2是要有回调函数，回调函数的this也要指向对应的实例，并且这些回调函数要在globalData属性改变时执行。
从时间上看，我们有两个，一个是页面，组件初始化，一个是globalData属性发生变化的时候。然后在第一个时间点，我们可以考虑小程序生命周期的hook函数，onLoad和attached，在这两个时间点执行this.setData的操作。globalData属性的改变是由我们的主动或者用户事件引起的，也就是这个操作可以看作是globalData的一个属性的事件，这个事件发生后，会执行一些写好的回调函数。
从操作对象的角度来看，基本上都是页面和组件this、app.globalData的实例
需求的理论综述
综上所述，在初始化时，我们可以自动做到this.setData(无需手动操作)，保存this(用于事件执行时指向对应的实例)，将对应的回调函数存储为事件(事件为未执行的函数)，必要时主动触发此事件。可以看到，整个流程下来后，我们需要一个跨app、跨页面、跨组件的变量来劫持初始化的hook函数，自动赋值，存储相应的事件，并公开一个由事件触发的接口。
纸上谈兵会觉得练功浅薄永远不会知道
看到这里，相信你已经对全局状态管理有了一定的了解，那么如何实现呢？在这里，我想强调的是，如果你看完这篇文章后对此有了一定的了解，那么你一定要尝试自己实现代码。不管是好是坏，总比不执行好，你在自己的执行中可能收获更多。上面的案例展示了下面简单的实现代码，给了我一个不太理解的想法。下次我会写相关代码实现的说明，应该会有。
//app.js
类别存储区{
构造器(应用程序){
这个[‘event’]={}
this.app=app
}
autoSet(全局数据，实例){
const instanceData={}
for (let prop of globalData){
instance data[prop]=this . app . global data[prop]
常量回调=(新值)={
instance . setdata({[prop]:new value })
instance . watch[prop]instance . watch[prop]。调用(实例，新值)
}
this.addEvent(prop，callBack)
instance.setData(instanceData)
回调(instanceData[prop])
删除实例. watch
删除instance.globalData
}
}
addEvent(eventName，callBack){
this . event[事件名称]=this . event[事件名称] || []
this . event[事件名称]。推送(回拨)
}
分派(事件名称，新值){
this . app . global data[事件名称]=新值
this . event[事件名称]this . event[事件名称]。forEach(item=item(newValue))
}
}
应用程序({
全局数据：{
userInfo:空
},
onLaunch(){
//新建一个实例，保存在小程序app中进行全局调用。
this.store=新商店(this)
wx.getSetting({
成功：res={
if(RES . auth setting[‘ scope . userinfo ‘]){
wx.getUserInfo({
成功：res={
//获取userInfo后，触发事件。
this.store.dispatch(‘userInfo ‘，res.userInfo)
}
})
}
}
})
}
})
//Pages/索引/index.js
const app=getApp()
页面({
//.
数据：{
用户名：空
},
//globalData数组用于自动赋值。
globalData: [‘userInfo’]，
//监听对应的globalData属性，设置回调函数。
观察：{
用户信息(userInfo){
Console.log(‘userInfo已更新’，this)
this . setdata({用户名：用户信息.昵称})
}
},
加载(选项){
//传入这个globalData，和实例，设置这个实例需要的数据，创建一个事件。
app . store . autoset(this . global data，this)
//你想做的其他事情.
}
})
上面的代码没有劫持hook函数，只是在函数的开头执行绑定函数，没有在页面被破坏时释放内存的操作。还有很多可以优化的地方，都留到另一个解释。
摘要
关于微信小程序全球现状的这篇文章就到此为止。有关相关小程序全球状态的更多信息，请搜索Script House之前的文章或继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/article/207572.htm
