如何實現(xiàn)微信小程序組件化
小編給大家分享一下如何實現(xiàn)微信小程序組件化，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司是一家業(yè)務范圍包括IDC托管業(yè)務,虛擬空間、主機租用、主機托管，四川、重慶、廣東電信服務器租用,資陽移動機房，成都網(wǎng)通服務器托管,成都服務器租用,業(yè)務范圍遍及中國大陸、港澳臺以及歐美等多個國家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務公司。
本文主要和大家分享微信小程序組件化的解決思路和方法，從小程序基礎庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。查看自己使用的小程序基礎庫版本，可以通過在開發(fā)者工具右側點擊詳情查看：最基本的組件。
小程序的組件，其實就是一個目錄，該目錄需要包含4個文件：
xxx.json
xxx.wxml
xxx.wxss
xxx.js
聲明一個組件
首先需要在 json 文件中進行自定義組件聲明（將 component 字段設為 true 可這一組文件設為自定義組件）
{
"component": true
}其次，在要引入組件的頁面的json文件內(nèi)，進行引用聲明
{
"usingComponents": {
//自定義的組件名稱 ： 組件路徑，注意是相對路徑，不能是絕對路徑
"component-tag-name": "path/to/the/custom/component"
}
}這樣，在主頁面就可以使用了。
相比于vue的組件引入，小程序的方案更簡潔。vue組件引入是需要 import 之后，同時在 components 里面注冊，而小程序的組件只需要在 .json 里面注冊，就可以在 wxml 里面使用。
使用slot
和vue 相同，小程序也有slot概念。
單一slot
在組件模板中可以提供一個 <slot> 節(jié)點，用于承載組件引用時提供的子節(jié)點。
// 主頁面內(nèi)，<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
如果需要在組件內(nèi)使用多個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構造器
剛才我們說了，一個組件內(nèi)應該包括js, wxml, wxss, json 四個文件。wxml 相當于是 HTML，wxss 相當于是 css, 那么js 里面應該寫什么呢？
微信官方提供的案例中：
Component({
behaviors: [],
properties: {
},
data: {}, // 私有數(shù)據(jù)，可用于模版渲染
// 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名
attached: function(){},
moved: function(){},
detached: function(){},
methods: {
onMyButtonTap: function(){
},
_myPrivateMethod: function(){
},
_propertyChange: function(newVal, oldVal) {
}
}
})里面調(diào)用了一個Component構造器。Component構造器可用于定義組件，調(diào)用Component構造器時可以指定組件的屬性、數(shù)據(jù)、方法等。具體 Component里面可以放什么東西，如下所示：
組件與數(shù)據(jù)通信
組件化必然要涉及到數(shù)據(jù)的通信，為了解決數(shù)據(jù)在組件間的維護問題，vue, react，angular 有不同的解決方案。而小程序的解決方案則簡潔很多。
主頁面?zhèn)魅霐?shù)據(jù)到組件
properties相當于vue的props，是傳入外部數(shù)據(jù)的入口。
// 主頁面使用組件
<a add_like="{{add_like}}">
</a>
// 組件a.js 內(nèi)
Component({
properties:{
add_like:{
type:Array,
value:[],
observer:function(){
}
}
}
})注意： 傳入的數(shù)據(jù)，不管是簡單數(shù)據(jù)類型，還是引用類型，都如同值復制一樣（和紅寶書里面描述js函數(shù)參數(shù)傳入是值復制還不一樣，紅寶書里面的意思是：簡單數(shù)據(jù)類型直接復制數(shù)值，引用類型復制引用，也就是說在函數(shù)內(nèi)修改參數(shù)對象的屬性，會影響到函數(shù)外對象的屬性）。
如果是Vue的props， 則可以通過 .sync 來同步，而在小程序子組件里面，調(diào)用this.setData()修改父組件內(nèi)的數(shù)據(jù)，不會影響到父組件里面的數(shù)據(jù), 也就是說，子組件property的修改，仿佛和父組件沒有任何關系。那么，如果是在子組件內(nèi)修改父組件的數(shù)據(jù)，甚至是修改兄弟組件內(nèi)的數(shù)據(jù)，有沒有簡單的方法呢？下面會有講到
組件傳出數(shù)據(jù)到主頁面
和vue類似，組件間交互的主要形式是自定義事件。
組件通過 this.triggerEvent() 觸發(fā)自定義事件，主頁面在組件上 bind:component_method="main_page_mehod" 來接收自定義事件。
其中，this.triggerEvent() 方法接收自定義事件名稱外，還接收兩個對象，eventDetail 和 eventOptions。
// 子組件觸發(fā)自定義事件
ontap () {
// 所有要帶到主頁面的數(shù)據(jù)，都裝在eventDetail里面
var eventDetail = {
name:'sssssssss',
test:[1,2,3]
}
// 觸發(fā)事件的選項 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 哈哈，所有的子組件的數(shù)據(jù)，都通過該參數(shù)的detail屬性暴露出來
}組件之間數(shù)據(jù)通信
和vue提出的vuex的解決方案不同，小程序的組件間的通訊簡單小巧。你可以和主頁面與組件通訊一樣，使用自定義事件來進行通訊，當然更簡單方便的方法，是使用小程序提供的relations.
relations 是Component 構造函數(shù)中的一個屬性，只要兩個組件的relations 屬性產(chǎn)生關聯(lián)，他們兩個之間就可以捕獲到對方，并且可以相互訪問，修改對方的屬性，如同修改自己的屬性一樣。
Component({
relations:{
'./path_to_b': { // './path_to_b'是對方組件的相對路徑
type: 'child', // type可選擇兩組：parent和child、ancestor和descendant
linked:function(target){ } // 鉤子函數(shù)，在組件linked時候被調(diào)用 target是組件的實例，
linkChanged: function(target){}
unlinked: function(target){}
}
},
})比如說，有兩個組件如代碼所示：
// 組件a slot 包含了組件b<a><b></b></a>
他們之間的關系如下圖所示：
兩個組件捕獲到對方組件的實例，是通過 this.getRelationNodes('./path_to_a')方法。既然獲取到了對方組件的實例，那么就可以訪問到對方組件上的data, 也可以設置對方組件上的data, 但是不能調(diào)用對方組件上的方法。
// 在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組件的數(shù)據(jù)
console.log(component_b.data.name)
// 設置父組件的數(shù)據(jù)
// 這樣的設置是無效的
this.setData({
component_b.data.name:'ss'
})
// 需要調(diào)用對方組件的setData()方法來設置
component_b.setData({
name:'ss'
})
}
}
})
// 在b 組件里面
Component({
relations:{
'./path_to_a': { //注意！必須雙方組件都聲明relations屬性
type:'parent'
}
},
data: {
name: 'dudu'
}
})
注意：1. 主頁面使用組件的時候，不能有數(shù)字，比如說 <component_sub1> 或 <component_sub_1>，可以在主頁面的json 里面設置一個新名字
{
"usingComponents":{
"test_component_subb": "../../../components/test_component_sub2/test_component_sub2"
}
}2. relations 里面的路徑，比如說這里：
是對方組件真實的相對路徑，而不是組件間的邏輯路徑。
3. 如果relations 沒有關聯(lián)，那么 this.getRelationNodes 是獲取不到對方組件的
4. 本組件無法獲取本組件的實例，使用this.getRelatonsNodes('./ path_to_self ') 會返回一個null
4. type 可以選擇的 parent 、 child 、 ancestor 、 descendant
現(xiàn)在我們已經(jīng)可以做到了兩個組件之間的數(shù)據(jù)傳遞，那么如何在多個組件間傳遞數(shù)據(jù)呢？
如上圖所示，同級的組件b 和同級的組件c , b 和 c 之間不可以直接獲取，b可以獲取到a， c 也可以獲取到a，而a可以直接獲取到 b 和 c。所以，如果想獲取到兄弟元素，需要先獲取到祖先節(jié)點，然后再通過祖先節(jié)點獲取兄弟節(jié)點
我在組件b 里面，我需要先找到祖先組件a的實例，然后用祖先組件a的實例的getRelationNodes方法獲取到組件c的實例。
看見沒？恐怕我們又要寫一大堆重復性的代碼了。
幸好，微信小程序還提供了behavior 屬性, 這個屬性相當于 mixin，很容易理解的，是提高代碼復用性的一種方法。
思路：
假設目前有三個組件，組件a, 組件b, 組件c， 其中組件b和組件c是兄弟組件，組建a是b和c的兄弟組件。為了減少代碼的重復性，我們把獲取父組件的方法，和獲取兄弟組件的方法封裝一下，封裝在 behavior 的 methods 中。只要是引入該behavior的組件，都可以便捷的調(diào)用方法。
實現(xiàn)：
新建一個behavior文件，命名無所謂，比如說relation_behavior.js
// 在 get_relation.js 文件里面
module.exports = Behavior({
methods:{
// 獲取父組件實例的快捷方法
_parent () {
// 如果根據(jù)該路徑獲取到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，并且調(diào)用方法，獲取父組件和兄弟組件的實例
// 組件b中
var relation_behavior = require('./path_to_relation_behavior')
Component({
behaviors:[relation_behavior],
methods:{
test () {
// 獲得父組件的實例
let parent = this._parent()
// 訪問父組件的數(shù)據(jù)d
console.log(parent.data.name)
// 修改父組件的數(shù)據(jù)
parent.setData({
name: 'test1'
})
// 獲得兄弟組件的實例
let sibling = this._sibling('c')
// 訪問兄弟組件的數(shù)據(jù)
console.log(sibling.data.name)
// 修改兄弟組件的數(shù)據(jù)
sibling.setData({
name:"test"
})
}
}
})
// 組件c中
var relation_behavior = require('./path_to_relation_behavior')
Component({
behaviors:[relation_behavior],
methods:{
test () {
// 獲得父組件的實例
let parent = this._parent()
// 訪問父組件的數(shù)據(jù)d
console.log(parent.data.name)
// 修改父組件的數(shù)據(jù)
parent.setData({
name: 'test1'
})
// 獲得兄弟組件的實例
let sibling = this._sibling('b')
// 訪問兄弟組件的數(shù)據(jù)
console.log(sibling.data.name)
// 修改兄弟組件的數(shù)據(jù)
sibling.setData({
name:"test"
})
}
}
})同時需要注意，c和b兩個組件，從relations屬性的角度來說，是a的后代組件。
但是組件b和組件c 所處的作用域, 都是主頁面的作用域，傳入的property都是主頁面的property，這樣就保證了組件數(shù)據(jù)的靈活性。relations 像一個隱形的鏈子一樣把一堆組件關聯(lián)起來，關聯(lián)起來的組件可以相互訪問，修改對方的數(shù)據(jù)，但是每一個組件都可以從外界獨立的獲取數(shù)據(jù)。
看了這么多理論的東西，還是需要一個具體的場景來應用。
比如說，我們有個一個分享記錄圖片心情的頁面，當用戶點擊【點贊】的按鈕時候，該心情的記錄 點贊按鈕會變紅，下面的一欄位置會多出點贊人的名字。
如果不通過組件化，很可能的做法是 修改一個點贊按鈕，然后遍歷數(shù)據(jù)更新數(shù)據(jù)，最后所有記錄列表的狀態(tài)都會被重新渲染一遍。
如果是通過組件化拆分：把點贊的按鈕封裝為 組件b, 下面點贊人的框封裝為組件c, 每一個心情記錄都是一個組件a
下面是代碼實現(xiàn)
// 在主頁面內(nèi)
<view wx:for='{{feed_item}}'>
<a item='{{item}}'>
<b></b>
<c></c>
</a>
<view>
// 在組件a內(nèi)
var behavior_relation = require('../../relation_behavior.js) //這里引入上文說的Behavior
Component({
behaviors:[behavior_relation],
relations:{
'../b/b':{
type: 'descendant'
}
}
})
// 在組件b內(nèi)
var behavior_relation = require('../../relation_behavior.js) //這里引入上文說的Behavior
Component({
behaviors:[behavior_relation]
relations:{
'../a/a':{
type: 'ancestor'
}
},
data: {
is_like: false //控制點贊圖標的狀態(tài)
},
methods:{
// 當用戶點贊的時候
onClick () {
// 修改本組件的狀態(tài)
this.setData({
is_like: true
})
// 修改 c 組件的數(shù)據(jù)
this._sibling('c').setData({
likeStr: this._sibling('c').data.likeStr + '我'
})
}
}
})
// 在組件c內(nèi)
var behavior_relation = require('../../relation_behavior.js) //這里引入上文說的Behavior
Component({
behaviors:[behavior_relation],
relations:{
'../a/a':{
type: 'ancestor'
}
},
data:{
likeStr:'曉紅，小明'
}
})這樣，組件b 可以修改組件c中的數(shù)據(jù)。同時，組件b 和 組件c 又可以通過 properties 和 事件系統(tǒng)，和主頁面保持獨立的數(shù)據(jù)通信。
以上是“如何實現(xiàn)微信小程序組件化”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
標題名稱：如何實現(xiàn)微信小程序組件化
文章來源：http://sd-ha.com/article40/pepjeo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、虛擬主機、網(wǎng)頁設計公司、App設計、品牌網(wǎng)站建設、ChatGPT
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 全網(wǎng)營銷有步驟嗎？ 2015-06-23
- 網(wǎng)絡營銷平臺有哪些，全網(wǎng)營銷推廣的方式 2023-04-27
- 鳳陽全網(wǎng)營銷推廣都有哪些推廣方式 2020-12-11
- 全網(wǎng)營銷推廣方案 2022-12-17
- 為什么要做全網(wǎng)營銷?全網(wǎng)營銷有哪些好處? 2015-05-14
- 怎樣制定一個完整的全網(wǎng)營銷方案? 2015-09-23
- 企業(yè)做全網(wǎng)營銷的必要性 2015-05-27
- 企業(yè)全網(wǎng)營銷型網(wǎng)站建設的重點有哪一些？ 2016-11-07
- 全網(wǎng)營銷型網(wǎng)站與傳統(tǒng)企業(yè)網(wǎng)站有何區(qū)別 2016-10-13
- 互聯(lián)網(wǎng)營銷時代全網(wǎng)營銷推廣是重點 2021-01-27
- 如何做好全網(wǎng)營銷推廣 2016-11-09
- 全網(wǎng)營銷具體指的是什么呢? 2014-07-07