关于豆瓣电影的小程序

最新推荐文章于 2024-04-21 09:56:53 发布

滚动小人人

最新推荐文章于 2024-04-21 09:56:53 发布

阅读量5.4k

点赞数 8

分类专栏：微信小程序学习文章标签：微信小程序豆瓣电影微信小程序项目案例微信小程序源码

本文链接：https://blog.csdn.net/WWW_share8/article/details/79638666

版权

微信小程序学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先声明，这里所用到后台接口是豆瓣提供的，非本人亲自所写

废话不多说直接上代码！

var API_URL ='http://t.yushu.im/v2/movie'//豆瓣的地址
function fetchApi(ty,params){
  return new Promise((resolve,reject)=>{
    wx.request({
      url: `${API_URL}/${ty}`, //仅为示例，并非真实的接口地址
      data:params,
      header: {
        'content-type': 'json' // 默认值
      },
      success: resolve,
      fail:reject 
    })
  })
}
module.exports={
  getList:function(ty,pn){
    return fetchApi(ty,{"start":pn,"count":20}).then(res=>res.data);
  },
  getDetail:function(id){
    return fetchApi("/subject/" + id).then(res => res.data);
  }
}

上面的代码是自己为了方便，在后面调用微信请求时，不用重复写的代码，因为之前，豆瓣屏蔽了微信小程序的访问，所以才改成了现在这个地址。

两个函数是对外暴露，第一个是获取列表页的暴露，第二个是具体到点击某一个时函数。

不校验一定要勾上，一定。

先上一张效果图，好方便大家更好的了解代码

然后再给大家一个我自己的项目目录结构图

先给大家把公共部分的app.json+app.wxss 给大家

{
  "pages": [
    "pages/home/home",
    "pages/coming/coming",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh":true
  },
  "tabBar": {
    "color": "#2DF00F",
    "selectedColor": "#f00",
   "list": [
    {
      "text": "正在热播",
      "iconPath":"image/rey.png",
      "selectedIconPath":"image/reying2.png",
      "pagePath": "pages/home/home"
    },
    {
      "text": "即将上映",
      "iconPath": "image/jx.png",
      "selectedIconPath": "image/jxing.png",
      "pagePath": "pages/coming/coming"
    }
   
  ]
  }
}

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
#item_view{
  display: flex;
}
.left{
  width: 200rpx;
  height: 250rpx;
  margin: 5px 5px;
}
.right{
  width: 500rpx;
  flex-wrap: wrap;
}
.page_load{
  display: flex;
  justify-content: center;
  align-items: center;
}

现在我们先来写正则热播的列表页面的home.wxml

<!--pages/home/home.wxml-->
<block wx:if="{{showLoading}}">
</block>
<block wx:else>
<scroll-view class='sv' scroll-y="true" scroll-top="0" bindscrolltoupper="scroll_top" bindscrolltolower="scroll_bottom" >
    <view wx:for="{{list}}" id='item_view' wx:key="{{index}}" bindtap='xq_tiao' data-id="{{item.id}}">
      <view class='left'>
        <image class='img_tt' src="{{item.images.large}}"></image>
      </view>
      <view class='right'>
          <view class='row'  style='margin-bottom:8px'>
          <text>片名:{{item.original_title}} {{item.year}}</text>
          </view>
          <view class='row'>
          <text>评分:{{item.rating.average}}</text>
          </view>
          <view class='row'>
          <text>导演:<text wx:for="{{item.directors}}" wx:for-item="d" wx:key="{{index}}">{{d.name}}</text></text>
          </view>
          <view class='row'>
          <text>主演:<text wx:for="{{item.casts}}" wx:for-item="c" wx:key="{{index}}">{{c.name}} </text></text>
          </view>
      </view> 
    </view>
    </scroll-view>
</block>

然后再来写home.js

// pages/home/home.js
var api=require('../../utils/api.js');
Page({
  data: {
    pn:1,
    list:[],
    showLoading:true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var self=this;
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading();
      self.setData({
        showLoading: false
      })
    }, 2000)
    api.getList('in_theaters',this.data.pn).then(res=>{
      this.setData({
        list:res.subjects
      })
      // console.log(this.data.list)
    })
  },
  //向上滑动触发加载
  scroll_bottom:function(){
    var self = this;
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading();
      self.setData({
        showLoading: false
      })
    }, 2000)
    api.getList('in_theaters', this.data.pn++).then(res => {
      this.setData({
        list: res.subjects
      })
     // console.log(this.data.list)
    })

  },
  //向下滑动 加载
  scroll_top:function(){
    var self = this;
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading();
      self.setData({
        showLoading: false
      })
    }, 2000)
    api.getList('in_theaters', this.data.pn--).then(res => {
      this.setData({
        list: res.subjects
      })
      //console.log(this.data.list)
    })
  },
  /*点击某一个时发生的事件，目的将页面导入到detail页面，同时将带去数据的id,这个是详情页面的关键*/
  xq_tiao:function(e){
   // console.log(e.currentTarget.dataset.id);
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  }
  
});
     api.getList('in_theaters',this.data.pn).then(res=>{
      this.setData({
        list:res.subjects
      })
      // console.log(this.data.list)
    })
  },
  //向上滑动触发加载
  scroll_bottom:function(){
    var self = this;
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading();
      self.setData({
        showLoading: false
      })
    }, 2000)
    api.getList('in_theaters', this.data.pn++).then(res => {
      this.setData({
        list: res.subjects
      })
     // console.log(this.data.list)
    })

  },
  //向下滑动 加载
  scroll_top:function(){
    var self = this;
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading();
      self.setData({
        showLoading: false
      })
    }, 2000)
    api.getList('in_theaters', this.data.pn--).then(res => {
      this.setData({
        list: res.subjects
      })
      //console.log(this.data.list)
    })
  },
  /*点击某一个时发生的事件，目的将页面导入到detail页面，同时将带去数据的id,这个是详情页面的关键*/
  xq_tiao:function(e){
   // console.log(e.currentTarget.dataset.id);
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  }
  
});

接着我们在写home.json+home.wxss的

{
  "navigationBarBackgroundColor": "#0AF5DC",
  "navigationBarTitleText": "正在热播"
}

/* pages/home/home.wxss */
.img_tt{
  width: 200rpx;
  height: 250rpx;
}
.row{
  height: 25px;
  font-size: 12px;
}
.sv{
  height: 500px
}

到此，你应该可以看到一个正在热播的页面了，数据一个也拿到了。

接下来我们将做详情页面的具体内容

先做detail.js，这个里面有处理从home页面传递过来的id，拿到这个id值，在用这这前暴露的

getDetail:function(id){

return fetchApi("/subject/" + id).then(res => res.data);

}

这个函数去请求

// pages/detail/detail.js
var api = require('../../utils/api.js');
Page({
  data: {
    tm:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var id=options.id;
    api.getDetail(id).then(res=>{
      this.setData({
        tm:res
      })
      // console.log(this.data.tm)
    })
    
  },
  
})

//然后剩下的就是在detail.wxml里处理数据布置样式，这里直接贴出wxss+wxml的代码了

/* pages/detail/detail.wxss */
.xq_left{
  width: 300rpx;
  height: 380rpx;
  margin: 5px 5px;
}
.xq_right{
  width: 450rpx;
  flex-wrap: wrap;
}
.xq_img{
  width: 300rpx;
  height: 380rpx;
}
.act_img{
  width:200rpx;
  height: 250rpx;
}
/*flex 演员列表  */
#act{
  display: flex;
  height: 300rpx;
  text-align: center;
  margin-top: 10px;
}
.item{
   margin: 0 auto;
  
}
.datail_title{
  text-align: center;
  color:#F5730A;
  font-size: 18px;
  background-color: #ddd;
}
.title_zi{
  font-size: 20px;
 color: #0A4EF5;
}
.detail_car{
  margin-left: 30%;
  color: #F5730A;
  font-size: 15px;
}
/*内容修改*/
.detail_con{
  margin: 0 auto;
  margin-top: 10px;
  width: 700rpx;
  font-size: 14px;
}

<!--pages/detail/detail.wxml-->
<view class='page_detail'>
  <view class='datail_title'><text>{{tm.original_title}}</text></view>
  <view id='item_view'>
    <view class='xq_left'>
      <image class='xq_img' src="{{tm.images.large}}"></image>
    </view>
    <view class='xq_right'>
      <view><text class='title_zi'>评分:</text>{{tm.rating.average}}</view>
      <view><text class='title_zi'>产地:</text>{{tm.countries}}</view>
      <view id='item_view'>
        <text class='title_zi'>导演:</text>
        <text wx:for="{{tm.directors[0].name}}" wx:key="{{index}}">{{item}} </text>
      </view>
    </view>
  </view>
  <text class='detail_car'>演员列表</text>
  <view  id='act'>
    <view class='item' wx:for="{{tm.casts}}" wx:key="{{index}}">
      <image class='act_img' src="{{item.avatars.large}}"></image>
      <view>{{item.name}}</view>
    </view>
  </view>
  <text class='detail_car'>电影详情介绍</text>
  <view id='item_view' style='margin-top:10px'>
    <text style='color:#F5730A;'>电影类型：</text>
    <text wx:for="{{tm.genres}}" wx:key="{{index}}">{{item}}/</text>
  </view>
  <view class='detail_con'><text >{{tm.summary}}</text></view>
</view>

到此，你应该可以看到如下的这个效果图了

看到这个图片说明你已经成功了80%了，再次恭喜一下。

对于即将上映的页面，你仅仅需要改一些地方就一个实现了，一个小地方

一将上面的home.js里面浅蓝色的内容改为

api.getList('coming_soon', this.data.pn).then(res => {

this.setData({

list: res.subjects

})

// console.log(this.data.list)

})

因为请求后台的内容改变，所有这里就相应的改变了

我把请求地址写出来你应该就懂了

http://t.yushu.im/v2/movie/coming_soon?start=1&count=20

这样你应该可以理解了，对与即将上映页面的wxml+wxss你可以自己参考正在热播的页面，这里我就不给你写了。

这全部给你写出来，我就真成你爸爸了。

此文出自作者之手，这前我也成功做出来了，仅仅供微信小程序的小白们参考和学习。

如果大家觉得不错可以点一个赞，谢谢。

滚动小人人

关注

8
点赞
踩
17

收藏

觉得还不错? 一键收藏
9
评论
关于豆瓣电影的小程序

首先声明，这里所用到后台接口是豆瓣提供的，非本人亲自所写废话不多说直接上代码！var API_URL ='http://t.yushu.im/v2/movie'//豆瓣的地址function fetchApi(ty,params){ return new Promise((resolve,reject)=>{ wx.request({ url: `${AP...
复制链接

扫一扫