摘要：組件模板與組件數(shù)據(jù)結(jié)合后生成的節(jié)點(diǎn)樹，將被插入到組件的引用位置上。事件用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)。官方文檔往期回顧填坑手冊(cè)小程序生成海報(bào)一拆彈時(shí)刻小程序生成海報(bào)二

關(guān)于小程序的目錄結(jié)構(gòu)，可以說一開始大家都有各自的開發(fā)習(xí)慣和命名規(guī)則，但一旦項(xiàng)目變得復(fù)雜龐大的時(shí)候，你就發(fā)現(xiàn)管理起來和后期維護(hù)變得很麻煩，如果是 協(xié)同開發(fā) 的話，更容易出現(xiàn) “互坑” 的情況。

智庫君在一年多的小程序開發(fā)中也跳過不少的坑，總結(jié)了一套還算好維護(hù)的目錄結(jié)構(gòu)跟大家分享（僅供參考，覺得好拿去，覺得不好歡迎提出意見），以下是實(shí)戰(zhàn)項(xiàng)目中的結(jié)構(gòu)示例：

├─  app.js    --- 小程序加載時(shí)優(yōu)先加載的入口JS
├─  app.json   ---入口文件和公共配置
├─  app.wxss     ---公共樣式表
├─  project.config.json     ---小程序全局配置文件
├─  sitemap.json     ---允許微信索引文件
│  
├─cloud-functions     ---云函數(shù)
│  └─setCrypto      ---數(shù)據(jù)加密模塊，用戶加密一些數(shù)據(jù)
│          index.js
│          package.json
│          ...
│          ...
│          
├─components      ---小程序自定義組件
│  ├─plugins      --- （重點(diǎn)）可獨(dú)立運(yùn)行的大型模塊，可以打包成plugins
│  │  ├─comment         ---評(píng)論模塊
│  │  │  │  index.js
│  │  │  │  index.json
│  │  │  │  index.wxml
│  │  │  │  index.wxss
│  │  │  │  services.js    ---（重點(diǎn)）用來處理和清洗數(shù)據(jù)的service.js，配套模板和插件
│  │  │  │      
│  │  │  └─submit    ---評(píng)論模塊子模塊：提交評(píng)論
│  │  │          index.js
│  │  │          index.json
│  │  │          index.wxml
│  │  │          index.wxss
│  │  │      
│  │  └─canvasPoster     ---canvas海報(bào)生成模塊
│  │          index.js
│  │          index.json
│  │          index.wxml
│  │          index.wxss
│  │          services.js    ---（重點(diǎn)）用來處理和清洗數(shù)據(jù)的service.js，配套模板和插件
│  │     ...
│  │     ...
│  │          
│  └─templates   ---（重點(diǎn)）模板，通過外部傳參的容器，不做過多的數(shù)據(jù)處理
│      │      
│      ├─slideshow     ---滾屏切換模板
│      │      index.js
│      │      index.json
│      │      index.wxml
│      │      index.wxss
│      │      service.js    ---（重點(diǎn)）用來處理和清洗數(shù)據(jù)的service.js，配套模板和插件
│      │      
│      └─works       ---作品模板
│          │  index.js
│          │  index.json
│          │  index.wxml
│          │  index.wxss
│          │  service.js
│          │  
│          ├─articlePlugin    ---作品模板中的文章類型
│          │      index.js
│          │      index.json
│          │      index.wxml
│          │      index.wxss
│          │      
│          ├─galleryPlugin    ---作品模板中的九宮格類型
│          │      index.js
│          │      index.json
│          │      index.wxml
│          │      index.wxss
│          │      
│          └─videoPlugin     ---作品模板中的視頻類型
│                  index.js
│                  index.json
│                  index.wxml
│                  index.wxss
│                  ...
│                  ...
│                  
├─config     ---自定義配置文件
│      config.js    ---存放基礎(chǔ)配置
│      constants.js   ---存儲(chǔ)常量
│      weui.wxss   ---第三方文件wxss，js等
│      ...
│      ...
│      
├─pages     ---小程序頁面
│  ├─user      ---用戶頁面
│  │      index.js
│  │      index.json
│  │      index.wxml
│  │      index.wxss
│  ├─news      ---新聞頁面
│  │      index.js
│  │      index.json
│  │      index.wxml
│  │      index.wxss
│  │      
│  └─home      ---首頁
│         index.js
│         index.json
│         index.wxml
│         index.wxss
│         ...   
│         ...   
│          
├─request      ---https請(qǐng)求管理（根據(jù)switch tab分類會(huì)比較好）
│      common.js    ---一些公共請(qǐng)求獲取，如兌換openId,unionId 等
│      news.js
│      uri.js     --- （重點(diǎn)）總的URI請(qǐng)求管理，方便切換和配置DEV,QA,PROD環(huán)境
│      user.js
│      ...
│      ...
│      
└─utils       ---功能組件
        logger.js    ---日志管理
        util.js       ---公共小組件庫
        ...
        ...
        

例如微信自己的wepy的官方文檔，現(xiàn)在也添加了目錄結(jié)構(gòu)說明：

為什么一定要寫這個(gè)目錄結(jié)構(gòu)呢？
不知道大家有沒有發(fā)現(xiàn)，在以往的老項(xiàng)目交接和多人協(xié)同開發(fā)中，容易遇到別人寫的模塊，變量命名不準(zhǔn)確，或者資料缺損，一次十來個(gè)方法/組件間的互相調(diào)用，直接把接（盤）手的人整懵逼了，所以智庫君覺得，無論是獨(dú)立開發(fā)，還是協(xié)同開發(fā)，留一份完整的目錄說明文檔是很有必要的，勿坑 他人 OR 未來的自己~~~

大家在開發(fā)過程中肯定會(huì)去看官方文檔，但不可能全看完才開始寫代碼，大多數(shù)情況都是用到了再看，本人也是，所以下面抽一些開發(fā)中遇到的重點(diǎn)來講：

組件模板的寫法與頁面模板相同。組件模板與組件數(shù)據(jù)結(jié)合后生成的節(jié)點(diǎn)樹，將被插入到組件的引用位置上。
在組件模板中可以提供一個(gè) 節(jié)點(diǎn)，用于承載組件引用時(shí)提供的子節(jié)點(diǎn)。

  這里是組件的內(nèi)部節(jié)點(diǎn)
  

  
    
    這里是插入到組件slot中的內(nèi)容
    在加載組件的頁面里自定義內(nèi)容，將沒有復(fù)用性的內(nèi)容寫在這里
  

頁面自定義部分默認(rèn)是加載在組件上方。

為什么要在引用組件的頁面添加這些內(nèi)容呢？
因?yàn)榻M件其中一個(gè)重要的特點(diǎn)是復(fù)用性，但是有的時(shí)候可能要根據(jù)不同場(chǎng)景做一些自定義，如果在組件中寫大量的場(chǎng)景/邏輯判斷，會(huì)增加組件的冗余，而且這些方法只是被復(fù)用一次的話，完全可以不寫到組件里。

//組件中js
Component({
    /**
    * 引入外部樣式，可傳多個(gè)class
    */
    externalClasses: ["extra-class","extra-class2"],
})

extra-class 從外部引入父級(jí)css，可用根據(jù)不同場(chǎng)景配置不同的樣式方案，這樣使得組件自定義能力更強(qiáng)。

//service.js  思路示例
module.exports = {
    /**
     * 功能：處理作者列表
     * @param list
     * @returns {Array}
     */
    authorList: function (list = []) {
        let result = [];
        list.forEach(item => {
            result.push({
                guid: item.recommend_obj_id || "",
                type: item.recommend_type || "",
                logo: (item.theme_pic || "").trim() || "",
                title: item.title || ""
            });
        });
        return result;
    }
};

如果外部傳入的數(shù)據(jù)要分別導(dǎo)入多個(gè)組件中，可以在組件中建立一個(gè)對(duì)應(yīng)的service.js，有2個(gè)作用：

清洗數(shù)據(jù)，避免setData()的時(shí)有過多的臟數(shù)據(jù)

錯(cuò)誤數(shù)據(jù)的兼容，添加數(shù)據(jù)缺省值，增加代碼健壯性

    //這里只需要在后面 添加this對(duì)象
    let ctx = wx.createCanvasContext("myCanvas", this);

其他一些默認(rèn)組件，遇到類似的問題，一般只要引用時(shí)傳入this對(duì)象即可解決。

在實(shí)際生產(chǎn)環(huán)境中，我們常常需要控制各個(gè)組件之間的互相通信/傳參，下面介紹下具體的用法：

WXML 數(shù)據(jù)綁定：用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)，僅能設(shè)置 JSON 兼容數(shù)據(jù)（自基礎(chǔ)庫版本 2.0.9 開始，還可以在數(shù)據(jù)中包含函數(shù)）。具體在 組件模板和樣式 章節(jié)中介紹。

事件：用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)。

如果以上兩種方式不足以滿足需要，父組件還可以通過 this.selectComponent 方法獲取子組件實(shí)例對(duì)象，這樣就可以直接訪問組件的任意數(shù)據(jù)和方法。

設(shè)置監(jiān)聽事件：

// index.js 父頁面中
Page({
  setMyEvent: function(e){
    let self = this;
    if (e.detail) { // 自定義組件觸發(fā)事件時(shí)提供的detail對(duì)象
      switch (e.detail) {
        case "hidden":  //隱藏 懸浮框上的評(píng)論
          this.setData({
            isFixCommentShow: false
          });
          break;
        case "fixRefresh":   //刷新懸浮框
          this.setData({
            fixRefresh: true
          });
          break;
        case "commentRefresh":  //刷新評(píng)論
          this.setData({
            commentRefresh: Math.random()
          });
          break;
        case "createPoster":  //生成海報(bào)組件
          self.setPosterSave();
          break;
      }
    }
  }
})

父頁面引用子組件，子組件發(fā)送的信息，可以通過bind的方法監(jiān)聽到，來獲取到具體的傳參值。

觸發(fā)事件

自定義組件觸發(fā)事件時(shí)，需要使用 triggerEvent方法，指定事件名、detail對(duì)象和事件選項(xiàng)：

//組件中js
Component({
  properties: {},
  methods: {
    onTap: function(){
        var myEventDetail = {} // detail對(duì)象，提供給事件監(jiān)聽函數(shù)
        var myEventOption = {} // 觸發(fā)事件的選項(xiàng)
        this.triggerEvent("myevent", myEventDetail, myEventOption)
        //myEventOption的一些配置：
        this.triggerEvent("customevent", {}, { bubbles: true }) // 會(huì)依次觸發(fā) pageEventListener2 、 pageEventListener1
        this.triggerEvent("customevent", {}, { bubbles: true, composed: true }) // 會(huì)依次觸發(fā) pageEventListener2 、 anotherEventListener 、 pageEventListener1
    }
  }
});

myEventOption 的配置：

bubbles（Boolean）：事件是否冒泡

composed（Boolean）：事件是否可以穿越組件邊界，為false時(shí)，事件將只能在引用組件的節(jié)點(diǎn)樹上觸發(fā)，不進(jìn)入其他任何組件內(nèi)部

capturePhase（Boolean）：事件是否擁有捕獲階段

需要強(qiáng)調(diào)一點(diǎn)：建議大家不要在組件上bind太多的監(jiān)聽，一方面以后管理起來會(huì)比較麻煩，另一方面首次加載如果調(diào)用過多方法會(huì)引起數(shù)據(jù)渲染的卡頓。

Component官方文檔：
https://developers.weixin.qq....

往期回顧：

[[填坑手冊(cè)]小程序Canvas生成海報(bào)（一）](https://segmentfault.com/a/11...

[[拆彈時(shí)刻]小程序Canvas生成海報(bào)（二）](https://segmentfault.com/a/11...
、