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

第五周

navi组件

新建navi导航组件

导入相应的图片素材文件

设置组件属性列表

title：当前期刊标题

first：指定当前期刊是否为第一期

latest指定当前期刊是否为最后一期

设置图片url

disLeftSrc: 'images/triangle.dis@left.png',
highLeftSrc: 'images/triangle@left.png'

组件骨架

<view class='container'>
  <image class="navi-icon navi-left" bind:tap="onLeft" src="{{latest?disLeftSrc:highLeftSrc}}" />
  <text class="title">{{title}}</text>
  <image class="navi-icon navi-right" disable="{{!first}}" bind:tap='onRight" src="{{first?'images/triangle.dis@right.png':'images/triangle@right.png'}}" />
</view>

组件样式

.container{
  width:600rpx;
  height:80rpx;
  background-color: #f7f7f7;
  border-radius:2px;
  display:inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.navi-icon{
  height:80rpx;
  width:80rpx;
}

.title{
  font-size:28rpx;
}

将classic.wxml下的 所有view容器包裹到calss为container的容器中

<view class="container">
    <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>
<v-navi />
</view>

在classic.js中的data中设置

用以标识当前期刊是否为最新一期，从而进行按钮显示控制

  data: {
    classic:null,
    latest:true,
    first:false
  },

<v-navi title="{{classic.title}}" first="{{first}}" latest="{{latest}}" />

定义按钮点击事件

onLeft:function(){
      if(!this.properties.latest){
        this.triggerEvent('left', {}, {})
      }
    },
    onRight:function(){
      if(!this.properties.first){
        this.triggerEvent('right', {}, {})
      }   
    }

在classic.wxml中监听自定义事件

<v-navi 
    bind:left="onNext"
    bind:right="onPrevious"
    title="{{classic.title}}" first="{{first}}" latest="{{latest}}" />

music音乐组件

在components\classic下新建music组件

music组件的属性

标题和图片

properties: {
    src: String,
    title:String
},
data: {
    playing: false,
    waittingUrl: 'images/player@waitting.png',
    playingUrl: 'images/player@playing.png'
}

behavior组件属性复用

官方文档

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

behaviors 是用于组件间代码共享的特性

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其他 behavior 。

在classic下新建classic-beh.js，用以定义行为

let classicBehavior = Behavior({
    properties: {
        type: String,
        img: String,
        content: String
    },
    data: {
    }
})

export { classicBehavior }

然后分别在组件中使用

// 导入共享的属性
import {
  classicBehavior
} from '../classic-beh.js'

behaviors: [classicBehavior]

behavior的继承与多继承的覆盖

behaviors: [classicBehavior,classicBehavior1,classicBehavior2 ]

写在后边的behavior会覆盖前面的相同属性

字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：

• 如果有同名的属性或方法，组件本身的属性或方法会覆盖 behavior 中的属性或方法，如果引用了多个 behavior ，在定义段中靠后 behavior 中的属性或方法会覆盖靠前的属性或方法；
• 如果有同名的数据字段，如果数据是对象类型，会进行对象合并，如果是非对象类型则会进行相互覆盖；
• 生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。

生命周期函数不会进行覆盖

essay句子组件

在classic目录下新建essay组件

并导入相应素材图片

essay骨架

<view class="classic-container">
  <image src="{{img}}" class="classic-img"></image>
  <image class='tag' src="images/essay@tag.png" />
  <text class="content">{{content}}</text>
</view>

essay样式文件

.classic-img{
  width:750rpx;
  height:500rpx;
 
  /* margin-bottom:120rpx; */
}

.tag{
  width:46rpx;
  height:142rpx;
  position: relative;
  bottom: 58rpx;
  right:310rpx;
}

.content{
  display:block;
  /* width:275px; */
  /* margin:0 auto; */
  max-width:550rpx;
  font-size:36rpx;
}

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

获取前一期

API

http://bl.7yue.pro/dev/classic.html#id3

在models\classic.js中定义getPrevious函数，

getPrevious(index, sCallback) {
        this.request({
            url: 'classic/lat' + index + '/previous',
            success: (data) => {
                sCallback(data)
            }
        })
    }

然后在classic.js中的onPrevious中处理，获取上一篇文章数据

然后用获取到的数据来更新当前页面数据

onPrevious: function (event) {
    let index = this.data.classic.index
    classicModel.getPrevious(index, (res)=>{
      //console.log('上一篇数据');
      //console.log(res);
      // 将获取到的数据替换当前页面数据
      this.setData({
        classic:res
      })
    })
  }

初步实现切换功能

判断当前期刊是否为第一期

isFirst(index) {
        if (index == 1) {
            return true
        }
        else return false
    }

判断当前期刊是否为最新

isLatest(index) {
        let key = this._fullKey('latest-' + index)
        let latestEpsoide = wx.getStorageSync(key)
        if (latestEpsoide) {
            if (index == latestEpsoide) {
                return true
            }
        }
        else return false
    }

使用Storage保存最新期刊号

在models\classic.js中定义私有方法

_setLatestIndex存入缓存

_getLatestEpsoide从缓存中读取

_setLatestIndex(index) {
        wx.setStorageSync('latest', index)
    }

_getLatestEpsoide() {
    let index = wx.getStorageSync('latest')
    return index
}

然后在改写isLatest方法

isLatest(index) {
	let latestIndex = this._getLatestIndex()
	return latestIndex == index?ture:false
}

然后在pages\classic\classic.js中onPrevious函数中setData下新增

latest:classicModel.isLatest(res.index),
first:classicModel.isFirst(res.index)

实现上一期切换

onNext与函数重构

将getPrevious和getNext中的公共部分抽离出来，写入以下方法

_getClassic

_getClassic(index, next_or_previous, sCallback) {
	this.requst({
        url: 'classic/' + index + '/' + next_or_previous,
        success:(res)=>{
            sCallback(res)
        }
    })
}

将onPrevious和onNext中的公共部分抽离出来，写入以下方法

_updataClassic

_updataClassic:function(next_or_previous) {
    let index = this.data.classic.index
    classicModel._getClassic(index, next_or_previous, (res)=>{
      console.log('上一篇数据');
      console.log(res);
      // 将获取到的数据替换当前页面数据
      this.setData({
        classic:res,
        latest:classicModel.isLatest(res.index),
        first:classicModel.isFirst(res.index)
      })
    })
  }

改写onNext和onPrevious方法

  // 下一条
  onNext: function (event) {
    this._updataClassic('next')
  },

  // 上一条
  onPrevious: function (event) {
    this._updataClassic('previous')
  },

完成上一条和下一条数据的切换

加入缓存功能