1、添加一些圖片素材(網(wǎng)上找的),復(fù)制到項目的根目錄下面,和pages目錄同級
2、查看微信文檔介紹
3、打開blog文件夾,編輯blog.js,page函數(shù)里面添加對象,data對象表示數(shù)據(jù),即和后臺交互的數(shù)據(jù)都在這里面存儲和展示,onLoad,onReady等函數(shù)是微信在頁面加載時默認存在的函數(shù),我們可以重寫,實現(xiàn)我們自己的邏輯
4、點擊編譯查看對應(yīng)的效果,及函數(shù)加載順序,onLoad、onShow 、onReady的加載順序
5、網(wǎng)絡(luò)請求
打開微信文檔,里面有對應(yīng)的網(wǎng)絡(luò)請求api,wx.request(),接收一個對象,包含我們請求的各種參數(shù)(交互的域名正式環(huán)境有限制,而且需要為https)
6、編輯blog.js,在onLoad函數(shù)里面發(fā)起網(wǎng)絡(luò)請求,接口地址是我測試用的地址,會返回對應(yīng)的數(shù)據(jù)列表,注意的地方是this指向問題,因為是在回調(diào)函數(shù)里面獲取數(shù)據(jù)的,然后需要放到data對象里面,所以需要提前保存this對象的地址
現(xiàn)在進入頁面就可看到控制臺打印接收到的數(shù)據(jù)了(數(shù)據(jù)請求也可以這樣發(fā)送)
8、展示層代碼,使用<block wx:for="{{list}}"> 遍歷文章對象,{{}} 取的是data數(shù)據(jù)層里面的數(shù)據(jù)
綁定的下拉函數(shù)(不做處理)
10、處理樣式,view標簽可以使用css3的樣式,并且微信本身也提供一些計算尺寸的方法,也支持樣式選擇器,類選擇器,id選擇器,直接看代碼,編輯我們的blog.wxss
11、現(xiàn)在就可以保存,然后點擊左側(cè)的編譯,就完成了列表展示
已經(jīng)可以見世人了,碼字不容易,篇幅較長,請留意第三篇