微信小程序“豆瓣电影”

其他 2019-01-18 00:50:50 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CNZSWYMP/article/details/78676642

开发环境为微信web开发者工具，实现的功能是可以在首页查看豆瓣电影评分前250名并且可以点击跳转到详情页，在搜索页输入关键字搜索相关电影。效果图如下

代码

app.json
{
  "pages":[
    "pages/index/index",
    "pages/movie/movie",
    "pages/search/search",
    "pages/profile/profile"
  ],
  "window":{
    "navigationBarBackgroundColor": "#35495e",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "豆瓣电影",
    "backgroundColor": "#fff",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true
  },
  "tabBar":{
    "list":[
      {
        "text":"推荐电影",
        "iconPath":"images/board.png",
        "selectedIconPath":"images/board-actived.png",
        "pagePath":"pages/index/index"
      },
      {
        "text":"发现电影",
        "iconPath":"images/search.png",
        "selectedIconPath":"images/search_black.png",
        "pagePath":"pages/search/search"
      },
      {
        "text":"我的电影",
        "iconPath":"images/profile.png",
        "selectedIconPath":"images/profile-actived.png",
        "pagePath":"pages/profile/profile"
      }
    ]
  }
}
app.wxss
page{
  font-family: "Microsoft YaHei";
  background-color: #fff;
  display: flex;
  /*纵向排列*/
  flex-direction: column;
}
.page-header{
  display: flex;
  /*横向居中对齐*/
  justify-content: center;
  border-bottom: 2rpx solid #ccc;
  margin-bottom: 10rpx;
}
.page-header-text{
  padding: 20rpx 40rpx;
  color: #999;
  font-size: 40rpx;
  text-align: center;
}
.page-body{
  display: flex;
  flex: 1;
  flex-direction: column;
}
.item{
  display: flex;
  padding: 20rpx 40rpx;
  border-bottom: 2rpx solid #eee;
}
.poster{
  width: 130rpx;
  height: 160rpx;
  margin-right: 20rpx;
}
.meta{
  flex:1;
}
 .item.title,.item.sub-title{
  display: block;
  margin-bottom: 14rpx;
} 
.title{
  font-size: 35rpx;
}
.sub-title{
  font-size: 25rpx;
  color:#c0c0c0;
}
.artists{
  font-size: 26rpx;
  color: #999;
}
.rating{
  font-size: 28rpx;
  font-weight: bold;
  color: red;
}
index.wxml
<view class="page-header">
    <text class="page-header-text">{{title}}</text>
</view>
 <scroll-view class="page-body" scorll-y="true">
    <navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
    <view class="item">
        <image class="poster"src="{{item.images.small}}"></image>
        <view class="meta">
          <text class="title">{{item.title}}</text>
          <text class="sub-title">
          {{item.original_title}} ({{item.year}})</text>
          <text class="artists">
             <text wx:for="{{item.directors}}">
              {{item.name}}
             </text> 
          </text>
        </view>
        <view class="rating">
           <text>{{item.rating.average}}</text>
        </view>
    </view>
    </navigator>
</scroll-view> 
index.wxss
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}
index.js
var API_URL ='https://api.douban.com/v2/movie/top250'
Page({
  data: {
    title:"加载中...",
    movies:[]
  } ,
  onLoad:function(){
    var that =this;
    wx.showToast({
      title:"加载中...",
      icon:"loading",
      duration:10000
    });
    //发出的请求必须是HTTPS的
    wx.request({
      url: API_URL, 
      data:{},
      header:{
      //进行网络数据请求出现400 是因为请求header的Content-type变了
        'content-type': 'json'
      },
      success:function(res){
        //隐藏消息提示框
        wx.hideToast();
        var data = res.data;
        console.log(data);
        that.setData({
          title:data.title,
          movies:data.subjects
        });
        
      }

    });
  }
})

movie.wxml
<scroll-view scroll-y="true">
    <view class="meta">
        <image class="poster" src="{{movie.images.large}}" background-size="cover"></image>
        <text class="title">{{movie.title}}({{movie.year}})</text>
        <text class="info">评分：{{movie.rating.average}}</text>
        <text class="info">导演：<block wx:for="{{movie.directors}}">{{item.name}}</block></text>
        <text class="info">主演：<block wx:for="{{movie.casts}}">{{item.name}}</block></text>
    </view>
    <view class="summary">
      <text class="label">摘要：</text>
      <text class="content">{{movie.summary}}</text>
    </view>
</scroll-view>
movie.wxss
.meta{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1000rpx;
  padding: 50rpx 40rpx;
}
.poster{
  width: 80%;
  height: 80%;
  margin: 20rpx;
}
.title{
  font-style: 42prx;
  color: #444;
}
.info{
  font-size: 18rpx;
  color: #888;
  margin-top: 20rpx;
  width: 80%;
}
.summary{
  width: 80%;
  margin: 30rpx auto;
}
.label{
  display: block;
}
.content{
  color: #666;
  font-size: 20rpx;
  padding: 10rpx;
}
movie.js
var API_URL = 'https://api.douban.com/v2/movie/subject/'

Page({


  data: {
    movie:{}
  },
  onLoad: function (params) {
   // console.log(params);
   var that = this;
   wx.request({
     url: API_URL+params.id, 
     data: {},
     header: {
       'content-type': 'json' // 默认值
     },
     success: function (res) {
      // console.log(res.data)
      that.setData({
        movie:res.data
      });
     }
   })
  },

 
 
})
profile.wxml
<view class="container">
  <view bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

  </view>
  <view class="infohead">电影</view>
  <view class="infolist" wx:for="{{infoList}}">
    <view class="infoitem">{{item.text}}</view>
  </view>
  <view class="infohead">其他</view>
  <view   bindtap="bindViewTap" class="infolist" wx:for="{{other}}">
    <view  class="infoitem">{{item.text}}</view>
  </view>
</view>
profile.wxss
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;

}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
  font-size: 6px;
}

.infohead{
    font-size: 16px;
    border-bottom: 1px solid #dadada;
    padding-top: 30px;
    padding-bottom: 15px;
}

.infoitem{
    position: relative;
    padding: 15px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #dadada;
}
profile.js
var app =getApp()
Page({

 
  data: {
    text:"Page profiles",
    infoList:[
      {
        text:"我的电影票"
      },
      {
        text:"我的兑奖券"
      },
      {
        text:"我的优惠券"
      },
      {
        text:"想看、看过的电影"
      }
    ],
    other:[
      {
        text:"点这里寻找你喜欢的电影哦"
      },
      {
        text:"猜你喜欢的电影"
      }
    ],
    userInfo:{}
  },
  onLoad: function (options) {
    var that =this;
    app.getUserInfo(function(userInfo){
      that.setData({
        userInfo:userInfo
      })
    });
    console.log(that.data.userInfo)
  },
  bindViewTap:function(e){
    var film =e.currentTarget;
    wx.navigateTo({
      url: '../../search/search'
    })
  }
})
search.wxml
<view class="page-header">
    <input class="page-header-text" placeholder="输入搜索关键词" auto-focus
    bindchange="search"/>
</view>
<scroll-view class="page-body" scorll-y="true">
    <navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
    <view class="item">
        <image class="poster"src="{{item.images.small}}"></image>
        <view class="meta">
          <text class="title">{{item.title}}</text>
          <text class="sub-title">
          {{item.original_title}} ({{item.year}})</text>
          <text class="artists">
             <text wx:for="{{item.directors}}">
              {{item.name}}
             </text> 
          </text>
        </view>
        <view class="rating">
           <text>{{item.rating.average}}</text>
        </view>
    </view>
    </navigator>
</scroll-view> 
search.js
var API_URL = 'https://api.douban.com/v2/movie/search';

Page({

 
  data: {
    movies:[]
  },
  //编译时此处有错 注意e!
  search:function(e){
    if(!e.detail.value){
      return;
    }
    wx.showToast({
      title: "加载中...",
      icon:"loading",
      duration:10000
    });
    var that =this;
    wx.request({
      url: API_URL+"?q="+e.detail.value,
      data:{},
      header: {
        'content-type': 'json' // 默认值
      },
      success:function(res){
           // console.log(res.data);
           wx.hideToast();
           that.setData({
                movies:res.data.subjects
           });
      }
    });
  }
 
})

猜你喜欢

转载自blog.csdn.net/CNZSWYMP/article/details/78676642
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 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