微信小程序踩坑日記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)