微信小程序之豆瓣电影

此文是学习小程序第二天做出的一个小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;

 }

巴特西

微信小程序之豆瓣电影

最新文章

热门文章