微信小程序之豆瓣电影

 1 /**app.wxss**/
 2 .container {
 3 height: 100%;
 4 padding: 0;
 5 }
 6 
 7 .list_img {
 8 float: left;
 9 width: 120px;
10 }
11 
12 image {
13 width: 100%;
14 height: 140px;
15 padding: 20px 20px 0 20px;
16 }
17 
18 .list_info {
19 float: left;
20 width: 210px;
21 height: 140px;
22 padding-left: 30px;
23 padding-top: 40px;
24 }
25 
26 .move-item_fontWeight {
27 font-weight: bold;
28 font-size: 16px;
29 }
30 
31 .move-item_moveName{
32 font-size: 16px;
33 }
34 .move-item_fontSize {
35 font-size: 13px;
36 }

 1 <!--index.wxml-->
 2 <view class="container">
 3 
 4   <!--轮播图-->
 5   <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 6     <block wx:for="{{imgUrls}}" wx:key="{{item}}">
 7       <swiper-item>
 8         <image src="{{item}}" />
 9       </swiper-item>
10     </block>
11   </swiper>
12 
13   <!--热映列表展示-->
14   <block wx:for="{{moves}}" wx:key="{{item}}">
15     <view class="list">
16 
17       <view class="list_img">
18         <image src="{{item.images.medium}}"></image>
19       </view>
20 
21       <view class="list_info">
22         <text class="move-item_fontWeight">片名:</text>
23         <text class="move-item_moveName">{{item.title}}\n</text>
24 
25         <view>
26           <text class="move-item_fontWeight">主演:</text>
27           <block wx:for="{{item.casts}}" wx:key="{{index}}">
28             <text class="move-item_fontSize">{{item.name}} </text>
29           </block>
30         </view>
31 
32         <view>
33           <text class="move-item_fontWeight">导演:</text>
34           <block wx:for="{{item.directors}}" wx:key="{{index}}">
35             <text class="move-item_fontSize">{{item.name}} </text>
36           </block>
37         </view>
38 
39  <view>
40           <text class="move-item_fontWeight">类型:</text>
41           <block wx:for="{{item.genres}}" wx:key="{{index}}">
42             <text class="move-item_fontSize">{{item}} </text>
43           </block>
44         </view>
45 
46       </view>
47     </view>
48   </block>
49 
50 </view>

1 /**index.wxss**/
2 
3 swiper-item > image {
4   width: 100%;
5   height: 200px;
6   padding: 0px;
7 }

 1 //index.js
 2 //获取应用实例
 3 var app = getApp()
 4 Page({
 5   data: {
 6     motto: \'Hello World\',
 7     imgUrls: [
 8       \'/pages/images/swiper_01.jpg\', \'/pages/images/swiper_02.jpg\', \'/pages/images/swiper_03.jpg\', \'/pages/images/swiper_04.jpg\',
 9     ],
10     indicatorDots: true,
11     autoplay: true,    // 轮播图自动播放
12     circular: true,    
13     interval: 3000,
14     duration: 1000,
15     moves:[],   // 当前热映相关数据
16   },
17 
18   onLoad: function () {
19     this.moveList();
20   },
21 
22   // 加载当前热映电影目录
23   moveList() {
24     wx.showToast({
25       title: \'正在加载\',
26       icon: \'loading\',
27       duration: 5000
28     })
29     let thisPage = this;
30     wx.request({
31       url: \'https://api.douban.com/v2/movie/in_theaters\',
32       method: \'GET\',
33       header: {
34         "Content-Type": "json"
35       },
36       success: function (res) {
37        thisPage.setData({
38          moves:res.data.subjects,
39          })
40        console.log(res.data.subjects)
41        wx.hideLoading();
42       },
43     })
44   },
45 
46 })

 1 <!--index.wxml-->
 2 <view class="container">
 3 
 4   <!--影片排行榜列表展示-->
 5   <block wx:for="{{moves}}" wx:key="{{item}}">
 6     <view class="list">
 7 
 8       <view class="list_img">
 9         <image src="{{item.images.medium}}"></image>
10       </view>
11 
12       <view class="list_info">
13         <text class="move-item_fontWeight">片名:</text>
14         <text class="move-item_moveName">{{item.title}}\n</text>
15 
16         <view>
17           <text class="move-item_fontWeight">主演:</text>
18           <block wx:for="{{item.casts}}" wx:key="{{index}}">
19             <text class="move-item_fontSize">{{item.name}} </text>
20           </block>
21         </view>
22 
23         <view>
24           <text class="move-item_fontWeight">导演:</text>
25           <block wx:for="{{item.directors}}" wx:key="{{index}}">
26             <text class="move-item_fontSize">{{item.name}} </text>
27           </block>
28         </view>
29 
30  <view>
31           <text class="move-item_fontWeight">类型:</text>
32           <block wx:for="{{item.genres}}" wx:key="{{index}}">
33             <text class="move-item_fontSize">{{item}} </text>
34           </block>
35         </view>
36 
37       </view>
38     </view>
39   </block>
40 
41 </view>

 1 //index.js
 2 //获取应用实例
 3 var app = getApp()
 4 Page({
 5   data: {
 6     motto: \'Hello World\',
 7     moves: [],   // 当前热映相关数据
 8   },
 9 
10   onLoad: function () {
11     this.moveList();
12   },
13 
14   // 加载口碑榜电影目录
15   moveList() {
16     wx.showToast({
17       title: \'正在加载\',
18       icon: \'loading\',
19       duration: 5000
20     })
21     let thisPage = this;
22     wx.request({
23       url: \'https://api.douban.com/v2/movie/top250\',
24       method:\'GET\',
25       header: {
26         "Content-Type": "json"
27       },
28       success: function (res) {
29         thisPage.setData({
30           moves: res.data.subjects,
31         })
32         console.log(res.data.subjects)
33         wx.hideLoading();
34       },
35     })
36   },
37 
38 })

 1 <!--pages/query/index.wxml-->
 2 <!--查询-->
 3 <view class="container page_query">
 4 
 5   <view class="section">
 6     <input type="text" value="{{searchValue}}" class="searchMove" placeholder="查询片名" auto-focus bindfocus="focusSearch" bindinput="searchActiveChangeinput" />
 7     <icon type="search" />
 8   </view>
 9 
10   <view class="movesList" wx:if="{{isShowQueryMoves}}">
11     <block wx:for="{{searchMoves}}" wx:key="item">
12       <view class="move-item">
13         <text class="item-name" bindtap="showDetailInfo" data-info="{{item}}">{{item.title}}\n</text>
14       </view>
15     </block>
16   </view>
17 
18   <view class="classname" wx:if="{{isShowDetailInfo}}">
19     <view class="list_img">
20       <image src="{{info.images.medium}}"></image>
21     </view>
22 
23     <view class="list_info">
24       <text class="move-item_fontWeight">片名:</text>
25       <text class="move-item_moveName">{{info.title}}\n</text>
26 
27       <view>
28         <text class="move-item_fontWeight">主演:</text>
29         <block wx:for="{{info.casts}}" wx:key="{{index}}">
30           <text class="move-item_fontSize">{{item.name}} </text>
31         </block>
32       </view>
33 
34       <view>
35         <text class="move-item_fontWeight">导演:</text>
36         <block wx:for="{{info.directors}}" wx:key="{{index}}">
37           <text class="move-item_fontSize">{{item.name}} </text>
38         </block>
39       </view>
40 
41       <view>
42         <text class="move-item_fontWeight">类型:</text>
43         <block wx:for="{{info.genres}}" wx:key="{{index}}">
44           <text class="move-item_fontSize">{{item}} </text>
45         </block>
46       </view>
47 
48     </view>
49   </view>
50 </view>

 1 // pages/query/index.js
 2 Page({
 3   data: {
 4     searchValue: \'\',    // 搜索框的文字
 5     showClearBtn: false,   // 清除按钮
 6     searchMoves: [],      // 搜索到的结果
 7     num: 0,
 8     info: null,              // 可供点击的查询出来的单个影片名
 9     isShowQueryMoves:false,    // 默认不显示查询出来的影片信息
10     isShowDetailInfo:false,    // 默认不现实单个影片的详细信息
11   },
12 
13   /**
14    * 生命周期函数--监听页面加载
15    */
16   onLoad: function (options) {
17 
18   },
19 
20   focusSearch() {
21     if (this.data.searchValue) {
22       this 
                       
                    
                    
 
                      




鲜花




握手




雷人




路过




鸡蛋