继续微信小程序开发的学习，继续跟着老师的讲课思路来学习，继续开发项目中所用到的组件
一、导航栏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 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 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 },
内容出处：七月老师《纯正商业级小程序开发》视频课程