小編給大家分享一下如何實現微信小程序組件化，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創新互聯公司是一家業務范圍包括IDC托管業務,虛擬空間、主機租用、主機托管，四川、重慶、廣東電信服務器租用,資陽移動機房，成都網通服務器托管,成都服務器租用,業務范圍遍及中國大陸、港澳臺以及歐美等多個國家及地區的互聯網數據服務公司。

本文主要和大家分享微信小程序組件化的解決思路和方法，從小程序基礎庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。查看自己使用的小程序基礎庫版本，可以通過在開發者工具右側點擊詳情查看：最基本的組件。

小程序的組件，其實就是一個目錄，該目錄需要包含4個文件：

xxx.json

xxx.wxml

xxx.wxss

xxx.js

聲明一個組件

首先需要在 json 文件中進行自定義組件聲明（將 component 字段設為 true 可這一組文件設為自定義組件）

{
"component": true
}

其次，在要引入組件的頁面的json文件內，進行引用聲明

{
"usingComponents": {
//自定義的組件名稱     ： 組件路徑，注意是相對路徑，不能是絕對路徑  
"component-tag-name": "path/to/the/custom/component"
}
}

這樣，在主頁面就可以使用了。

相比于vue的組件引入，小程序的方案更簡潔。vue組件引入是需要 import 之后，同時在 components 里面注冊，而小程序的組件只需要在 .json 里面注冊，就可以在 wxml 里面使用。

使用slot

和vue 相同，小程序也有slot概念。

單一slot

在組件模板中可以提供一個 <slot> 節點，用于承載組件引用時提供的子節點。

// 主頁面內，<addlike>是組件
<addlike item="item" my_properties="sssss">
<text>我是被slot插入的文本</text>
</addlike>
// addlike 組件
<view class="container">
<view>hello, 這里是組件</view>
<view>hello, {{my_properties}}</view>
<slot></slot>
</view>
// 渲染后
<view class="container">
<view>hello, 這里是組件</view>
<view>hello, {{my_properties}}</view>
<text>我是被slot插入的文本</text>
</view>

多個slot

如果需要在組件內使用多個slot， 需要在組件js中聲明啟用：

Component({
 options: {
   multipleSlots: true // 在組件定義時的選項中啟用多slot支持
},
 properties: { /* ... */ },
 methods: { /* ... */ }
})

使用：

// 主頁面
<addlike item="item" my_properties="sssss">
// 在普通的元素上加入 slot 屬性，指定slotname, 就可以變成子元素的slot了
<text slot="slot1">我是被slot1插入的文本</text>
<text slot="slot2">我是被slot2插入的文本</text>
</addlike>

// 子頁面
<view class="container">
<view>hello, 這里是組件</view>
<view>hello, {{my_properties}}</view>
<slot name="slot1"></slot>
<slot name="slot2"></slot>
</view>

Component構造器

剛才我們說了，一個組件內應該包括js, wxml, wxss, json 四個文件。wxml 相當于是 HTML，wxss 相當于是 css, 那么js 里面應該寫什么呢？

微信官方提供的案例中：

Component({
 behaviors: [],
 properties: {
},
 data: {}, // 私有數據，可用于模版渲染
// 生命周期函數，可以為函數，或一個在methods段中定義的方法名
 attached: function(){},
 moved: function(){},
 detached: function(){},
 methods: {
   onMyButtonTap: function(){
},
   _myPrivateMethod: function(){
},
   _propertyChange: function(newVal, oldVal) {
}
}
})

里面調用了一個Component構造器。Component構造器可用于定義組件，調用Component構造器時可以指定組件的屬性、數據、方法等。具體 Component里面可以放什么東西，如下所示：

組件與數據通信

組件化必然要涉及到數據的通信，為了解決數據在組件間的維護問題，vue, react，angular 有不同的解決方案。而小程序的解決方案則簡潔很多。

主頁面傳入數據到組件

properties相當于vue的props，是傳入外部數據的入口。

// 主頁面使用組件
<a add_like="{{add_like}}">
</a>
// 組件a.js 內
Component({
   properties:{
       add_like:{
           type:Array,
           value:[],
           observer:function(){
}
}
}
})

注意： 傳入的數據，不管是簡單數據類型，還是引用類型，都如同值復制一樣（和紅寶書里面描述js函數參數傳入是值復制還不一樣，紅寶書里面的意思是：簡單數據類型直接復制數值，引用類型復制引用，也就是說在函數內修改參數對象的屬性，會影響到函數外對象的屬性）。

如果是Vue的props， 則可以通過 .sync 來同步，而在小程序子組件里面，調用this.setData()修改父組件內的數據，不會影響到父組件里面的數據, 也就是說，子組件property的修改，仿佛和父組件沒有任何關系。那么，如果是在子組件內修改父組件的數據，甚至是修改兄弟組件內的數據，有沒有簡單的方法呢？下面會有講到

組件傳出數據到主頁面

和vue類似，組件間交互的主要形式是自定義事件。

組件通過 this.triggerEvent() 觸發自定義事件，主頁面在組件上 bind:component_method="main_page_mehod" 來接收自定義事件。

其中，this.triggerEvent() 方法接收自定義事件名稱外，還接收兩個對象，eventDetail 和 eventOptions。

// 子組件觸發自定義事件
ontap () {
// 所有要帶到主頁面的數據，都裝在eventDetail里面
var eventDetail = {
name:'sssssssss',
test:[1,2,3]
}
// 觸發事件的選項 bubbles是否冒泡，composed是否可穿越組件邊界，capturePhase 是否有捕獲階段
var eventOption = {
composed: true
}
this.triggerEvent('click_btn', eventDetail, eventOption)
}
// 主頁面里面
main_page_ontap (eventDetail) {
   console.log(eventDetail)
// eventDetail
// changedTouches
// currentTarget
// target
// type
// ……
// detail   哈哈，所有的子組件的數據，都通過該參數的detail屬性暴露出來
}

組件之間數據通信

和vue提出的vuex的解決方案不同，小程序的組件間的通訊簡單小巧。你可以和主頁面與組件通訊一樣，使用自定義事件來進行通訊，當然更簡單方便的方法，是使用小程序提供的relations.

relations 是Component 構造函數中的一個屬性，只要兩個組件的relations 屬性產生關聯，他們兩個之間就可以捕獲到對方，并且可以相互訪問，修改對方的屬性，如同修改自己的屬性一樣。

Component({
  relations:{
'./path_to_b': { // './path_to_b'是對方組件的相對路徑
       type: 'child', //  type可選擇兩組：parent和child、ancestor和descendant
       linked:function(target){ } // 鉤子函數，在組件linked時候被調用 target是組件的實例，
       linkChanged: function(target){}
       unlinked: function(target){}
}
},
})

比如說，有兩個組件如代碼所示：

// 組件a slot 包含了組件b<a><b></b></a>

他們之間的關系如下圖所示：

兩個組件捕獲到對方組件的實例，是通過 this.getRelationNodes('./path_to_a')方法。既然獲取到了對方組件的實例，那么就可以訪問到對方組件上的data, 也可以設置對方組件上的data, 但是不能調用對方組件上的方法。

// 在a 組件中
Component({
  relations:{
'./path_to_b': {
          type: 'child',
          linked:function(target){ } // target是組件b的實例，
          linkChanged: function(target){}
          unlinked: function(target){}
}
},
  methods:{
      test () {
var nodes = this.getRelationNodes('./path_to_b')
var component_b = nodes[0];

// 獲取到b組件的數據
          console.log(component_b.data.name)

// 設置父組件的數據
// 這樣的設置是無效的
this.setData({
              component_b.data.name:'ss'
})
// 需要調用對方組件的setData()方法來設置
          component_b.setData({
              name:'ss'
})
}
}
})

// 在b 組件里面
Component({
  relations:{
'./path_to_a': { //注意！必須雙方組件都聲明relations屬性
          type:'parent'
}
},
  data: {
      name: 'dudu'
}
})
注意：1. 主頁面使用組件的時候，不能有數字，比如說 <component_sub1> 或 <component_sub_1>，可以在主頁面的json 里面設置一個新名字
{
"usingComponents":{
"test_component_subb": "../../../components/test_component_sub2/test_component_sub2"
}
}

2. relations 里面的路徑，比如說這里：

是對方組件真實的相對路徑，而不是組件間的邏輯路徑。

3. 如果relations 沒有關聯，那么 this.getRelationNodes 是獲取不到對方組件的

4. 本組件無法獲取本組件的實例，使用this.getRelatonsNodes('./ path_to_self ') 會返回一個null

4. type 可以選擇的 parent 、 child 、 ancestor 、 descendant

現在我們已經可以做到了兩個組件之間的數據傳遞，那么如何在多個組件間傳遞數據呢？

如上圖所示，同級的組件b 和同級的組件c , b 和 c 之間不可以直接獲取，b可以獲取到a， c 也可以獲取到a，而a可以直接獲取到 b 和 c。所以，如果想獲取到兄弟元素，需要先獲取到祖先節點，然后再通過祖先節點獲取兄弟節點

我在組件b 里面，我需要先找到祖先組件a的實例，然后用祖先組件a的實例的getRelationNodes方法獲取到組件c的實例。

看見沒？恐怕我們又要寫一大堆重復性的代碼了。

幸好，微信小程序還提供了behavior 屬性, 這個屬性相當于 mixin，很容易理解的，是提高代碼復用性的一種方法。

思路：

假設目前有三個組件，組件a, 組件b, 組件c， 其中組件b和組件c是兄弟組件，組建a是b和c的兄弟組件。為了減少代碼的重復性，我們把獲取父組件的方法，和獲取兄弟組件的方法封裝一下，封裝在 behavior 的 methods 中。只要是引入該behavior的組件，都可以便捷的調用方法。

實現：

新建一個behavior文件，命名無所謂，比如說relation_behavior.js

// 在 get_relation.js 文件里面
module.exports = Behavior({
methods:{
// 獲取父組件實例的快捷方法
_parent () {
// 如果根據該路徑獲取到acestor組件為null，則說明this為ancesor
var parentNode = this.getRelationNodes('../record_item/record_item')
if (parentNode&&parentNode.length !== 0) {
return parentNode[0]
} else {
return this
}
},
// 獲取兄弟組件實例的快捷方法
_sibling(name) {
var node = this._parent().getRelationNodes(`../${name}/${name}`)
if (node &&node.length > 0) {
return node[0]
}
}
}
})

然后在組件b, 和 組件c 上引入該behavior，并且調用方法，獲取父組件和兄弟組件的實例

// 組件b中
var relation_behavior = require('./path_to_relation_behavior')
Component({
   behaviors:[relation_behavior],
   methods:{
       test () {
// 獲得父組件的實例
let parent = this._parent()
// 訪問父組件的數據d
           console.log(parent.data.name)
// 修改父組件的數據
           parent.setData({
               name: 'test1'
})
// 獲得兄弟組件的實例
let sibling = this._sibling('c')
// 訪問兄弟組件的數據
           console.log(sibling.data.name)
// 修改兄弟組件的數據
           sibling.setData({
               name:"test"
})
}
}
})
// 組件c中
var relation_behavior = require('./path_to_relation_behavior')
Component({
   behaviors:[relation_behavior],
   methods:{
       test () {
// 獲得父組件的實例
let parent = this._parent()
// 訪問父組件的數據d
           console.log(parent.data.name)
// 修改父組件的數據
           parent.setData({
               name: 'test1'
})
// 獲得兄弟組件的實例
let sibling = this._sibling('b')
// 訪問兄弟組件的數據
           console.log(sibling.data.name)
// 修改兄弟組件的數據
           sibling.setData({
               name:"test"
})
}
}
})

同時需要注意，c和b兩個組件，從relations屬性的角度來說，是a的后代組件。

但是組件b和組件c 所處的作用域, 都是主頁面的作用域，傳入的property都是主頁面的property，這樣就保證了組件數據的靈活性。relations 像一個隱形的鏈子一樣把一堆組件關聯起來，關聯起來的組件可以相互訪問，修改對方的數據，但是每一個組件都可以從外界獨立的獲取數據。

看了這么多理論的東西，還是需要一個具體的場景來應用。

比如說，我們有個一個分享記錄圖片心情的頁面，當用戶點擊【點贊】的按鈕時候，該心情的記錄 點贊按鈕會變紅，下面的一欄位置會多出點贊人的名字。

如果不通過組件化，很可能的做法是 修改一個點贊按鈕，然后遍歷數據更新數據，最后所有記錄列表的狀態都會被重新渲染一遍。

如果是通過組件化拆分：把點贊的按鈕封裝為 組件b, 下面點贊人的框封裝為組件c, 每一個心情記錄都是一個組件a

下面是代碼實現

// 在主頁面內
<view wx:for='{{feed_item}}'>
<a item='{{item}}'>
<b></b>
<c></c>
</a>
<view>
// 在組件a內
var behavior_relation = require('../../relation_behavior.js)  //這里引入上文說的Behavior
Component({
   behaviors:[behavior_relation],
   relations:{
       '../b/b':{
           type: 'descendant'
       }
   }
})
// 在組件b內
var behavior_relation = require('../../relation_behavior.js) //這里引入上文說的Behavior
Component({
   behaviors:[behavior_relation]
   relations:{
'../a/a':{
           type: 'ancestor'
}
},
   data: {
       is_like: false //控制點贊圖標的狀態
},
   methods:{
// 當用戶點贊的時候
       onClick () {
//  修改本組件的狀態
this.setData({
               is_like: true
})
// 修改 c 組件的數據
this._sibling('c').setData({
               likeStr: this._sibling('c').data.likeStr + '我' 
})
}
}
})
// 在組件c內
var behavior_relation = require('../../relation_behavior.js)  //這里引入上文說的Behavior
Component({
   behaviors:[behavior_relation],
   relations:{
       '../a/a':{
           type: 'ancestor'
       }
   },
   data:{
       likeStr:'曉紅，小明'
   }
})

這樣，組件b 可以修改組件c中的數據。同時，組件b 和 組件c 又可以通過 properties 和 事件系統，和主頁面保持獨立的數據通信。

以上是“如何實現微信小程序組件化”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

標題名稱：如何實現微信小程序組件化
文章來源：http://vcdvsql.cn/article40/pepjeo.html

成都網站建設公司_創新互聯，為您提供企業網站制作、虛擬主機、網頁設計公司、App設計、品牌網站建設、ChatGPT

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯