一、实现目标
在微信小程序页面显示地图,地图上有若干个标记点(marker),标记点数据来自网络。
因为网络加载数据有延迟,通常情况下,页面的onLoad代码加载不到这些数据,一个实现思路是通过方法回调,在读取到网络数据的时候,回调页面的setData,以在页面上显示数据信息。
所以,关键点是方法回调的实现。
这个思路的灵感来自于新建的微信小程序的示例代码中读取userInfo的过程。
在app.ts中有如下代码:
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
在index.ts中有如下代码:
onLoad() {
//.............
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true,
})
}
}
具体实现是通过typescript的混合类型接口、可选方法。
在接口定义中有基础方法、属性、可选方法,在接口实现代码中事先不实现可选方法,仅实现基础方法,基础方法实现读取网络数据设置属性的功能,读取后,判断可选方法是否存在,如果存在,则回调可选方法,参数是网络数据;在页面onLoad中加载不到网络数据时,定义可选方法的代码。