微信小程序之豆瓣电影

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

效果图如下：

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

 {

 "pages": [
 "pages/index/index",
 "pages/logs/logs",
 "pages/query/index",
 "pages/moveTop/index"
 ],
 "window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#222",
 "navigationBarTitleText": "豆瓣电影",
 "navigationBarTextStyle": "#fff"
 },
 "tabBar": {
 "backgroundColor": "#222",
 "list": [
 {
 "pagePath": "pages/index/index",
 "text": "当前热映",
 "iconPath": "pages/images/collection-o.png",
 "selectedIconPath": "pages/images/collection.png"
 },
 {
 "pagePath": "pages/moveTop/index",
 "text": "影片排行榜",
 "iconPath": "pages/images/examResult-time.png",
 "selectedIconPath": "pages/images/icon_clock.png"
 },
 {
 "pagePath": "pages/query/index",
 "text": "查询",
 "iconPath": "pages/images/nav_icon.png",
 "selectedIconPath": "pages/images/icon_nav_cell.png"
 }
 ]
 }
 }

 

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

 /**app.wxss**/
 .container {
 height: 100%;
 padding:;
 }

 .list_img {
 float: left;
 width: 120px;
 }

 image {
 width: 100%;
 height: 140px;
 padding: 20px 20px 0 20px;
 }

 .list_info {
 float: left;
 width: 210px;
 height: 140px;
 padding-left: 30px;
 padding-top: 40px;
 }

 .move-item_fontWeight {
 font-weight: bold;
 font-size: 16px;
 }

 .move-item_moveName{
 font-size: 16px;
 }
 .move-item_fontSize {
 font-size: 13px;
 }

 

当前热映部分的代码

 <!--index.wxml-->
 <view class="container">

   <!--轮播图-->
   <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
     <block wx:for="{{imgUrls}}" wx:key="{{item}}">
       <swiper-item>
         <image src="{{item}}" />
       </swiper-item>
     </block>
   </swiper>

   <!--热映列表展示-->
   <block wx:for="{{moves}}" wx:key="{{item}}">
     <view class="list">

       <view class="list_img">
         <image src="{{item.images.medium}}"></image>
       </view>

       <view class="list_info">
         <text class="move-item_fontWeight">片名:</text>
         <text class="move-item_moveName">{{item.title}}\n</text>

         <view>
           <text class="move-item_fontWeight">主演:</text>
           <block wx:for="{{item.casts}}" wx:key="{{index}}">
             <text class="move-item_fontSize">{{item.name}} </text>
           </block>
         </view>

         <view>
           <text class="move-item_fontWeight">导演:</text>
           <block wx:for="{{item.directors}}" wx:key="{{index}}">
             <text class="move-item_fontSize">{{item.name}} </text>
           </block>
         </view>

  <view>
           <text class="move-item_fontWeight">类型:</text>
           <block wx:for="{{item.genres}}" wx:key="{{index}}">
             <text class="move-item_fontSize">{{item}} </text>
           </block>
         </view>

       </view>
     </view>
   </block>

 </view>

 /**index.wxss**/

 swiper-item > image {
   width: 100%;
   height: 200px;
   padding: 0px;
 }

 //index.js
 //获取应用实例
 var app = getApp()
 Page({
   data: {
     motto: 'Hello World',
     imgUrls: [
       '/pages/images/swiper_01.jpg', '/pages/images/swiper_02.jpg', '/pages/images/swiper_03.jpg', '/pages/images/swiper_04.jpg',
     ],
     indicatorDots: true,
     autoplay: true,    // 轮播图自动播放
     circular: true,
     interval: 3000,
     duration: 1000,
     moves:[],   // 当前热映相关数据
   },

   onLoad: function () {
     this.moveList();
   },

   // 加载当前热映电影目录
   moveList() {
     wx.showToast({
       title: '正在加载',
       icon: 'loading',
       duration: 5000
     })
     let thisPage = this;
     wx.request({
       url: 'https://api.douban.com/v2/movie/in_theaters',
       method: 'GET',
       header: {
         "Content-Type": "json"
       },
       success: function (res) {
        thisPage.setData({
          moves:res.data.subjects,
          })
        console.log(res.data.subjects)
        wx.hideLoading();
       },
     })
   },

 })

影片排行榜部分的代码

 <!--index.wxml-->
 <view class="container">

   <!--影片排行榜列表展示-->
   <block wx:for="{{moves}}" wx:key="{{item}}">
     <view class="list">

       <view class="list_img">
         <image src="{{item.images.medium}}"></image>
       </view>

       <view class="list_info">
         <text class="move-item_fontWeight">片名:</text>
         <text class="move-item_moveName">{{item.title}}\n</text>

         <view>
           <text class="move-item_fontWeight">主演:</text>
           <block wx:for="{{item.casts}}" wx:key="{{index}}">
             <text class="move-item_fontSize">{{item.name}} </text>
           </block>
         </view>

         <view>
           <text class="move-item_fontWeight">导演:</text>
           <block wx:for="{{item.directors}}" wx:key="{{index}}">
             <text class="move-item_fontSize">{{item.name}} </text>
           </block>
         </view>

  <view>
           <text class="move-item_fontWeight">类型:</text>
           <block wx:for="{{item.genres}}" wx:key="{{index}}">
             <text class="move-item_fontSize">{{item}} </text>
           </block>
         </view>

       </view>
     </view>
   </block>

 </view>

 //index.js
 //获取应用实例
 var app = getApp()
 Page({
   data: {
     motto: 'Hello World',
     moves: [],   // 当前热映相关数据
   },

   onLoad: function () {
     this.moveList();
   },

   // 加载口碑榜电影目录
   moveList() {
     wx.showToast({
       title: '正在加载',
       icon: 'loading',
       duration: 5000
     })
     let thisPage = this;
     wx.request({
       url: 'https://api.douban.com/v2/movie/top250',
       method:'GET',
       header: {
         "Content-Type": "json"
       },
       success: function (res) {
         thisPage.setData({
           moves: res.data.subjects,
         })
         console.log(res.data.subjects)
         wx.hideLoading();
       },
     })
   },

 })

查询部分的代码

 <!--pages/query/index.wxml-->
 <!--查询-->
 <view class="container page_query">

   <view class="section">
     <input type="text" value="{{searchValue}}" class="searchMove" placeholder="查询片名" auto-focus bindfocus="focusSearch" bindinput="searchActiveChangeinput" />
     <icon type="search" />
   </view>

   <view class="movesList" wx:if="{{isShowQueryMoves}}">
     <block wx:for="{{searchMoves}}" wx:key="item">
       <view class="move-item">
         <text class="item-name" bindtap="showDetailInfo" data-info="{{item}}">{{item.title}}\n</text>
       </view>
     </block>
   </view>

   <view class="classname" wx:if="{{isShowDetailInfo}}">
     <view class="list_img">
       <image src="{{info.images.medium}}"></image>
     </view>

     <view class="list_info">
       <text class="move-item_fontWeight">片名:</text>
       <text class="move-item_moveName">{{info.title}}\n</text>

       <view>
         <text class="move-item_fontWeight">主演:</text>
         <block wx:for="{{info.casts}}" wx:key="{{index}}">
           <text class="move-item_fontSize">{{item.name}} </text>
         </block>
       </view>

       <view>
         <text class="move-item_fontWeight">导演:</text>
         <block wx:for="{{info.directors}}" wx:key="{{index}}">
           <text class="move-item_fontSize">{{item.name}} </text>
         </block>
       </view>

       <view>
         <text class="move-item_fontWeight">类型:</text>
         <block wx:for="{{info.genres}}" wx:key="{{index}}">
           <text class="move-item_fontSize">{{item}} </text>
         </block>
       </view>

     </view>
   </view>
 </view>

 // pages/query/index.js
 Page({
   data: {
     searchValue: '',    // 搜索框的文字
     showClearBtn: false,   // 清除按钮
     searchMoves: [],      // 搜索到的结果
     num: 0,
     info: null,              // 可供点击的查询出来的单个影片名
     isShowQueryMoves:false,    // 默认不显示查询出来的影片信息
     isShowDetailInfo:false,    // 默认不现实单个影片的详细信息
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {

   },

   focusSearch() {
     if (this.data.searchValue) {
       this.setData({
         showClearBtn: true
       })
     }
   },

   //对输入框输入的字符进行查询
   searchActiveChangeinput(e) {
     let thisPage = this;
     const val = e.detail.value;
     this.setData({
       // showClearBtn: val != '' ? true : false,
       searchValue: val,
       num: (this.data.num)++
     })
     if (this.data.num > 35) {
       return;
     }
     wx.request({
       url: 'https://api.douban.com/v2/movie/search',
       data: {
         q: thisPage.data.searchValue,
       },
       method: 'GET',
       header: {
         "Content-Type": "json"
       },
       success: function (res) {

         thisPage.setData({
           searchMoves: res.data.subjects,
           isShowQueryMoves: true,    // 显示查询出来的影片信息

         })
       }
     })
   },

   // 点击查询出来的影片名，显示影片的具体信息
   showDetailInfo(e) {
     this.setData({
       info: e.currentTarget.dataset.info,
       isShowQueryMoves:false,
       isShowDetailInfo:true,
     })
   }
 })

 /* pages/query/index.wxss */

 .page_query {
   min-height: 100%;
   background-color: #666;
 }

 .searchMove {
   width: 200px;
   margin: 10px 0px 20px 60px;
 }

 view>input {
   border: 1px solid #fff;
   border-radius: 15px;
   width: 250px;
   padding: 5px;
   margin: 10px;
   color: #fff;
   display: inline-block;
 }

 view>icon {
   float: right;
   margin: 20px 60px 0 0;
 }
 .move-item {
   border-bottom: 1px solid #999;
 }
 .item-name {
   line-height: 2rem;
   padding: 0.1rem 0.5rem;
 }