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

编程语言 2019-04-03 22:47:20 阅读次数: 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>

 用的图片


猜你喜欢

转载自blog.csdn.net/sinat_34774688/article/details/88999330
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022