微信小程序之组件的集合（二）

　　继续微信小程序开发的学习，继续跟着老师的讲课思路来学习，继续开发项目中所用到的组件

一、导航栏navi组件的开发

1、新建组件的文件结构

这个就是先新建目录navi。然后在navi文件夹中新建component组件index，最后新建images文件夹，存放组件中所需的图片，建好之后如下图：

2、设置组件中相关属性和变量

设置组件中的属性，这里有title、first、latest属性

设置组件中变量，这里有图片的路径，disLeftSrc、leftSrc、disRightSrc、rightSrc

最后将属性以及变量绑定到相关标签上，这里需要注意的是图片路径的切换

 // index.wxml中静态页面的布局
 <view class='container'>
   <image class='icon' src='{{latest?disLeftSrc:leftSrc}}' />
   <text class='title'>{{title}}</text>
   <image class='icon' src='{{first?disRightSrc:rightSrc}}' />
 </view>

 // index.js中属性和变量的确定
 Component({
   /**
    * 组件的属性列表
    */
   properties: {
     title: String,
     first:Boolean,
     latest:Boolean
   },

   /**
    * 组件的初始数据
    */
   data: {
     disLeftSrc:'images/triangle.dis@left.png',
     leftSrc:'images/triangle@left.png',
     disRightSrc:'images/triangle.dis@right.png',
     rightSrc:'images/triangle@right.png'
   },

   /**
    * 组件的方法列表
    */
   methods: {

   }
 })

3、将组件注册到classic.json 中，供classic使用

// classic.json中注册组件
{
  "usingComponents": {
    "v-navi": "/components/navi/index"
  }
}
// classic.wxml中使用
<v-navi></v-navi>

4、调整组件中样式 css样式，我可不会写这个

这个是老师调整好的，我肯定是写不出来的，继续学习吧

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

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

 .title{
   font-size: 28rpx;
 }

5、在page页面中的使用

 // classic.wxml 文件中新增代码
 <v-navi class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>

 // classic.js 中新增变量
  /**
    * 页面的初始数据
    */
   data: {
     classic: null,
     latest:true, // 最新期刊？默认值true
     first:false // 第一期期刊？默认值false
   },

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中的文件的代码完善

 // 监听navi组件中的切换事件
 <v-navi bind:left='onNext' bind:right='onPrevious' class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>

 // classic.js 中监听事件的实现，暂时没有具体的代码实现，只是空的方法体
   // 监听navi组件的切换上一期
   onNext:function(event){

   },
   // 监听navi组件的切换下一期
   onPrevious:function(event){

   },

因为classic中不只有movie组件，还有music组件以及句子组件，所以先把这些组件来实现出来

二、music组件的开发

1、首先来新建music组件中所需要的一些文件以及将图片复制过来

2、music组件中简单代码的编写

 // index.wxml页面中的代码
 <view>
   <image src='{{img}}'/>
   <image src='{{playSrc}}' />
   <image src='images/music@tag.png' />
   <text>{{content}}</text>
 </view>

 // index.js中属性以及变量的定义
 Component({
   /**
    * 组件的属性列表
    */
   properties: {
     img: {
       type: String
     },
     content: String
   },

   /**
    * 组件的初始数据
    */
   data: {
     pauseSrc:'images/player@waitting.png',
     playSrc:'images/player@playing.png'
   },

   /**
    * 组件的方法列表
    */
   methods: {

   }
 })

三、essay组件的开发（文章组件）

1、首先新建essay组件中的各种文件

2、先插个队，来看一下代码的优化

这个是优化组件中的js文件中的一些属性和变量以及一些方法的代码的，可以将组件中通用的代码来抽离出来，通过behavior来连接

（1）新建一个classic-beh.js文件

 /**
  * behavior 定义组件中共有的属性 主要作用是抽离出相同的代码
  * Behavior 与index.js中的Component是类似的
  * 2019年7月29日22:13:10
  */
 var classicBeh = Behavior({
   properties: {
     img: {
       type: String
     },
     content: String
   },
   data:{

   },
   methods:{

   }
 })

 export {classicBeh}

（2）组件中的使用behavior 同时将music组件以及movie组件中替换掉

 // essay组件中使用behavior

 import {classicBeh} from '../classic-beh.js'; // 需要引入

 Component({
   /**
    * 组件的属性列表
    */
   behaviors: [classicBeh], // 这是重点
   properties: {
   },

   /**
    * 组件的初始数据
    */
   data: {

   },

   /**
    * 组件的方法列表
    */
   methods: {

   }
 })

四、导航栏实现组件的切换

看下页面的中的代码以及js中代码：

 // classic.wxml中代码 主要是针对navi组件的
 <v-navi bind:left='onNext' bind:right='onPrevious' class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>

 // classic文件夹中的中的classic.js
   // 监听navi组件的切换下一期
   onPrevious:function(event){
     var index = this.data.classic.index;
     classicModel.getPrevious(index, (res) =>{
       this.setData({
         classic:res,
         latest: classicModel.isLatest(res.index),
         first: classicModel.isFirst(res.index)
       })
     });
   },

 // models文件夹下的classic.js 文件中新增代码
   // 是否是第一期
   isFirst(index) {
     return index == 1 ? true : false;
   }

   // 是否是最新一期
   isLatest(index) {
     var latestIndex = this._getLatestIndex();
     return index == latestIndex ? true : false;
   }

   // 保存最新一期的index这里将信息保存到小程序提供的缓存中
   _setLatestIndex(index) {
     wx.setStorageSync('latest', index);
   }

   _getLatestIndex() {
     var index = wx.getStorageSync('latest');
     return index;
   }

   getLatest(sCallBack) {
     this.request({
       url: 'classic/latest',
       success: (res) => {
         sCallBack(res);
         // 将最新一期的index放入缓存中
         this._setLatestIndex(res.index);
       }
     })
   }

这只是完成了先后点击触发的事件。来切换不同的数据，向前点击事件还没有完成。接下来，看看getNext()获取后一期的期刊数据

 // classic文件夹下的classic.js 中新增代码
   // 监听navi组件的切换下一期
   onNext:function(event){
     var index = this.data.classic.index;
     classicModel.getNext(index, (res) => {
       this.setData({
         classic: res,
         latest: classicModel.isLatest(res.index),
         first: classicModel.isFirst(res.index)
       })
     });
   },

 // models文件夹下新增代码
   // 获取下一期数据
   getNext(index, sCallBack){
     this.request({
       url: 'classic/' + index + '/next',
       success:(res) =>{
         sCallBack(res);
       }
     })
   }

代码的优化，感觉这个是很有必要的一个东西，当然在做一款产品的时候，这个东西是肯定要去做的，奈何，自己现在做的东西就是一坨，很想尝试着做感觉有意义的东西

 // 主要是将重复的代码抽离出来，通过传递参数的方案
 // model文件夹下的classic.js 文件中将getNext和getPrevious合并成一个方法
   // 获取期刊数据
   getClassic(index, nextOrPrevious, sCallBack) {
     this.request({
       url: 'classic/' + index + '/' + nextOrPrevious,
       success: (res) => {
         sCallBack(res);
       }
     })
   }

 　// classic文件夹下的classic.js 文件中的代码优化
   // 监听navi组件的切换下一期
   onNext:function(event){
     this._updateClassic('next');
   },

   // 监听navi组件的切换上一期
   onPrevious:function(event){
     this._updateClassic('previous');
   },

   _updateClassic: function (nextOrPrevious) {
     var index = this.data.classic.index;
     classicModel.getClassic(index, nextOrPrevious, (res) => {
       this.setData({
         classic: res,
         latest: classicModel.isLatest(res.index),
         first: classicModel.isFirst(res.index)
       })
     });
   },

内容出处：七月老师《纯正商业级小程序开发》视频课程

视频课程链接：https://coding.imooc.com/class/251.html