微信小程序之豆瓣电影

效果图：

1.小程序下方的tabBar，属于公共的设置，需要在app.json里面设置

2.引入的文件放置的位置，图片放在images

3.代码

• 当前热映

index/index.wxml

<view class="container">
<!-- 轮播图 -->
  <swiper indicator-dots="{{indicatorDots}}" 
          autoplay="{{autoplay}}"
          interval="{{interval}}"
          duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="imgUrls">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150" />
      </swiper-item>
    </block>
  </swiper>
  <!-- 当前热映  可滚动视图scroll-view -->
  <scroll-view scroll-y style="height: 100%;"
               bindscrolltoupper="upper"
               bindscrolltolower="lower"
               bindscroll="scroll"
               scroll-into-view="{{toView}}"
               scroll-top="{{scrollTop}}">
    <block wx:for="{{movie}}" wx:key="movie">
      <view class="movie">
        <view class="pic">
          <image src="{{item.images.medium}}"></image>
        </view>
        <view class="movie-info">
          <view class="base-info">
            <text>电影名字:{{item.title}}\n导演：{{item.directors[0].name}}\n演员：
          <text wx:for="{{item.casts}}" wx:key="item">{{item.name}} </text></text>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>
</view>

index/index.wxss

page{
  height: 100%;
  font-family: "Microsoft Yahei"
}
.container{
  background-color: #fff;
  min-height: 100%;
  margin-top: 1px;
}
block{
  height: 100%;
}
.pic{
  display: inline-block;
  vertical-align: top;
  height: 100%;
}
.pic image{
  width: 100px;
  height: 150px;
  
}
.movie-info{
  padding-left: 20px;
  display: inline-block;
  height: 100%;
  width:64%;

}
.base-info{
  color: #3a3a3a;
  font-size: 16px;
  padding-top: 20px;
  line-height: 20px;
  height: 100%;
}

index/index.js

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    imgUrls: [
      '/pages/images/1.jpg',
      '/pages/images/2.jpg',
      '/pages/images/3.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  onLoad: function () {
    this.loadMovie();
  },
  loadMovie() {
   wx.showToast({
     title: '正在加载',
     icon:"loading",
     duration:1000
   })
    let thispage = this;
    wx.request({
      url:'https://douban.uieee.com/v2/movie/in_theaters',
      method:'GET',
      header:{'content-Type':'json'},
      success:function (res){
        // console.log(res)
        let subjects=res.data.subjects
        thispage.setData({movie:subjects})
        thispage.setData({imgs:subjects.splice(0,3)})
        // console.log(thispage.data.imgs)
        wx.hideLoading();
      }
    })
  }
})

• 搜索页面，新建目录query,记得在app.json添加pages,并更改tabBar的pagePath

pages/query/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="movesList" 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.medium}}"></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>

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; 
}

pages/query/index.js

Page({
  data: {
    searchValue: '',    // 搜索框的文字
    showClearBtn: false,   // 清除按钮
    searchMoves: [],      // 搜索到的结果
    num: 0,
    info: null,              // 可供点击的查询出来的单个影片名
    isShowQueryMoves:false,    // 默认不显示查询出来的影片信息
    isShowDetailInfo:false,    // 默认不现实单个影片的详细信息
  },
  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: 'https://douban.uieee.com/v2/movie/in_theaters',
      data: {
        q: thisPage.data.searchValue,
      },
      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,
    })
  }
})