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對象的地址
現在進入頁面就可看到控制檯打印接收到的數據了（數據請求也可以這樣發送）
- //發起網絡請求
- 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數據層裏面的數據，
綁定的下拉函數（不做處理）
10、處理樣式，view標籤可以使用CSS3的樣式，並且微信本身也提供一些計算尺寸的方法，也支持樣式選擇器，類選擇器，id選擇器，直接看代碼，編輯我們的blog.wxss
11、現在就可以保存，然後點擊左側的編譯，就完成了列表展示
