色婷婷五月综合久久中文_亚洲性爱毛片免费看_21国产精品喷潮白浆_国产精品无码亚洲精品2022_久久久亚洲国产精品性色

Menu
小程序資訊
小程序資訊
零基礎(chǔ)入門篇:微信小程序開發(fā)博客項(xiàng)目《中》
時(shí)間:2016-10-18 22:31:00

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ā)送)

[javascript] view plain copy
  1. //發(fā)起網(wǎng)絡(luò)請(qǐng)求  
  2.    wx.request({  
  3.     url: app.globalData.blog_url+'/article/findHotArticles.action',  
  4.     data:{  
  5.         size:20  
  6.     },  
  7.     success: function(res) {  
  8.       console.log(res.data);  
  9.   
  10.       //把獲取到的結(jié)果放到數(shù)據(jù)層  
  11.       that.setData({  
  12.          list:res.data  
  13.         })  
  14.   
  15.     }  
  16.   })  

7、ok,現(xiàn)在就是展示數(shù)據(jù)的時(shí)候了,打開微信微信官方文檔,主要使用的是view標(biāo)簽,詳情參考文檔

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)留意第三篇

咨詢
微信掃碼咨詢
電話咨詢
400-888-9358