微信小程序--搜索电影app（续）

关注

原创最新推荐文章于 2025-11-09 15:50:29 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

微信小程序开发课程学习总结（关于电影的内容） 微信小程序开发课程学习总结（关于电影的内容）最终效果课程学习网址让我们开始第一步一堆页面简介app.js 文件app.json文件app.wxss文件好了正式开始第一个页面新闻详情页面电影模块关于Template（模板）的说明引言：这个只针对超级萌新没有学过小程序的人，比如我，大佬忽略最终效果由于我懒就不截其他的了，大概效果是这样，总共分两个模块，一个新闻模块，一个电影模块，over. ... 阅读详情

热门推荐页面各个文件代码如下：

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负责人叫我改标题，果然解决！！！感谢！终于解决了，可以发布了！

收录于

微信小程序

微信小程序开发-电影影评小程序 微信小程序电影影评小程序开发步骤阅读详情

微信小程序--搜索电影app（续）

相关推荐