我的一篇部落格講到關於請求資料的優化,現在嘗試引入models進行更好的優化,如果有不清楚的,可以先看下我之前的部落格:

https://blog.csdn.net/zhangzeshan/article/details/83868856

好,接下里開始講關於引入models優化頁面js請求資料的方法:

在根目錄下新建資料夾 models 然後在資料夾下建立頁面的js檔案,比如我的page頁面是classic 那就在資料夾下建立classic.js

//匯入封裝的http.js
import{HTTP}from'http.js的相對路徑'

//定義classic類繼承HTTP 注意大小寫
class ClassicModel extends HTTP{
    //定義方法
    getLatest(sCallback){
        this.request({
            url:'classic頁面請求資料的APIurl',
            success:(res)=>{
                sCallback.(res)//回傳到classic.js中
            }
            
        })
        
    }
}

export{ClassicModel }
 

接下來改寫classic頁面的 class.js檔案,同樣,也是onload生命週期函式,我們將原來的程式碼全部刪掉重寫,還有最上方的匯入js的句子重寫!

//匯入models資料夾中的classic.js下的ClassicModel類
import{ClassicModel}from 'classic.js的相對路徑'
//例項化這個類
let classic =  new ClassicModel()


//接下來找到onload生命週期函式
onload:function(options){
    //呼叫類下面的方法 傳參到類中去接受
    classic.getLatest((res)=>{
        //資料繫結
        this.setData({
            classic:res
        })

    })
}
 

到這邊 可以就拿到API的資料了 只要在wxml中寫上對應的值就可以渲染出來,

具體的可以看我的部落格 小程式學習--點贊元件(支援複用)

https://mp.csdn.net/postedit/83781613