实现微信小程序app.js与index.js数据同步

1 问题场景

• 在小程序开发中常常会遇到其他页面需要使用到用户openid的情况，通常是在app.js中onLaunch函数里调用云函数获取openid，然后将其存入为globalData对象里，其他页面通过访问getApp().globalData即可访问openid。
• 但是当index.js需要openid时，如果直接采用上述方式会有问题。

//onLaunch
wx.cloud.callFunction({
	name:'getUser',
    success: res => {
		this.globalData.openid = res.result.openid
	}
})

• 可以看到，调用云函数这个api是典型的异步api，在实际运行中，index.js在访问app.globalData.openid时很可能openid还未被定义或赋值，为了避免这种情况，可以采取回调函数的方法或者promise。本文主要说的是前者。

2 解决方式

• 通过箭头函数
  • 箭头函数有个特性: 函数体内的this 对象就是定义时所在的对象，而不是使用时所在的对象。因此可以在index中定义回调函数，函数内使用this.setData。

//onLaunch
wx.cloud.callFunction({
   name:'getUser',
   success: res => {
   	this.globalData.openid = res.result.openid;
   	if(this.indexCallBack){this.indexCallback()};
   }
})

//index.js(onLoad)
//app = getApp()
if(app.globalData.openid){
	this.setData({
		id:app.globalData.openid
	})
}
else{
   	app.indexCallback=data=>{
    	if(data){
    		this.setData({
				id:data
			})
    	}
  	}
}

在index.js中获取openid，如果获取失败即app.js中的云函数还没完成，就会定义indexCallback函数，该函数定义为app对象的一个方法，其中的this指向的是index.js这个页面，尽管最后是在app.js中调用。

---

• 除了使用箭头函数的特性，也可以利用函数闭包的特性。

//index.js(onLoad)
//app = getApp()
//_id是index.js页面定义在Page函数之外的变量
if(app.globalData.openid){
	this.setData({
		id:app.globalData.openid
	})
}
else{
   	app.indexCallback=function(data){
    	if(data){
    		_id = data;
    	}
  	}
}

当app.js调用这个函数时，根据作用域链可以访问到_id。