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

　　繼續微信小程序開發的學習，繼續跟着老師的講課思路來學習，繼續開發項目中所用到的組件

1、導航欄navi組件的開發

一、新建組件的文件結構

這個就是先新建目錄navi。而後在navi文件夾中新建component組件index，最後新建images文件夾，存放組件中所需的圖片，建好以後以下圖：

二、設置組件中相關屬性和變量

設置組件中的屬性，這裏有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 })

三、將組件註冊到classic.json 中，供classic使用

// classic.json中註冊組件
{
  "usingComponents": {
    "v-navi": "/components/navi/index"
  }
}
// classic.wxml中使用
<v-navi></v-navi>

四、調整組件中樣式 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 }

 五、在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   },

六、完善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組件以及句子組件，因此先把這些組件來實現出來

2、music組件的開發

一、首先來新建music組件中所須要的一些文件以及將圖片複製過來

二、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 })

3、essay組件的開發（文章組件）

一、首先新建essay組件中的各類文件

二、先插個隊，來看一下代碼的優化

這個是優化組件中的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 })

 4、導航欄實現組件的切換

看下頁面的中的代碼以及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   },

 

內容出處：七月老師《純正商業級小程序開發》視頻課程

視頻課程連接：https://coding.imooc.com/class/251.html