小程序案例：国剧*综艺*美剧列表

16_miniapp/day-5/video-list/components/rate/rate.js

@@ -0,0 +1,25 @@
+// components/rate/rate.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    val:{
+      type:Object
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

16_miniapp/day-5/video-list/components/rate/rate.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

16_miniapp/day-5/video-list/components/rate/rate.wxml

@@ -0,0 +1,10 @@
+<view class="rate-content" wx:if="{{val}}">
+  <block wx:for="{{5}}">
+    <text class="full-star" wx:if="{{item < val.star_count}}"></text>
+    <text class="empty-star" wx:else></text>
+  </block>
+  <text class="num-text">{{val.value}}</text>
+</view>
+<view wx:else>
+  <text class="num-text">暂无评分</text>
+</view>

16_miniapp/day-5/video-list/components/rate/rate.wxss

@@ -0,0 +1,17 @@
+.rate-content .full-star,.rate-content .empty-star{
+  display: inline-block;
+  width: 20rpx;
+  height: 20rpx;
+  background-size: contain;
+  margin-right: 5rpx;
+}
+.rate-content .full-star{
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAfhJREFUOBGlVD1LHFEUPXfWrzGJO2uhaIQ0iljESgKSpAjBwpXVKikEl6TzD6TwJ4gWaQMBS8WQgCRZ61QpglUgRbQUbMR1XfwodvbmvE1mdt/ssDPBC493733nnrkf7w2QQrSU29D9wY8poJAkkG6hD8O5E+IGgJsHkr8+7hTjdDpsnA0PLkHE4yK2r5iETyYUfdUkkRa96W3VOhLqXv8oFHNhgGCC/Xwc2jFKR0J0966w1IwVp/LasiNGOBTdxV24bhbqenCQRUY9qLzl2CasGEUVdbyA1M5R1wrq/gUqVxUp4tLghCX85D7VlonFksJQ9Un3w5S8c2sy8z3TGtGDRsla8op0vKe3O0UuMRBVDm9N8uX1Zg/3s8+hmU/sGS/wf8kN0UWZP/tgokJCY+jX3ENmWqJ3zNiJonoKXxalcPY9wFqExqmf3fvIuL+SM2WZNX9SCheHAZnZ2++h9FyxufdaQfG6CBznTvQshtDhSyA4jQieRmExhO2gaFBoi5OK8EkYECiqX9jdd1wauP7tbVgrw8a/TzETBpkp1nWZ96sg8+VV8j0j6VF4Dozo3sB4ix0ZypD3iO3r+QvQbfi1KVkobwcBkj//hmp5msSbXHxqlC67bCtDDr2fN/43wYvMaFkK1dOALNjlJa6Z8RuIP0vfAZfVhj/iqoy46fpKwgAAAABJRU5ErkJggg==");
+}
+.rate-content .empty-star{
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAeRJREFUOBGtlDsvBFEUx3d2djfiMbTsQ0NEwTaiQSGiRKWREDofgMJHEAqdSPSE0BC9SiEqWQWSzT4SzSbrsR7Fzo7fEXfNg9klbjI5j/s/vzn3MRMI1DFyudxaPp8/qEMa0GqJ0ul0QzgcvtM0zbAsqzMWi+X9aoJ+kzIXiUSmgLXhinZOcn6jJpDieRvA7tvSX64vMJvNdiAdV3I67c5kMkMq/s76AgHMUqTbC0Oh0II9dvvVQ0mlUs2GYbRWKpU2ij4swA3pylX0ZJrmNPn7crn8oOv6Y7FYfEgmk8+i07gOl0z24js6cUHqCU1uwbksefcfYPJCHeDFx5LpUq7DNp2GZeYPw2KrVuLx+Gp1D4GOATwEZvwGSFdv6Oe48PtSVwVKwCfWB/SEJyZxHaMAcBLYmdI6gJIEGg0Gg1e4tTqVZfawzBsFE+u5h4heyLfYRT/4LERrcs95gNwr+RI8nbsLJWa5I+68B8hbPSJ3kYq/03qAvHVYFShL7phni9hSuU/r0TqA8u9DOGArKvCZzXCKEzyL7O8o4Fs1T4ftHGKXisU6gOzfIKLIp2CnVCr1JhKJHVXAiZ4C7Ae8Ts6UPDfCsUUhJRYLrJGCa+xSNBo9ss8pH+gr/jK/tj0a2ETv2IZ35FSkS7HbzakAAAAASUVORK5CYII=");
+}
+.num-text{
+  color: #818181;
+  font-size: 24rpx;
+}

16_miniapp/day-5/video-list/pages/index/index.js

@@ -1,14 +1,56 @@
-// index.js
-// 获取应用实例
-const app = getApp()
+const http = require('../../utils/http')
 
 Page({
   data: {
     // 轮播图片
-    imgs: ['../../images/1.png','../../images/2.png','../../images/3.png']
+    imgs: [],
+    guoju: [],
+    zongyi: [],
+    meiju: []
+  },
+  // 定义获取国剧的方法
+  async getHotGuoju() {
+    let res = await http({
+      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_domestic/items?start=0&count=8'
+    });
+
+    this.setData({
+      guoju: res.subject_collection_items,
+      imgs: [...this.data.imgs, res.subject_collection_items[0].photos[0], res.subject_collection_items[1].photos[0]]
+    })
+  },
+  async getHotZongyi() {
+    let res = await http({
+      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items?start=0&count=8'
+    });
+
+    this.setData({
+      zongyi: res.subject_collection_items,
+      imgs: [...this.data.imgs, res.subject_collection_items[0].photos[0], res.subject_collection_items[1].photos[0]]
+    })
+  },
+  async getHotMeiju() {
+    let res = await http({
+      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_american/items?start=0&count=8'
+    });
+
+    this.setData({
+      meiju: res.subject_collection_items,
+      imgs: [...this.data.imgs, res.subject_collection_items[0].photos[0], res.subject_collection_items[1].photos[0]]
+    })
   },
-  
   onLoad() {
-    
+    wx.showLoading({
+      title: '数据疯狂加载中...',
+    })
+
+    this.getHotGuoju();
+    this.getHotZongyi();
+    this.getHotMeiju();
+
+    // 我这么写 就能代表数据请求回来了
+    setTimeout(() => {
+      wx.hideLoading()
+    }, 300);
   },
-})
+})

16_miniapp/day-5/video-list/pages/index/index.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "rate": "/components/rate/rate"
+  },
   "navigationBarTitleText": "主页"
 }

16_miniapp/day-5/video-list/pages/index/index.wxml

@@ -1,22 +1,66 @@
 <view>
   <!-- 录播图 -->
-  <swiper class="lunbo" autoplay indicator-dots circular interval="3000">
+  <swiper class="lunbo" autoplay indicator-dots circular interval="3000" indicator-color="#fff" indicator-active-color="#2E8B57">
     <swiper-item wx:for="{{imgs}}" wx:key="*this">
-      <image src="{{item}}" mode="scaleToFill"/>
+      <image src="{{item}}" mode="aspectFill" />
     </swiper-item>
   </swiper>
-  <!-- 热播国剧 -->
-  <view class="guoju">
-    <view class="cate">
-      <text class="cate-title">近期热播国剧</text>
-      <view style="display: inline-flex; align-items: center;" >
-        <text class="cate-more">更多</text>
-        <view class="more">
+  <view style="padding: 10px">
+    <!-- 热播国剧 -->
+    <view class="guoju">
+      <template is="cate" data="{{title: '近期热播国剧'}}" />
+      <scroll-view scroll-x="true" class="box">
+        <view class="item" wx:for="{{guoju}}" wx:key="id">
+          <image src="{{item.pic.normal}}" mode="" />
+          <view class="item-name">
+            {{item.title}}
+          </view>
+          <view class="item-rate">
+            <rate val="{{item.rating}}"></rate>
+          </view>
         </view>
+      </scroll-view>
+    </view>
+    <!-- 热门综艺 -->
+    <view>
+      <template is="cate" data="{{title: '近期热门综艺'}}" />
+      <scroll-view scroll-x="true" class="box">
+        <view class="item" wx:for="{{zongyi}}" wx:key="id">
+          <image src="{{item.pic.normal}}" mode="" />
+          <view class="item-name">
+            {{item.title}}
+          </view>
+          <view class="item-rate">
+            <rate val="{{item.rating}}"></rate>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- 热播美剧 -->
+    <view>
+      <template is="cate" data="{{title: '近期热播美剧'}}" />
+      <scroll-view scroll-x="true" class="box">
+        <view class="item" wx:for="{{meiju}}" wx:key="id">
+          <image src="{{item.pic.normal}}" mode="" />
+          <view class="item-name">
+            {{item.title}}
+          </view>
+          <view class="item-rate">
+            <rate val="{{item.rating}}"></rate>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</view>
+
+<template name="cate">
+  <view class="cate">
+    <text class="cate-title">{{title}}</text>
+    <view style="display: inline-flex; align-items: center;">
+      <text class="cate-more">{{moreText || '更多'}}</text>
+      <view class="more">
       </view>
-      
     </view>
   </view>
-  <!-- 热门综艺 -->
-  <!-- 热播美剧 -->
-</view>
+</template>

16_miniapp/day-5/video-list/pages/index/index.wxss

@@ -1,6 +1,6 @@
 .lunbo {
   width: 750rpx;
-  height: 280rpx;
+  height: 380rpx;
 }
 
 .lunbo image {
@@ -8,11 +8,6 @@
   height: 100%;
 }
 
-
-.guoju {
-  padding:  10px;
-}
-
 .cate {
   display: flex;
   justify-content: space-between;
@@ -36,3 +31,32 @@
   height: 14px;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHpJREFUOE9jZCATMJKpj2Goauzv7xcoLCz8gM3f6HJwP3Z3Ny9gYGCIZ2RkCCwpqd3Q3d38HmRAaWmtYE9Pc8D//wzrGRgYFpaW1iaAxOEae3qaJ/z/z5CPpBFsc2lprQBMIyMjw8SSktoCFI0gDllOJTU+h2o8kuJPAGeqMg84G4VeAAAAAElFTkSuQmCC');
 }
+
+.box {
+  margin-top: 8px;
+  white-space: nowrap;
+}
+
+.item {
+  display: inline-block;
+  width: 240rpx;
+  height: 420rpx;
+  margin-left: 4px;
+}
+
+.item image {
+  width: 100%;
+  height: 310rpx;
+}
+
+.item-name {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.item-name,
+.item-rate {
+  width: 100%;
+  text-align: center;
+}

16_miniapp/day-5/video-list/project.private.config.json

@@ -2,6 +2,7 @@
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "projectname": "video-list",
   "setting": {
-    "compileHotReLoad": true
+    "compileHotReLoad": true,
+    "urlCheck": false
   }
 }

16_miniapp/day-5/video-list/utils/http.js

@@ -0,0 +1,13 @@
+module.exports = function (opts){
+  return new Promise((resolve, reject) => {
+    wx.request({
+      ...opts,
+      success(result){
+        resolve(result.data)
+      },
+      fail(err){
+        reject(err)
+      }
+    })
+  })
+}