微信小程序踩坑日记2——实时访问数据库并渲染UI

0. 引言

　　主要讲讲对于实时访问数据库并渲染UI个人解决方法。

　　一开始查到了随让小程序是单线程的，可是有一个基本上是封装的worker线程，至关于能够本身自定义（相似于Android开发里的handler）。个人想法是让这个线程，一直进行wx.request()的数据库访问操做，而后再根据拿到的信息是否变换来决定是否渲染UI。结果发现，worker不支持wx.的这些方法。。。。

　　可是，在以前获取用户登录信息的时候，用到了回调函数（其实就是判断这个函数是否存在，不存在就建立一个，个人理解不知道对不对）。而后，我发现了一个东西。用图来解释一下，就是每当【代码段A】执行的时候，【代码段B】都会被触发。

　　

　　

　　这样的话，只须要设置一个定时器，让它不停的访问数据库，在ws.request()的success方法里，添加这个回调函数，就能够伪装是一直访问数据库，而且只有在数据不一样的时候才会渲染UI。

1. 实现

　　数据库访问代码段

wx.request({
    url: 'https://xxxxxx/xxxx.php',
    data: {},
    header: {'content-type': 'application/json' // 默认值},
    success: (res) => {
        console.log("数据库访问成功")
        if (this.getGoodListCallback) {
            this.getGoodListCallback(res.data)
        }
    },
    fail: (e) => {
        console.log("数据库访问失败")
        console.log(e)
    }
})

　　页面onLoad()里添加代码段

this.queryDB()
// 初始化商品列表
this.getGoodListCallback = res => {
    // 数据不同，更新
    if(res != this.data.res){
        console.log("数据不同，更新");
        this.setData({
            res: res
        })
    }else{
        console.log("不更新");
    }
}
//计时器访问
var that = this    //在计时器里的this指向变换了
this.data.numInterval = setInterval(function() {
    // 查询数据库
    that.queryDB()
}, 3000)