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