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

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

一、导航栏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/[email protected]',
24     leftSrc:'images/[email protected]',
25     disRightSrc:'images/[email protected]',
26     rightSrc:'images/[email protected]'
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/[email protected]' />
 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/[email protected]',
26     playSrc:'images/[email protected]'
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   },