• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

微信小程序“豆瓣电影”

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

代码

  1. app.json
  2. {
  3.   "pages":[
  4.     "pages/index/index",
  5.     "pages/movie/movie",
  6.     "pages/search/search",
  7.     "pages/profile/profile"
  8.   ],
  9.   "window":{
  10.     "navigationBarBackgroundColor": "#35495e",
  11.     "navigationBarTextStyle": "white",
  12.     "navigationBarTitleText": "豆瓣电影",
  13.     "backgroundColor": "#fff",
  14.     "backgroundTextStyle": "dark",
  15.     "enablePullDownRefresh": true
  16.   },
  17.   "tabBar":{
  18.     "list":[
  19.       {
  20.         "text":"推荐电影",
  21.         "iconPath":"images/board.png",
  22.         "selectedIconPath":"images/board-actived.png",
  23.         "pagePath":"pages/index/index"
  24.       },
  25.       {
  26.         "text":"发现电影",
  27.         "iconPath":"images/search.png",
  28.         "selectedIconPath":"images/search_black.png",
  29.         "pagePath":"pages/search/search"
  30.       },
  31.       {
  32.         "text":"我的电影",
  33.         "iconPath":"images/profile.png",
  34.         "selectedIconPath":"images/profile-actived.png",
  35.         "pagePath":"pages/profile/profile"
  36.       }
  37.     ]
  38.   }
  39. }
  40. app.wxss
  41. page{
  42.   font-family: "Microsoft YaHei";
  43.   background-color: #fff;
  44.   display: flex;
  45.   /*纵向排列*/
  46.   flex-direction: column;
  47. }
  48. .page-header{
  49.   display: flex;
  50.   /*横向居中对齐*/
  51.   justify-content: center;
  52.   border-bottom: 2rpx solid #ccc;
  53.   margin-bottom: 10rpx;
  54. }
  55. .page-header-text{
  56.   padding: 20rpx 40rpx;
  57.   color: #999;
  58.   font-size: 40rpx;
  59.   text-align: center;
  60. }
  61. .page-body{
  62.   display: flex;
  63.   flex: 1;
  64.   flex-direction: column;
  65. }
  66. .item{
  67.   display: flex;
  68.   padding: 20rpx 40rpx;
  69.   border-bottom: 2rpx solid #eee;
  70. }
  71. .poster{
  72.   width: 130rpx;
  73.   height: 160rpx;
  74.   margin-right: 20rpx;
  75. }
  76. .meta{
  77.   flex:1;
  78. }
  79.  .item.title,.item.sub-title{
  80.   display: block;
  81.   margin-bottom: 14rpx;
  82. } 
  83. .title{
  84.   font-size: 35rpx;
  85. }
  86. .sub-title{
  87.   font-size: 25rpx;
  88.   color:#c0c0c0;
  89. }
  90. .artists{
  91.   font-size: 26rpx;
  92.   color: #999;
  93. }
  94. .rating{
  95.   font-size: 28rpx;
  96.   font-weight: bold;
  97.   color: red;
  98. }
  1. index.wxml
  2. <view class="page-header">
  3.     <text class="page-header-text">{{title}}</text>
  4. </view>
  5.  <scroll-view class="page-body" scorll-y="true">
  6.     <navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
  7.     <view class="item">
  8.         <image class="poster"src="{{item.images.small}}"></image>
  9.         <view class="meta">
  10.           <text class="title">{{item.title}}</text>
  11.           <text class="sub-title">
  12.           {{item.original_title}} ({{item.year}})</text>
  13.           <text class="artists">
  14.              <text wx:for="{{item.directors}}">
  15.               {{item.name}}
  16.              </text> 
  17.           </text>
  18.         </view>
  19.         <view class="rating">
  20.            <text>{{item.rating.average}}</text>
  21.         </view>
  22.     </view>
  23.     </navigator>
  24. </scroll-view> 
  25. index.wxss
  26. /**index.wxss**/
  27. .userinfo {
  28.   display: flex;
  29.   flex-direction: column;
  30.   align-items: center;
  31. }
  32.  
  33. .userinfo-avatar {
  34.   width: 128rpx;
  35.   height: 128rpx;
  36.   margin: 20rpx;
  37.   border-radius: 50%;
  38. }
  39.  
  40. .userinfo-nickname {
  41.   color: #aaa;
  42. }
  43.  
  44. .usermotto {
  45.   margin-top: 200px;
  46. }
  47. index.js
  48. var API_URL =\'https://api.douban.com/v2/movie/top250\'
  49. Page({
  50.   data: {
  51.     title:"加载中...",
  52.     movies:[]
  53.   } ,
  54.   onLoad:function(){
  55.     var that =this;
  56.     wx.showToast({
  57.       title:"加载中...",
  58.       icon:"loading",
  59.       duration:10000
  60.     });
  61.     //发出的请求必须是HTTPS的
  62.     wx.request({
  63.       url: API_URL, 
  64.       data:{},
  65.       header:{
  66.       //进行网络数据请求出现400 是因为请求header的Content-type变了
  67.         \'content-type\': \'json\'
  68.       },
  69.       success:function(res){
  70.         //隐藏消息提示框
  71.         wx.hideToast();
  72.         var data = res.data;
  73.         console.log(data);
  74.         that.setData({
  75.           title:data.title,
  76.           movies:data.subjects
  77.         });
  78.         
  79.       }
  80.  
  81.     });
  82.   }
  83. })

 

  1. movie.wxml
  2. <scroll-view scroll-y="true">
  3.     <view class="meta">
  4.         <image class="poster" src="{{movie.images.large}}" background-size="cover"></image>
  5.         <text class="title">{{movie.title}}({{movie.year}})</text>
  6.         <text class="info">评分：{{movie.rating.average}}</text>
  7.         <text class="info">导演：<block wx:for="{{movie.directors}}">{{item.name}}</block></text>
  8.         <text class="info">主演：<block wx:for="{{movie.casts}}">{{item.name}}</block></text>
  9.     </view>
  10.     <view class="summary">
  11.       <text class="label">摘要：</text>
  12.       <text class="content">{{movie.summary}}</text>
  13.     </view>
  14. </scroll-view>
  15. movie.wxss
  16. .meta{
  17.   display: flex;
  18.   flex-direction: column;
  19.   align-items: center;
  20.   height: 1000rpx;
  21.   padding: 50rpx 40rpx;
  22. }
  23. .poster{
  24.   width: 80%;
  25.   height: 80%;
  26.   margin: 20rpx;
  27. }
  28. .title{
  29.   font-style: 42prx;
  30.   color: #444;
  31. }
  32. .info{
  33.   font-size: 18rpx;
  34.   color: #888;
  35.   margin-top: 20rpx;
  36.   width: 80%;
  37. }
  38. .summary{
  39.   width: 80%;
  40.   margin: 30rpx auto;
  41. }
  42. .label{
  43.   display: block;
  44. }
  45. .content{
  46.   color: #666;
  47.   font-size: 20rpx;
  48.   padding: 10rpx;
  49. }
  50. movie.js
  51. var API_URL = \'https://api.douban.com/v2/movie/subject/\'
  52.  
  53. Page({
  54.  
  55.  
  56.   data: {
  57.     movie:{}
  58.   },
  59.   onLoad: function (params) {
  60.    // console.log(params);
  61.    var that = this;
  62.    wx.request({
  63.      url: API_URL+params.id, 
  64.      data: {},
  65.      header: {
  66.        \'content-type\': \'json\' // 默认值
  67.      },
  68.      success: function (res) {
  69.       // console.log(res.data)
  70.       that.setData({
  71.         movie:res.data
  72.       });
  73.      }
  74.    })
  75.   },
  76.  
  77.  
  78.  
  79. })

 

  1. profile.wxml
  2. <view class="container">
  3.   <view bindtap="bindViewTap" class="userinfo">
  4.     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  5.  
  6.   </view>
  7.   <view class="infohead">电影</view>
  8.   <view class="infolist" wx:for="{{infoList}}">
  9.     <view class="infoitem">{{item.text}}</view>
  10.   </view>
  11.   <view class="infohead">其他</view>
  12.   <view   bindtap="bindViewTap" class="infolist" wx:for="{{other}}">
  13.     <view  class="infoitem">{{item.text}}</view>
  14.   </view>
  15. </view>
  16. profile.wxss
  17. .container {
  18.   height: 100%;
  19.   display: flex;
  20.   flex-direction: column;
  21.   box-sizing: border-box;
  22.   padding: 10px;
  23.  
  24. }
  25. .userinfo {
  26.   display: flex;
  27.   flex-direction: column;
  28.   align-items: center;
  29. }
  30.  
  31. .userinfo-avatar {
  32.   width: 128rpx;
  33.   height: 128rpx;
  34.   border-radius: 50%;
  35. }
  36.  
  37. .userinfo-nickname {
  38.   color: #aaa;
  39.   font-size: 6px;
  40. }
  41.  
  42. .infohead{
  43.     font-size: 16px;
  44.     border-bottom: 1px solid #dadada;
  45.     padding-top: 30px;
  46.     padding-bottom: 15px;
  47. }
  48.  
  49. .infoitem{
  50.     position: relative;
  51.     padding: 15px;
  52.     -webkit-box-align: center;
  53.     -ms-flex-align: center;
  54.     align-items: center;
  55.     border-bottom: 1px solid #dadada;
  56. }
  57. profile.js
  58. var app =getApp()
  59. Page({
  60.  
  61.  
  62.   data: {
  63.     text:"Page profiles",
  64.     infoList:[
  65.       {
  66.         text:"我的电影票"
  67.       },
  68.       {
  69.         text:"我的兑奖券"
  70.       },
  71.       {
  72.         text:"我的优惠券"
  73.       },
  74.       {
  75.         text:"想看、看过的电影"
  76.       }
  77.     ],
  78.     other:[
  79.

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
神技！微信小程序（应用号）抢先入门教程（附最新案例DEMO-豆瓣电影）持续更新 ...发布时间：2022-07-18
下一篇：
GeoHash核心原理解析（转） - 小小程序员的梦想发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap