这个里面包括了详情和模糊搜索
- app.js 豆瓣接口
globalData: {
url: "http://t.yushu.im/",//主域名
coming: "/v2/movie/coming_soon",//最近上映
theaters: "/v2/movie/in_theaters",//热门
top250: "/v2/movie/top250",//250,
search: "/v2/movie/search",//搜索
subject: "/v2/movie/subject/"//详情
}
- douban.wxml
<view class="box">
<view class="search">
<view class="iconfont icon-fangdajing" bindtap="goSearch"> 搜索</view>
</view>
<view class="content" wx:for='{{list}}'wx:key='{{index}}'>
<view class="header">
<text>{{item.title}}</text>
<text class="right">查看更多 <text class="iconfont icon-chevron-thin-right"></text></text>
</view>
<scroll-view scroll-x="true">
<view class="hot">
<view class="center" wx:for='{{item.move.subjects}}' wx:for-item='k' bindtap="goDetail" data-id="{{k.id}}">
<image src="{{k.images.large}}" />
<view>{{k.original_title}}</view>
<view>评分:{{k.rating.average}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
douban.js
const app = getApp();
const http = require('../../../utils/http.js');
// pages/douban/douban.js
Page({
/**
* 页面的初始数据
*/
data: {
list:{
coming:{},
theaters:{},
top250:{},
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let globalData=app.globalData; //所有的域名
let url=globalData.url;
console.log(url) //主域名
let coming=globalData.coming; //最近上映
let theaters=globalData.theaters //热门上映
let top250=globalData.top250; //top250
//参数1:url,参数2：头部标题,参数3:对应的key,参数4：执行的回调
http.ajaxMove(url+coming,'最近上映','coming',this.setList);
http.ajaxMove(url+theaters,'热门','theaters',this.setList);
http.ajaxMove(url+top250,'排行榜','top250',this.setList);
},
//结构重构
setList(res,title,key){ //重新改变并且刷新数据
this.data.list[key]={
title:title,
move:res
}
this.setData({
list:this.data.list
})
// console.log(this.data.list,"1")
},
goDetail(e){ //去详情
let id=e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/douban1/details/details?id='+id+'',
})
},
goSearch(){
console.log(1)
wx.navigateTo({
url: "/pages/douban1/search/search"
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
})
- douban.wxss
.box {
height: 100%;
width: 100%;
}
.search {
height: 100rpx;
width: 100%;
background: #42bd56;
}
.search .icon-fangdajing {
width: 630rpx;
height: 60rpx;
line-height: 30px;
background: #fff;
margin-left: 8%;
position: relative;
top: 10px;
text-indent: 220rpx;
color: #ccc;
border-radius: 5px;
font-size:33rpx;
}
.content {
height: 530rpx;
width: 100%;
}
.header {
height: 100rpx;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0px 15px;
align-items: center;
box-sizing: border-box;
margin-top:5rpx;
}
.header text {
font-size: 32rpx;
}
.right {
color: #42bd56;
}
.hot {
height: 480rpx;
width: 100%;
display: flex;
justify-content: space-between;
padding:10rpx;
box-sizing: border-box;
align-items: center;
}
.center {
height: 460rpx;
width: 230rpx;
margin: 0rpx 10rpx;
}
.center image {
height: 315rpx;
width: 230rpx;
}
.center view {
text-align: center;
font-size: 32rpx;
line-height: 1.8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-start image{
width:30rpx;
height: 30rpx;
}
- detail.wxml
<!--pages/details/details.wxml-->
<view class="center">
<image src="{{k.images.large}}" />
<view>{{k.original_title}}</view>
<view>评分:{{k.rating.average}}</view>
</view>
- detail.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
k: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let id = options.id;
console.log(id,"1111")
let globalData = app.globalData;
let url = globalData.url;//主域名;
let subject = globalData.subject;//详情接口
let That = this;
wx.request({
url: url + subject + id,
success(res) {
That.setData({
k: res.data
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
}
- detail.wxss
.center{
height:500rpx;
width: 100%；
}
.center image{
height:470rpx;
width:100%;
}
.center view{
margin-left:30rpx;
}
- search.wxml
- 模糊搜索
<view class="box">
<view class="search">
<input type="text" placeholder="请搜索你喜欢的电影" bindinput="allSearch" />
</view>
<view class="center" wx:for="{{searchList}}" wx:for-item="k">
<image src="{{k.images.large}}" />
<view>{{k.original_title}}</view>
<view>评分:{{k.rating.average}}</view>
</view>
</view>
- search.js
// pages/douban1/search/search.js
const app=getApp();
const http=require("../../../utils/http.js")
Page({
/**
* 页面的初始数据
*/
data: {
searchList:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
allSearch(e){
let val=e.detail.value || ""; //获取到input框的内容
let globalData=app.globalData;
let url=globalData.url; //主域名
let search=globalData.search; //搜索接口
http.ajaxMore(`${url+search}?q=${val}`,this.getSearch)
},
getSearch(res){
this.setData({
searchList:res.subjects
})
console.log(res.subjects,"111")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- search.wxss
.box{
height:100%;
width:100%;
}
.search{
height:100rpx;
width:100%;
}
.search input{
height:80rpx;
width:90%;
margin-left:5%;
border:2rpx solid #ccc;
margin-top:10rpx;
border-radius:10rpx;
text-indent:15rpx;
}
.center{
height:500rpx;
width: 100%；
}
.center image{
height:470rpx;
width:100%;
}
.center view{
margin-left:30rpx;
}
