继续微信小程序开发的学习，继续跟着老师的讲课思路来学习，继续开发项目中所用到的组件
一、导航栏navi组件的开发
1、新建组件的文件结构
这个就是先新建目录navi。然后在navi文件夹中新建component组件index，最后新建images文件夹，存放组件中所需的图片，建好之后如下图：
2、设置组件中相关属性和变量
设置组件中的属性，这里有title、first、latest属性
设置组件中变量，这里有图片的路径，disLeftSrc、leftSrc、disRightSrc、rightSrc
最后将属性以及变量绑定到相关标签上，这里需要注意的是图片路径的切换
1 // index.wxml中静态页面的布局
2 <view class='container'>
3 <image class='icon' src='{{latest?disLeftSrc:leftSrc}}' />
4 <text class='title'>{{title}}</text>
5 <image class='icon' src='{{first?disRightSrc:rightSrc}}' />
6 </view>
7
8 // index.js中属性和变量的确定
9 Component({
10 /**
11 * 组件的属性列表
12 */
13 properties: {
14 title: String,
15 first:Boolean,
16 latest:Boolean
17 },
18
19 /**
20 * 组件的初始数据
21 */
22 data: {
23 disLeftSrc:'images/triangle.dis@left.png',
24 leftSrc:'images/triangle@left.png',
25 disRightSrc:'images/triangle.dis@right.png',
26 rightSrc:'images/triangle@right.png'
27 },
28
29 /**
30 * 组件的方法列表
31 */
32 methods: {
33
34 }
35 })
3、将组件注册到classic.json 中，供classic使用
// classic.json中注册组件
{
"usingComponents": {
"v-navi": "/components/navi/index"
}
}
// classic.wxml中使用
<v-navi></v-navi>
4、调整组件中样式 css样式，我可不会写这个
这个是老师调整好的，我肯定是写不出来的，继续学习吧
1 .container{
2 width: 600rpx;
3 height: 80rpx;
4 background-color: #f7f7f7;
5 border-radius: 2px;
6 display: inline-flex;
7 flex-direction: row;
8 justify-content: space-between;
9 align-items: center
10 }
11
12 .icon{
13 height: 80rpx;
14 width: 80rpx;
15 }
16
17 .title{
18 font-size: 28rpx;
19 }
5、在page页面中的使用
1 // classic.wxml 文件中新增代码
2 <v-navi class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>
3
4 // classic.js 中新增变量
5 /**
6 * 页面的初始数据
7 */
8 data: {
9 classic: null,
10 latest:true, // 最新期刊？默认值true
11 first:false // 第一期期刊？默认值false
12 },
6、完善navi组件的左右切换的功能
// navi组件中的index.wxml 绑定自定义左右切换事件
<view class='container'>
<image bind:tap='onLeft' class='icon' src='{{latest?disLeftSrc:leftSrc}}' />
<text class='title'>{{title}}</text>
<image bind:tap='onRight' class='icon' src='{{first?disRightSrc:rightSrc}}' />
</view>
// navi组件中的index.js 中实现这两个方法
/**
* 组件的方法列表
*/
methods: {
onLeft:function(event){
if(!this.properties.latest){
// 触发自定义事件
this.triggerEvent('left', {}, {});
}
},
onRight:function(event){
if(!this.properties.first){
// 触发自定义事件
this.triggerEvent('right', {}, {});
}
}
}
})
page文件夹中的classic中的文件的代码完善
1 // 监听navi组件中的切换事件
2 <v-navi bind:left='onNext' bind:right='onPrevious' class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>
3
4 // classic.js 中监听事件的实现，暂时没有具体的代码实现，只是空的方法体
5 // 监听navi组件的切换上一期
6 onNext:function(event){
7
8 },
9 // 监听navi组件的切换下一期
10 onPrevious:function(event){
11
12 },
因为classic中不只有movie组件，还有music组件以及句子组件，所以先把这些组件来实现出来
二、music组件的开发
1、首先来新建music组件中所需要的一些文件以及将图片复制过来
2、music组件中简单代码的编写
1 // index.wxml页面中的代码
2 <view>
3 <image src='{{img}}'/>
4 <image src='{{playSrc}}' />
5 <image src='images/music@tag.png' />
6 <text>{{content}}</text>
7 </view>
8
9 // index.js中属性以及变量的定义
10 Component({
11 /**
12 * 组件的属性列表
13 */
14 properties: {
15 img: {
16 type: String
17 },
18 content: String
19 },
20
21 /**
22 * 组件的初始数据
23 */
24 data: {
25 pauseSrc:'images/player@waitting.png',
26 playSrc:'images/player@playing.png'
27 },
28
29 /**
30 * 组件的方法列表
31 */
32 methods: {
33
34 }
35 })
三、essay组件的开发（文章组件）
1、首先新建essay组件中的各种文件
2、先插个队，来看一下代码的优化
这个是优化组件中的js文件中的一些属性和变量以及一些方法的代码的，可以将组件中通用的代码来抽离出来，通过behavior来连接
（1）新建一个classic-beh.js文件
1 /**
2 * behavior 定义组件中共有的属性 主要作用是抽离出相同的代码
3 * Behavior 与index.js中的Component是类似的
4 * 2019年7月29日22:13:10
5 */
6 var classicBeh = Behavior({
7 properties: {
8 img: {
9 type: String
10 },
11 content: String
12 },
13 data:{
14
15 },
16 methods:{
17
18 }
19 })
20
21 export {classicBeh}
（2）组件中的使用behavior 同时将music组件以及movie组件中替换掉
1 // essay组件中使用behavior
2
3 import {classicBeh} from '../classic-beh.js'; // 需要引入
4
5 Component({
6 /**
7 * 组件的属性列表
8 */
9 behaviors: [classicBeh], // 这是重点
10 properties: {
11 },
12
13 /**
14 * 组件的初始数据
15 */
16 data: {
17
18 },
19
20 /**
21 * 组件的方法列表
22 */
23 methods: {
24
25 }
26 })
四、导航栏实现组件的切换
看下页面的中的代码以及js中代码：
1 // classic.wxml中代码 主要是针对navi组件的
2 <v-navi bind:left='onNext' bind:right='onPrevious' class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>
3
4 // classic文件夹中的中的classic.js
5 // 监听navi组件的切换下一期
6 onPrevious:function(event){
7 var index = this.data.classic.index;
8 classicModel.getPrevious(index, (res) =>{
9 this.setData({
10 classic:res,
11 latest: classicModel.isLatest(res.index),
12 first: classicModel.isFirst(res.index)
13 })
14 });
15 },
16
17 // models文件夹下的classic.js 文件中新增代码
18 // 是否是第一期
19 isFirst(index) {
20 return index == 1 ? true : false;
21 }
22
23 // 是否是最新一期
24 isLatest(index) {
25 var latestIndex = this._getLatestIndex();
26 return index == latestIndex ? true : false;
27 }
28
29 // 保存最新一期的index这里将信息保存到小程序提供的缓存中
30 _setLatestIndex(index) {
31 wx.setStorageSync('latest', index);
32 }
33
34 _getLatestIndex() {
35 var index = wx.getStorageSync('latest');
36 return index;
37 }
38
39 getLatest(sCallBack) {
40 this.request({
41 url: 'classic/latest',
42 success: (res) => {
43 sCallBack(res);
44 // 将最新一期的index放入缓存中
45 this._setLatestIndex(res.index);
46 }
47 })
48 }
这只是完成了先后点击触发的事件。来切换不同的数据，向前点击事件还没有完成。接下来，看看getNext()获取后一期的期刊数据
1 // classic文件夹下的classic.js 中新增代码
2 // 监听navi组件的切换下一期
3 onNext:function(event){
4 var index = this.data.classic.index;
5 classicModel.getNext(index, (res) => {
6 this.setData({
7 classic: res,
8 latest: classicModel.isLatest(res.index),
9 first: classicModel.isFirst(res.index)
10 })
11 });
12 },
13
14 // models文件夹下新增代码
15 // 获取下一期数据
16 getNext(index, sCallBack){
17 this.request({
18 url: 'classic/' + index + '/next',
19 success:(res) =>{
20 sCallBack(res);
21 }
22 })
23 }
代码的优化，感觉这个是很有必要的一个东西，当然在做一款产品的时候，这个东西是肯定要去做的，奈何，自己现在做的东西就是一坨，很想尝试着做感觉有意义的东西
1 // 主要是将重复的代码抽离出来，通过传递参数的方案
2 // model文件夹下的classic.js 文件中将getNext和getPrevious合并成一个方法
3 // 获取期刊数据
4 getClassic(index, nextOrPrevious, sCallBack) {
5 this.request({
6 url: 'classic/' + index + '/' + nextOrPrevious,
7 success: (res) => {
8 sCallBack(res);
9 }
10 })
11 }
12
13 // classic文件夹下的classic.js 文件中的代码优化
14 // 监听navi组件的切换下一期
15 onNext:function(event){
16 this._updateClassic('next');
17 },
18
19 // 监听navi组件的切换上一期
20 onPrevious:function(event){
21 this._updateClassic('previous');
22 },
23
24 _updateClassic: function (nextOrPrevious) {
25 var index = this.data.classic.index;
26 classicModel.getClassic(index, nextOrPrevious, (res) => {
27 this.setData({
28 classic: res,
29 latest: classicModel.isLatest(res.index),
30 first: classicModel.isFirst(res.index)
31 })
32 });
33 },