recommendMovies.wxml：
<view class="wrapper"> <view wx:for="{{topMovies}}" wx:for-item="item"> <view class="content"> <view class="picView"> <image class="pic" src="{{item.images.medium}}" id="{{item.id}}" bindtap="toDetail" /> </view> <view class="info"> <view class="name"> 名称：{{item.title}} </view> <view class="score">{{item.rating.average}}分</view> <view class="type"> 类型： <block wx:for="{{item.genres}}" wx:for-item="type"> {{type}}, <!--注意不要使用<view>，不然调不出效果。。--> </block> </view> <view class="director"> 导演： <block wx:for="{{item.directors}}" wx:for-item="director"> {{director.name}}, </block> </view> <view class="actor"> 演员： <block wx:for="{{item.casts}}" wx:for-item="actor"> {{actor.name}}, </block> </view> <view class="time">年份： {{item.year}}</view> </view> </view> </view> </view>
recommendMovies.wxss：
.wrapper{ padding:0; margin:0; width:100%; height:100%; } .slide-image{ width:750rpx; height:100%; } .content{ width:100%; height:300rpx; padding:10rx; display: flex; flex-direction: row; border-bottom: 2rpx solid #CCCCCC; } .picView{ float:left; padding:20rpx 15rpx; } .pic{ width:210rpx; height:260rpx; } .info{ float:left; display: flex; flex-direction: column; color:#888888; padding-top:20rpx; font-size: 30rpx; } .name{ color:#000; width:100%; font-size: 32rpx; margin-bottom: -19rpx; } .score{ position: relative; width:80rpx; float:right; top:-18rpx; color:#8C5A0D; right:-433rpx; } .type{ display: flex; flex-direction: row; margin-bottom: 10rpx; } .director{ display: flex; flex-direction: row; margin-bottom: 10rpx; } .actor{ margin-bottom: 10rpx; }
recommendMovies.js：
//recommendMovies.js var util = require('../../utils/util.js') Page({ data: { }, onLoad: function () { /* var city = wx.getStorageSync('city'); console.log('只在初次进入此页面时执行一次'); var topMovies = wx.getStorageSync('topMovies'+city); if (!topMovies){ console.log('request'); this.requestTopMovies(); }else{ console.log('storage'); this.setData({ topMovies:topMovies }); } */ }, onShow: function () { /* var city = wx.getStorageSync('city'); */ console.log('每次进入此页面都会执行此函数，适合放需要实时调用页面逻辑的代码'); /*经测试，此处不需要加city特判，因为请求排行榜靠前的电影时不需要加city参数. var topMovies = wx.getStorageSync('topMovies' + city);*/ var topMovies = wx.getStorageSync('topMovies'); if (!topMovies) { console.log('request'); this.requestTopMovies(); } else { console.log('storage'); this.setData({ topMovies: topMovies }); } }, requestTopMovies:function(){ /* console.log('city:' + wx.getStorageSync('city')); var city = wx.getStorageSync('city');*/ var url = "https://api.douban.com/v2/movie/top250"; /** * var data = { city : city //貌似没有这个参数需要传递，结果都一样。 };*/ var that = this; wx.request({ url:url, data:'',//data, header:{ 'content-type':'json'//不要写'aplication/json'，会报400错误。 }, success:function(res){ console.log(res); that.setData({ topMovies:res.data.subjects }); that.saveData(res.data.subjects/*,city*/); } }); }, toDetail:function(event){ wx.navigateTo({//通过 id 请求详情页面 url: '/pages/detail/detail?id='+event.currentTarget.id, }) }, saveData:function(res/*,city*/){ wx.setStorage({ key:'topMovies'/*+city*/, data:res }); } }) recommendMovies.json: { "navigationBarTitleText": "热门电影推荐" } 这里的页面布局基本同第一个页面一致，热门推荐的电影 api 接口地址为：https://api.douban.com/v2/movie/top250。没有city的参数，加上没效果，已试过！可以查看上面的截图框。
要注意的一点时，请求 wx.request 时，header:{ 'conten-type':'json' }不能写成 'application/json' 不然会一直报400错误，应该是版本问题。
详情页面各个文件代码如下：
detail.wxml：
<!--detail.wxml--> <image src="../../assets/imgs/bg.jpg" mode="scaleToFill" /> <view class="wrapper"> <view class="filmIntro"> <view class="filmPic"> <image src="{{filmDetail.images.medium}}" /> </view> <view class="filmInfo"> <view class="name">名称：{{filmDetail.title}}</view> <view class="score">{{filmDetail.rating.average}}分</view> <view class="type"> 类型：<block wx:for="{{filmDetail.genres}}" wx:for-item="type"> {{type}}, </block> </view> <view class="director"> 导演：<block wx:for="{{filmDetail.directors}}" wx:for-item="director"> {{director.name}}, </block> </view> <view class="actor"> 演员：<block wx:for="{{filmDetail.casts}}" wx:for-item="cast"> {{cast.name}}, </block> </view> <view class="time">年份： {{filmDetail.year}}</view> </view> </view> <view class="descrision"> {{filmDetail.summary}} <!--<textarea value="{{filmDetail.summary}}" auto-height focus="true" />有一些文字出不来不知为啥所以没用textarea--> </view> <view class="bottom"> <view class="title">主要参演人员</view> <scroll-view scroll-x bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" class="casts"> <view wx:for="{{filmDetail.casts}}" wx:for-item="cast" class="castsItem"> <view class="castImg"><image src="{{cast.avatars.medium}}" /></view> <view class="castName">{{cast.name}}</view> </view> <view wx:for="{{filmDetail.directors}}" wx:for-item="director" class="castsItem"> <view class="castImg"><image src="{{director.avatars.medium}}" /></view> <view class="castName">{{director.name}}</view> </view> </scroll-view> </view> </view> detail.wxss代码如下： /* detail.wxss */ image{ width:750rpx; height:350rpx; } .wrapper{ padding:0; margin:0; width:750rpx; height:100%; position: absolute; left:0; top:0; } .filmIntro{ width:100%; height:350rpx; } .filmPic{ float:left; width:175rpx; height:300rpx; padding:40rpx 15rpx 10rpx 40rpx; } .filmPic image{ width:175rpx; height:240rpx; border:2rpx solid #fff; } .filmInfo{ float:right; position: relative; width:507rpx; left:-11rpx; top:38rpx; font-size: 0.8rem; color:#fff; } .name{ float:left; margin-bottom:10rpx; font-size: 0.9rem; } .score{ position: absolute; right: -10rpx; color:aqua; } .type{ clear:both; display: flex; flex-direction: row; margin-bottom:6rpx; } .director{ display: flex; flex-direction: row; margin-bottom:6rpx; } .actor{ display: flex; flex-direction: row; margin-bottom:6rpx; } .descrision{ clear:both; width:700rpx; height:346rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 11; -webkit-box-orient: vertical; padding:30rpx 30rpx; font-size: 0.8rem; color:#aaa; border-bottom:18rpx solid #ccc; } .title{ width:100%; font-size: 1rem; padding:10rpx; border-bottom: 2rpx solid #ccc; } .casts{ /*display: flex; flex-direction: row;*/ width:750rpx; white-space: nowrap;/*不换行（放在父元素）*/ border-bottom:22rpx solid #ccc; } .castsItem{ display: inline-block;/*内联块（放在子元素）*/ padding:26rpx; text-align: center;/*文字居中*/ } .castImg>image{ width:180rpx; height:254rpx; } .castName{ font-size: 0.7rem; color:#0ff; } textarea{ width:700rpx; height:350rpx; }detail.js代码如下：
// detail.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this, data = null; var filmId = options.id; console.log('detail\'s id:' + filmId);//获取在首页点击的电影图片的id /* 一开始在首页电影数据中获取详情页数据，后来发现并没有简介的文字部分，所以上官网找到了相应的api来获取详情页数据，通过id获取的，方便许多！不需遍历数组了。 var hotMovies = wx.getStorageSync('hotMovies'); console.log(hotMovies.length); if(hotMovies){ for(var i=0;i<hotMovies.length;i++){ if (hotMovies[i].id == filmId){//遍历电影数据找到符合的就退出。 data = hotMovies[i]; break; } } that.setData({ filmDetail: data }); } */ var name = 'detailInfo' + filmId; var detailInfo = wx.getStorageSync(name);/**获取本地同步数据 */ console.log(detailInfo); if (!detailInfo) { console.log('request'); this.requestDetailInfo(filmId); }else{ console.log('storage'); this.setData({ filmDetail: detailInfo }); } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, requestDetailInfo: function (filmId) { var that = this; var url = 'https://api.douban.com/v2/movie/subject/'+filmId; wx.request({ url: url, data: '', header: { 'content-type': 'json', }, success: function (res) { console.log('detailInfo\'s summary is:' + res.data.summary); console.log(res.data); //return res.data;不起作用，因为是回调函数，异步性。 that.setData({ filmDetail: res.data }); that.saveData(res.data,filmId); } }); }, saveData: function (data,id) { wx.setStorage({ key: 'detailInfo'+id, data: data, }) } })布局就基本同上，主要是底部鼠标控制滑动图片使用了组件 scroll-view 组件，这里是横向滑动，所以必须设置固定高度，还有就是要使得多个元素横向排列不换行，使用之前flex布局不起作用，得在 scroll-view 组件上加属性： white-space: nowrap;/*不换行（放在父元素）*/，在其子元素（横向排布的元素）加属性：display: inline-block;/*内联块（放在子元素）*/。具体见代码。
搜索页面各个文件代码如下：
searchMovies.wxml代码如下：
<view class="wrapper"> <view class="search"> <input bindinput="keyword" placeholder="请输入主演名字" /> <button type="default" bindtap="searchMovies" data-keyword="{{keyword}}">搜索</button><!--data-keyword向函数传参keyword--> </view> <view class="searchText">您要搜索：{{keyword}}</view> <view class="horLine"></view> <view wx:for="{{searchMovies}}" wx:for-item="item"> <view class="content"> <view class="picView"> <image class="pic" src="{{item.images.medium}}" id="{{item.id}}" bindtap="toDetail" /> </view> <view class="info"> <view class="name"> 名称：{{item.title}} </view> <view class="score">{{item.rating.average}}分</view> <view class="type"> 类型： <block wx:for="{{item.genres}}" wx:for-item="type"> {{type}}, <!--注意不要使用<view>，不然调不出效果。。--> </block> </view> <view class="director"> 导演： <block wx:for="{{item.directors}}" wx:for-item="director"> {{director.name}}, </block> </view> <view class="actor"> 演员： <block wx:for="{{item.casts}}" wx:for-item="actor"> {{actor.name}}, </block> </view> <view class="time">年份： {{item.year}}</view> </view> </view> </view> </view> searchMovies.wxss 代码如下： .wrapper{ padding:0; margin:0; width:750rpx; height:100%; } .search{ width:100%; height:92rpx; display: flex; flex-direction: row; } input{ height:1rem; flex-grow: 1; /**剩余空间都给我*/ line-height: 70rpx; border:2rpx solid #ccc; margin:20rpx; border-radius: 10rpx; font-size: 0.8rem; } button{ width:130rpx; height:50rpx; line-height: 50rpx; margin:24rpx 30rpx 0rpx 0rpx; font-size: 0.8rem; } .searchText{ margin-left:20rpx; font-size: 0.8rem; padding-bottom:20rpx; } .horLine{ width:100%; border:10rpx solid #ccc; } .content{ width:100%; height:300rpx; padding:10rx; display: flex; flex-direction: row; border-bottom: 2rpx solid #CCCCCC; } .picView{ float:left; padding:20rpx 15rpx; } .pic{ width:210rpx; height:260rpx; } .info{ float:left; display: flex; flex-direction: column; color:#888888; padding-top:20rpx; font-size: 30rpx; } .name{ color:#000; width:100%; font-size: 32rpx; margin-bottom: -19rpx; } .score{ position: relative; width:80rpx; float:right; top:-18rpx; color:#8C5A0D; right:-433rpx; } .type{ display: flex; flex-direction: row; margin-bottom: 10rpx; } .director{ display: flex; flex-direction: row; margin-bottom: 10rpx; } .actor{ margin-bottom: 10rpx; }searchMovies.js代码如下：
//searchMovies.js var util = require('../../utils/util.js') Page({ data: { }, onLoad: function () { }, searchMovies:function(event){ var that = this; var keyword = event.currentTarget.dataset.keyword; console.log(keyword); var url = 'https://api.douban.com/v2/movie/search?q='+keyword; wx.request({ url:url, data:'', header:{ 'content-type':'json', }, success:function(res){ console.log(res); that.setData({ searchMovies:res.data.subjects }); } }); }, keyword:function(event){ var keyword = event.detail.value;/**获取input输入的值并设置到搜索值 */ this.setData({ keyword:keyword }); }, toDetail:function(event){ console.log(event.currentTarget.id); wx.navigateTo({ url: '/pages/detail/detail?id='+event.currentTarget.id, }); } })searchMovies.json代码如下：
{ "navigationBarTitleText": "电影搜索" } 布局基本都跟第一个页面一样，api 接口地址：https://api.douban.com/v2/movie/search?q=人名。
这里只选了一个参数即人物名字来搜索，你可以自己扩展。
好了，详情请自己参阅代码吧。这篇博文写了好久啊啊。。
尴尬死了，中午写到两点多要发布博文时居然把我博客关闭了，后来联系之后解决之后又被锁了，最后csdn负责人叫我改标题，果然解决！！！感谢！终于解决了，可以发布了！
