微信小程序开发实战-第五周
第五周
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')
},
完成上一条和下一条数据的切换
