微信小程序之豆瓣电影信息

最新推荐文章于 2023-07-08 14:51:35 发布

月上林梢

最新推荐文章于 2023-07-08 14:51:35 发布

阅读量999

点赞数

分类专栏：学习历程微信小程序文章标签：编码微信小程序豆瓣

学习历程同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

微信小程序

1 篇文章 0 订阅

订阅专栏

这篇文章也是参考别人的小程序写的.侵删.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(这个是日志文件)
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>