微信小程序之豆瓣电影

2023-11-29 20:18:22

此文是学习小程序第二天做出的一个小demo,调用了豆瓣电影的api,但是需要填上自己appId,现在项目的目录如下图：

在这个demo里面，我更改了小程序的navigationBar，设置了最下方的三个tabBar,这是公共的设置需要在app.json里面设置，

 1 {
 2 
 3 "pages": [
 4 "pages/index/index",
 5 "pages/logs/logs",
 6 "pages/query/index",
 7 "pages/moveTop/index"
 8 ],
 9 "window": {
10 "backgroundTextStyle": "light",
11 "navigationBarBackgroundColor": "#222",
12 "navigationBarTitleText": "豆瓣电影",
13 "navigationBarTextStyle": "#fff"
14 },
15 "tabBar": {
16 "backgroundColor": "#222",
17 "list": [
18 {
19 "pagePath": "pages/index/index",
20 "text": "当前热映",
21 "iconPath": "pages/images/collection-o.png",
22 "selectedIconPath": "pages/images/collection.png"
23 },
24 {
25 "pagePath": "pages/moveTop/index",
26 "text": "影片排行榜",
27 "iconPath": "pages/images/examResult-time.png",
28 "selectedIconPath": "pages/images/icon_clock.png"
29 },
30 {
31 "pagePath": "pages/query/index",
32 "text": "查询",
33 "iconPath": "pages/images/nav_icon.png",
34 "selectedIconPath": "pages/images/icon_nav_cell.png"
35 }
36 ]
37 }
38 }

我在做好小程序之后，把几个公共页面的样式抽离出来，放到了app.wxss文件里面

 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.setData({
23         showClearBtn: true
24       })
25     }
26   },
27 
28   //对输入框输入的字符进行查询
29   searchActiveChangeinput(e) {
30     let thisPage = this;
31     const val = e.detail.value;
32     this.setData({
33       // showClearBtn: val != ‘‘ ? true : false,
34       searchValue: val,
35       num: (this.data.num)++
36     })
37     if (this.data.num > 35) {
38       return;
39     }
40     wx.request({
41       url: ‘https://api.douban.com/v2/movie/search‘,
42       data: {
43         q: thisPage.data.searchValue,
44       },
45       method: ‘GET‘,
46       header: {
47         "Content-Type": "json"
48       },
49       success: function (res) {
50 
51         thisPage.setData({
52           searchMoves: res.data.subjects,
53           isShowQueryMoves: true,    // 显示查询出来的影片信息
54           
55         })
56       }
57     })
58   },
59 
60   // 点击查询出来的影片名，显示影片的具体信息
61   showDetailInfo(e) {
62     this.setData({
63       info: e.currentTarget.dataset.info,
64       isShowQueryMoves:false,
65       isShowDetailInfo:true,
66     })
67   }
68 })

 1 /* pages/query/index.wxss */
 2 
 3 .page_query {
 4   min-height: 100%;
 5   background-color: #666;
 6 }
 7 
 8 .searchMove {
 9   width: 200px;
10   margin: 10px 0px 20px 60px;
11 }
12 
13 view>input {
14   border: 1px solid #fff;
15   border-radius: 15px;
16   width: 250px;
17   padding: 5px;
18   margin: 10px;
19   color: #fff;
20   display: inline-block;
21 }
22 
23 view>icon {
24   float: right;
25   margin: 20px 60px 0 0;
26 }
27 .move-item {
28   border-bottom: 1px solid #999;
29 }
30 .item-name {
31   line-height: 2rem;
32   padding: 0.1rem 0.5rem; 
33 }

微信小程序之豆瓣电影

码农公寓

相关文章