微信小程序开发实战-第四周

第四周

什么是“剥夺“函数return能力

使用回调函数的方式无法return

点赞数据提交

在page\classic\classic.js中定义onLike函数

onLike: function (event) {
    console.log(event)
    let behavior = event.detail.behavior
  }

拿到当前like组件的状态

向服务器提交状态数据，提交状态数据放到models中

在models中新建like.js

import {HTTP} from '../util/http.js'

class LikeModel extends HTTP {
like(behavior, artID, category) {
      let url = behavior === 'cancel' ? 'like/cancel' : 'like'
      this.request({
        url: url,
        method: 'POST',
        data: {
          art_id: artID,
          type: category
        },
        success: (data) => {
          console.log(data)
        }
      })
    }
}

export {LikeModel}

点赞API接口说明

http://bl.7yue.pro/dev/like.html#id2

Parameters:

• art_id: 点赞对象,例如你想对电影进行点赞，那这个参数就是电影的id号
• type：点赞类型分为四种：100 电影 200 音乐 300 句子 400 书籍

判断是否为空，为空则不执行之后的代码

params.success && params.success(res.data)

组件的生命周期函数

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

期刊组件epsoide

在components下新建epsoide组件

<view class="container">
  <view class="index-container">
    <text class="plain">No.</text>
    <text class="index">{{_index}}</text>
    <view class="vertical-line"></view>
  </view>
    <view class="date"> 
     <text class="month">{{month}}</text> 
    <text class="year">{{year}}</text>
   </view>  
</view>

.index{
  font-size:30px;
  /* line-height:20px;  */
  font-weight:800;
  margin-right:7px;
}

.vertical-line{
  margin-right:7px;
  height:22px;
  border-left:1px solid black;
}

.plain{
  font-size:16px;
}

.container{
  display:inline-flex;
  flex-direction: row;
  line-height: 30px;
  /* justify-content: flex-end; */
   /* align-items: baseline;       */
}

.index-container{
  display:flex;
  flex-direction: row;
  align-items: baseline;      
}

.date{
  display: flex;
  flex-direction: column;
  justify-content: center; 
  /* align-items: baseline; */
   /* line-height:30px;   */
}

.month{
  font-size:12px;
  line-height:12px; 
  padding-bottom: 2px; 
  margin-right:2rpx;
  /* padding-right:4rpx; */
}

.year{
  font-size:10px;
  line-height:10px; 
  padding-bottom:3px;   
}

然后引用组件

data中的数据

  data: {
      months:[
        '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月',
        '十二月'
      ],
      year:Number,
      month:String,
      _index:String
  }

解决序号index的问题

properties: {
    index:{
      type: Number,
      observer:function(newVal, oldVal, changedPath){
        // 如果index小于10就在前面加0
        if (newVal < 10) {
          this.setData({
            _index: '0' + newVal
          })
        }
      }
    }
  }

properties和data的数据都指向相同的JavaScript对象

不要在observe中修改自身属性

获取当前日期

ready生命周期函数：在组件在视图层布局完成后执行

通过setData来将数字月份和文字进行匹配显示出来

  ready:function(){
    let date = new Date()
    let month = date.getMonth()
    let year = date.getFullYear()
    this.setData({
      month:this.data.months[month],
      year:year
    })
  }

最终代码

classic.wxml

<view class="header">
    <v-epsoide class="epsoide" index="{{classic.index}}" />
    <v-like class="like" bind:like="onLike" like="{{classic.like_status}}" count="{{classic.fav_nums}}"/>
</view>
<v-movie img="{{classic.image}}" content="{{classic.content}}"></v-movie>

在classic.wxss中设置如下样式

.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.like {
    margin-right: 30rpx;
    margin-top: 12rpx;
}

.like-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-right: 30rpx;
}

.share-btn {
    margin-top: 28rpx;
    margin-left: 10rpx;
}

.share {
    /* padding:10rpx; */
    width: 40rpx;
    height: 40rpx;
}

.navi {
    position: absolute;
    bottom: 40rpx;
}

.epsoide {
    margin-left: 10px;
    margin-top: 7px;
}