這篇文章也是參考別人的小程序寫的.侵刪.PS:我討厭別人寫個代碼,既然貼出來了,可是代碼不給全,雖然貼不貼出來,是您自己的事情,但是,您貼出來部分代碼讓別人看了半天,後面的沒有了,您說,讀者是看下去?還是不看呢?僅僅是個人見解,既然選擇發出來,就發全,收費的話您也留個聯繫方式.(下的目錄結構中moveTop本來應該是movieTop的,寫錯了,因爲如何要改的話要修改完,你們寫的時候注意下,保證單詞的正確喲.如有疑問可在下面留言.)
小程序的目錄結構
- pages
- iamges
- liebiao.png
- liebiao_select.png
- like.png
- like_select.png
- shizhong.png
- shizhong_select.png
- index
- index.js
- index.wxss
- index.json
- index.wxml
- moveTop
- index.js
- index.wxss
- index.json
- index.wxml
- query
- index.js
- index.wxss
- index.json
- index.wxml
- logs(這個是日誌文件)
- iamges
- utils
- app.js
- app.json
- app.wxss
首先是全局的配置文件app.json內容
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/query/index",
"pages/moveTop/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#222",
"navigationBarTitleText": "豆瓣電影",
"navigationBarTextStyle": "white"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "當前熱映",
"iconPath": "/pages/images/like.png",
"selectedIconPath": "/pages/images/like_select.png"
},
{
"pagePath": "pages/moveTop/index",
"text": "影片排行榜",
"iconPath": "/pages/images/shizhong.png",
"selectedIconPath": "/pages/images/shizhong_select.png"
},
{
"pagePath": "pages/query/index",
"text": "查詢",
"iconPath": "/pages/images/liebiao.png",
"selectedIconPath": "/pages/images/liebiao_select.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
全局的樣式文件內容app.wxss
/**app.wxss**/
.container {
height: 100%;
padding: 0;
}
.list_img {
float: left;
width: 25%;
}
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文件夾下的index.js內容
var app = getApp()
Page({
data: {
motto: 'Hello World',
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
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: 'http://t.yushu.im/v2/movie/in_theaters',
method: 'GET',
header: {
"Content-Type": "json"
},
success: function(res) {
console.log(res)
thisPage.setData({
moves: res.data.subjects,
})
wx.hideLoading();
},
})
},
})
index文件夾下的app.wxml
<view class="container">
<!--輪播圖-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper>
<!--熱映列表展示-->
<block wx:for="{{moves}}" wx:key="{{item}}">
<view class="list">
<view class="list_img">
<image src="{{item.images.large}}"></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文件夾下的index.wxss
/**index.wxss**/
swiper-item > image {
width: 100%;
height: 200px;
padding: 0px;
}
moviTop下的index.js
//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: 'http://t.yushu.im/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();
},
})
},
})
moviTop下的index.wxml
<!--index.wxml-->
<view class="container">
<!--影片排行榜列表展示-->
<block wx:for="{{moves}}" wx:key="{{item}}">
<view class="list">
<view class="list_img">
<image src="{{item.images.large}}"></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>
query下的文件
index.js
// 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: 'http://t.yushu.im/v2/movie/search',
data: {
q: thisPage.data.searchValue,
},//data中的 q搜索的條件。放在URL後面使用的
method: 'GET',
header: {
"Content-Type": "json"
},
success: function (res) {
console.log(res)
thisPage.setData({
searchMoves: res.data.subjects,
isShowQueryMoves: true, // 顯示查詢出來的影片信息
})
}
})
},
// 點擊查詢出來的影片名,顯示影片的具體信息
showDetailInfo(e) {
this.setData({
info: e.currentTarget.dataset.info,
isShowQueryMoves: false,
isShowDetailInfo: true,
})
}
})
index.wxss
/* 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;
}
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="MoveList" 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.large}}"></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>
用的圖片