1.嘗試訪問服務端資料
在onLoad函式下添加
wx.request({
url: 'http://... '
})
比想象的簡單很多有沒有
接下來在控制臺列印一下，看看服務器回傳的資料的詳情，
wx.request({
url: 'http://... '
suceess(res){
console.log(res)
}
})
res引數這個引數請不要慌張，就是由服務器傳回來的所有的資料
2.頁面資料系結
接下來需要進行資料系結，這里可能會出現this指代不明的情況，原因是上面又有一層succes函式，
對應的解決方法是使用箭頭函式，箭頭函式會使函式體里的this為箭頭函式上一層函式的this，即 箭頭函式不會創建自己的this,它只會從自己的作用域鏈的上一層繼承this Mdn_arrowfunc
wx.request({
url: app.gBaseUrl + 'in_theaters?start=0&count=3',
success:(res)=>{
console.log(res)
this.setData({
inTheaters:res.data.subjects
})
}
})
在data下
data: {
inTheaters:[]
},
這一步只是系結到頁面上，最終需要把資料傳入組件進行顯示，所以需要進一步資料系結，
這個頁面的組件有movie-list和內嵌于他的movie，需要把資料傳進去，
3.資料系結組件成功顯示
步驟1：在js檔案下先自定義屬性
在components/movie-list/index.js下的Component下
properties: {
title: String,
movies: Array
},
components/movie/index.js下
properties: {
movie:Object
}
步驟2：在wxml下把屬性的值傳進去
movies.wxml
<movie-list title = "正在上映" movies="{{inTheaters}}" f-class="movie-list" />
<movie-list title="即將上映" movies="{{comingSoon}}" f-class="movie-list" />
<movie-list title="豆瓣TOP250" movies="{{top250}}" f-class="movie-list" />
可以看出 movies屬性，titile屬性都被賦值
movie-list組件的index.wxml
<view class="container f-class">
<view class = "title-container">
<text>{{title}}</text>
<text class="more-content">更多 ></text>
</view>
<view class="movie-container">
<block wx:for="{{movies}}" wx:key = "index">
<movie movie="{{item}}" />
</block>
</view>
</view>
這一步也同時通過item把資料傳進了movie
最后一個movie的wxml直接對資料展示即可，不再傳遞到別的組件/頁面，
<view class="container">
<image class="poster" src = "{{movie.images.large}}"></image>
<text class="title">{{movie.title}}</text>
<view class="rate-container">
<l-rate inActive-color="blue" active-color="yellow" disabled="{{true}}" size="22" score = "{{movie.rating.stars}}/10"/>
<text class="score">{{movie.rating.average}}</text>
</view>
</view>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/274430.html
標籤：其他
上一篇：在多人音視頻聊天中插入現場直播