1、添加一些圖檔素材（網上找的），複制到項目的根目錄下面，和pages目錄同級
2、檢視微信文檔介紹
3、打開blog檔案夾，編輯blog.js，page函數裡面添加對象，data對象表示資料，即和背景互動的資料都在這裡面存儲和展示，onLoad,onReady等函數是微信在頁面加載時預設存在的函數，我們可以重寫，實作我們自己的邏輯
4、點選編譯檢視對應的效果，及函數加載順序,onLoad、onShow 、onReady的加載順序
5、網絡請求
打開微信文檔，裡面有對應的網絡請求api，wx.request（），接收一個對象，包含我們請求的各種參數（互動的域名正式環境有限制，而且需要為https）
6、編輯blog.js，在onLoad函數裡面發起網絡請求，接口位址是我測試用的位址，會傳回對應的資料清單，注意的地方是this指向問題，因為是在回調函數裡面擷取資料的，然後需要放到data對象裡面，是以需要提前儲存this對象的位址
現在進入頁面就可看到控制台列印接收到的資料了（資料請求也可以這樣發送）
[javascript] view plain copy
//發起網絡請求
wx.request({
url: app.globalData.blog_url+'/article/findHotArticles.action',
data:{
size:20
},
success: function(res) {
console.log(res.data);
//把擷取到的結果放到資料層
that.setData({
list:res.data
})
}
})
7、ok，現在就是展示資料的時候了,打開微信微信官方文檔，主要使用的是view标簽，詳情參考文檔
8、展示層代碼，使用<block wx:for="{{list}}"> 周遊文章對象，{{}} 取的是data資料層裡面的資料，
9、綁定的下拉函數（不做處理）
10、處理樣式，view标簽可以使用CSS3的樣式，并且微信本身也提供一些計算尺寸的方法，也支援樣式選擇器，類選擇器，id選擇器，直接看代碼，編輯我們的blog.wxss
11、現在就可以儲存，然後點選左側的編譯，就完成了清單展示