最近在学小程序,语法和Vue差不多。使用wx.request请求服务器数据,不需要跨域。
一、使用豆瓣常用的开源接口
正在热映 :https://api.douban.com/v2/movie/in_theaters
即将上映 :https://api.douban.com/v2/movie/coming_soon
TOP 250 :https://api.douban.com/v2/movie/top250
电影详情 :https://api.douban.com/v2/movie/subject/:id
二、html
请求远程数据前显示loading加载按钮,请求数据完成后隐藏按钮。并且使用\n实现换行。
<view class='content' wx:for="{{content}}">
<view class="img">
<image src="{{item.images.large}}" mode="widthFix"></image>
</view>
<view class="text">
<text class='title'>{{item.title}}\n</text>
<text class='summary'>{{item.summary}}\n</text>
<text class='countries'>{{item.countries[0]}}</text>
</view>
</view>
<view>
<loading wx:if="{{show}}">
加载中...
</loading>
</view>
三、js
Page({
data:{
// 数据
content:{},
// 按钮默认显示
show:true
},
// 生命周期
onLoad: function () {
var that = this;
wx.request({
url: "https://api.douban.com/v2/movie/in_theaters",
data: {},
header: {
"Content-Type": "application/json"
},
success: function (res) {
console.log(res.data.subjects);
that.setData({
content: res.data.subjects,
// 隐藏loading按钮
show:false
})
},
});
}
})