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