微信小程序之豆瓣電影
阿新 • • 發佈：2017-11-01
detail != class span inpu lin del inline show
此文是學習小程序第二天做出的一個小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 }
微信小程序之豆瓣電影