概述
详细
代码下载：http://www.demodashi.com/demo/10943.html
一、准备工作
1、注册微信小程序
2、在小程序设置中设置request合法域名
3、将项目导入开发工具即可运行
二、程序实现
1、项目代码截图：
2、主要API：
//获取电影信息
getMovie: function () {
var that = this
var url = "https://api.douban.com/v2/movie/in_theaters";
var params = {
city : "广州"
}; wx.request({
url: url,
data: params,
header: {
"content-type": "json"
},
success: function (res) {
that.setData({
subjects: res.data.subjects
})
},
fail: function (res) { },
complete: function (res) { },
})
},
3、主页面实现html：
<!--index.wxml-->
<swiper indicator-dots="true" indicator-active-color="#2AAC5E" indicator-color="rgba(255, 255, 255, .3)" autoplay="true" interval="5000" duration="1000">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper> <view wx:for="{{subjects}}" wx:for-index="i" wx:for-item="item">
<view class="" bindtap="go2Detail" id="{{item.id}}">
<view class="hor p20">
<view class="">
<image class="icon" src="{{item.images.large}}"></image>
</view>
<view class="detail ml20">
<view class="hor grade">
<view class="">名称：{{item.title}}</view>
<view class="o">{{item.rating.average}}分</view>
</view>
<view class="">类型：{{item.genres}}</view>
<view class="">导演:
<block wx:for="{{item.directors}}" wx:for-item="director">{{director.name}},</block>
</view>
<view class="">演员:
<block wx:for="{{item.casts}}" wx:for-item="cast">{{cast.name}},</block>
</view>
<view class="">年份：{{item.year}}</view>
</view>
</view>
<view class="l"></view>
</view>
</view>
4、主页面实现css：
.slide-image{
width: 100%;
}
5、公用的css：
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.hor{
display: flex;
}
.icon{
width: 200rpx;
height: 270rpx;
}
.p20{
padding: 20rpx;
}
.p30{
padding: 30rpx;
}
.ml20{
margin-left: 20rpx;
}
.grade{
justify-content: space-between;
}
.detail{
display: block;
flex-grow: 1;
}
.l{
border: 1rpx solid #eee;
}
.l2{
border: 5rpx solid #eee;
}
.w{
color: #fff;
}
.o{
color: #F16113;
}
.center{
text-align: center;
margin: 0 auto;
}
.f30{
font-size: 30rpx;
}
6、主页面实现js：
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
imgUrls: [
'../../assets/imgs/1.jpg',
'../../assets/imgs/2.jpg',
'../../assets/imgs/3.jpg'
]
}, onLoad: function () {
console.log('onLoad')
var that = this
that.getMovie() }, //获取电影信息
getMovie: function () {
var that = this
var url = "https://api.douban.com/v2/movie/in_theaters";
var params = {
city : "广州"
}; wx.request({
url: url,
data: params,
header: {
"content-type": "json"
},
success: function (res) {
that.setData({
subjects: res.data.subjects
})
},
fail: function (res) { },
complete: function (res) { },
})
}, //跳转页面
go2Detail: function (event) {
app.go2Detail(event)
}
})
三、运行效果
1、导入到微信web开发者工具中，默认运行就是index页面
2、运行起来的界面如下：
