微信小程序自定義組件(二)

zhonghanwen 發(fā)布于2019-08-23 12:02 / 1247人閱讀

摘要：微信小程序自定義組件由于作業(yè)部落貌似出了點(diǎn)問(wèn)題，耽誤了點(diǎn)時(shí)間，找了一個(gè)準(zhǔn)備寫。微信小程序的官方支持官方提供有一個(gè)模板屬于小程序的自定義腳手架的相關(guān)內(nèi)容。至此，暫時(shí)結(jié)束微信小程序的自定義組件化，明天寫插件。

微信小程序自定義組件

ps 由于作業(yè)部落貌似出了點(diǎn)問(wèn)題，耽誤了點(diǎn)時(shí)間，找了一個(gè)stackedit.io準(zhǔn)備寫。無(wú)奈，這是要自己建編輯器的節(jié)奏啊。沒(méi)有一個(gè)能靠的注

為何存在組件 組件間的關(guān)系

使用relations實(shí)現(xiàn)組件的關(guān)系，即父子關(guān)系。

定義和使用組件間的關(guān)系

有時(shí)需要使用如下的組件間的關(guān)系

  
     item1  
     item2

在上方中，
兩個(gè)以及兩個(gè)組件都為自定義組件，如果進(jìn)行通信會(huì)非常的難以操作，至此通過(guò)relations完成子父組件的定義，簡(jiǎn)化通信。
同樣的以上方的栗子作為舉例。

繼續(xù)上一個(gè)栗子，新建一個(gè)頁(yè)面，在新的頁(yè)面中使用組件間的關(guān)系。

由于同屬于一個(gè)custom大組件，所以直接在components中新建一個(gè)custom文件夾，表示一個(gè)大的新組件
由于其擁有一個(gè)子組件，所以再新建一個(gè)li文件夾，表示custom-li
目錄如下

菜鳥一枚，設(shè)置的不一定正確。也不一定是最正統(tǒng)的，只是感覺(jué)。╮(╯▽╰)╭

設(shè)置custom/custom.js文件的relations的值

// components/custom/custom.js
Component({
  relations: {
    "./li/li" : {
      type: "child",  // 設(shè)置關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)為子節(jié)點(diǎn)
    }
  }
})

接著設(shè)置祖先節(jié)點(diǎn)，即設(shè)置custom/li/li.js文件的內(nèi)容

// components/custom/li/li.js
Component({
  relations: {
    "../../custom": {
      type: "parent"  // 應(yīng)為祖先節(jié)點(diǎn)
    }
  }
})

設(shè)置組件的wxml文件

<！ - 組件/自定義/立/ li.wxml  - >
< view > components / custom / li / li.wxml  < slot />


components/custom/custom.wxml

接著設(shè)置page頁(yè)面的wxml頁(yè)面


hello world

至此完成。

關(guān)聯(lián)一類組件

被微信的路徑折騰的不輕，好吧，無(wú)奈，決定重新寫

微信路徑

微信路徑太坑了。
理所應(yīng)當(dāng)應(yīng)該是

/ 根目錄
../ 父級(jí)目錄
./ 當(dāng)前目錄

結(jié)果非要

../../

至今也沒(méi)搞清楚路徑是這么回事。算了，決定在同一個(gè)目錄下完成模塊的問(wèn)題，不在另外的分一個(gè)模塊的文件夾了。

總說(shuō)

要形成的在page下的結(jié)構(gòu)如下


    
        input
        
    
    shubmit

創(chuàng)建目錄

創(chuàng)建目錄如下

好啦，目錄如上

這一次放棄將模塊放在另外一個(gè)文件夾，這一場(chǎng)所有的和組件相關(guān)的內(nèi)容都放在同一個(gè)文件夾下 。符合組件的精神

其中form表明該為一個(gè)form的組件。module表明組件的內(nèi)容，其中module下還有一個(gè)behaviors表明是behaviors的內(nèi)容的模塊，input和submit表明是其子組件。

behaviors

書寫behaviors的內(nèi)容。

// components/form/module/behaviors/controls

module.exports = Behavior({

// ...

})

父組件

書寫父組件及form的內(nèi)容

// components/form/form.js

var formControls = require("./module/behaviors/controls.js")

Component({

relations: {

"formControls": {

type: "descendant", // 關(guān)聯(lián)目標(biāo)的節(jié)點(diǎn)應(yīng)為子孫節(jié)點(diǎn)

target: formControls // 所有設(shè)置behavior的組件的節(jié)點(diǎn)都為其子孫節(jié)點(diǎn)

}

}

})

繼續(xù)書寫wxml的內(nèi)容,其實(shí)就是添加一個(gè)掛載點(diǎn)的問(wèn)題。



components/form/form.wxml

input組件

// components/form/input/input.js

var formControls = require("../module/behaviors/controls.js")

Component({

behaviors: [formControls],

relations: {

"../form": {

type: "ancestor", // 關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)應(yīng)為祖先節(jié)點(diǎn)

}

}

})

wxml



components/form/input/input.wxml

submit組件

此為from的子組件

// components/form/submit/submit.js

var formControls = require("../module/behaviors/controls.js")

Component({

behaviors: [formControls],

relations: {

"../form": {

type: "ancestor", // 關(guān)聯(lián)的目標(biāo)節(jié)點(diǎn)應(yīng)為祖先節(jié)點(diǎn)s

}

}

})

繼續(xù)寫wxml加上一個(gè)



components/form/submit/submit.wxml

json配置文件

{

"usingComponents": {

"component": "/components/component",

"body": "/components/body/body",

"custom-form": "/components/form/form",

"custom-input": "/components/form/input/input",

"custom-submit": "/components/form/submit/submit"

}

}

編寫頁(yè)面的wxml

完成(^o^)/
至此，根據(jù)一個(gè)behaviors完成一個(gè)組件

抽象性節(jié)點(diǎn)

抽象節(jié)點(diǎn)類似于掛載點(diǎn)，但是和掛載點(diǎn)不同的是，可以通過(guò)屬性來(lái)更改掛載的組件。需要注意的一點(diǎn)是，其值需要為靜態(tài)值，不能為動(dòng)態(tài)值，抽象節(jié)點(diǎn)只能使用靜態(tài)的內(nèi)容。

但是個(gè)人感覺(jué)和掛載點(diǎn)還是有一點(diǎn)類似的作用，不過(guò)這個(gè)是通過(guò)不同的條件達(dá)到調(diào)用的目的。

抽象節(jié)點(diǎn)核心在于調(diào)用的時(shí)候才能確定內(nèi)部需要什么組件，只有調(diào)用才能確認(rèn)需要的組件，核心在于將業(yè)務(wù)和邏輯分離，徹底達(dá)到消除耦合的目的。

組件的目的在于盡可能的減少業(yè)務(wù)邏輯在里面。
注意，組件的確是要盡可能的減少邏輯在里面，因?yàn)榻M件的核心在于復(fù)用，在于大量的復(fù)用。減少重復(fù)代碼的書寫，即將一段業(yè)務(wù)中的重復(fù)的，多次的抽象出來(lái)，提取成為一個(gè)組件，如果因?yàn)槟承┰?，必須要存在一定的業(yè)務(wù)邏輯在里面，這個(gè)時(shí)候就需要抽象節(jié)點(diǎn)。

抽象節(jié)點(diǎn)和掛載點(diǎn)的不同就在上方體現(xiàn)出來(lái)了，抽象節(jié)點(diǎn)是必須有的，但是掛載點(diǎn)可有可無(wú)

抽象節(jié)點(diǎn)的核心在于分離，抽象。
再次感受抽象的重要性

在組件中使用抽象節(jié)點(diǎn)

在自定義模板中的一些節(jié)點(diǎn)，其對(duì)應(yīng)的自定義組件不是由自定義組件本身確定的，由調(diào)用者確定，稱為抽象節(jié)點(diǎn)

這定義╮(╯▽╰)╭

例如下面的代碼

在上方的代碼中，selectable 是由調(diào)用者確定的，需要在調(diào)用的時(shí)候根據(jù)屬性值進(jìn)行替換
還需要在json文件中添加如下的配置

{
    "componentGenerics": {
        "selectable": true
    }
}

直接聲明該節(jié)點(diǎn)為抽象節(jié)點(diǎn)，其值由調(diào)用者確定

使用包含抽象節(jié)點(diǎn)的組件

上方是在代碼中定義抽象節(jié)點(diǎn)。僅僅是定義，還不能使用。
如果要是使用抽象節(jié)點(diǎn)，需要再次添加屬性

generic 為一個(gè)選項(xiàng)

在page頁(yè)面中寫入如下內(nèi)容

表明引入一個(gè)組件，其中的抽象節(jié)點(diǎn)的selectable替換為component內(nèi)容。

需要注意的是，需要在json文件中引入component的內(nèi)容

默認(rèn)組件

即在未指定組件內(nèi)容的時(shí)候使用的組件
在組件文件夾中的json聲明。
此時(shí)不需要使用true即可聲明抽象節(jié)點(diǎn)

{

"usingComponents": {},

"componentGenerics": {

"selectable": {

"default": "/components/component"

}

}

}

自定義組件擴(kuò)展

自定義組件的擴(kuò)展實(shí)質(zhì)為提供了修改自定義組件定義段的能力。使用自定義組件的擴(kuò)展能動(dòng)態(tài)的修改的自定義組件的擴(kuò)展。

一直別一個(gè)及其簡(jiǎn)單的問(wèn)題困擾了很久，es6中新增加的對(duì)象屬性聲明，并賦值，可以直接省去function關(guān)鍵字。

關(guān)于es6

關(guān)于es6的問(wèn)題，是滴，被微信官方文檔的一個(gè)寫法糾結(jié)了很久

module.exports = Behavior({
  definitionFilter(defFields) {
    defFields.data.from = "behavior"
  },
})

就上方的寫法，由于是一種新的寫法，上方的等價(jià)于下方的內(nèi)容

module.exports = Behavior({
    definitionFilter: function definitionfilter(defFields) {
        defFields.data.form = "behavior"
    }
})

僅僅是一種新的es6的寫法。一種聲明私有函數(shù)的方式，一般在組件里聲明私有函數(shù)。這個(gè)時(shí)候，可以直接省去function。
好啦，最大的障礙解決了。

definitionfilter函數(shù)

Behavior() 構(gòu)造器定義了一個(gè)新的段，即definitionfilter段。
該函數(shù)具有兩個(gè)定義段，分別是defFields 以及 definitionFilterAll 此為兩個(gè)參數(shù)
下面解釋這兩個(gè)參數(shù)

defFields參數(shù)

對(duì)于該參數(shù)來(lái)說(shuō)，是當(dāng)前被調(diào)用使用的behavior，這個(gè)灰常簡(jiǎn)單不在多說(shuō)

definitionFilterAll 參數(shù)

這個(gè)參數(shù)為behaviors順序。
使用一個(gè)官方的栗子來(lái)解釋吧

// behavior3.js
module.exports = Behavior({
    definitionFilter(defFields, definitionFilterArr) {},
})

// behavior2.js
module.exports = Behavior({
  behaviors: [require("behavior3.js")],
  definitionFilter(defFields, definitionFilterArr) {
    // definitionFilterArr[0](defFields)
  },
})

// behavior1.js
module.exports = Behavior({
  behaviors: [require("behavior2.js")],
  definitionFilter(defFields, definitionFilterArr) {},
})

// component.js
Component({
  behaviors: [require("behavior1.js")],
})

在上方的栗子中，每個(gè)defFelds都為當(dāng)前調(diào)用的behaviors，而definitionFilterArr是這樣的情況
當(dāng)調(diào)用2的時(shí)候，因?yàn)闀?huì)調(diào)用3的definitionFilter函數(shù)，對(duì)其內(nèi)容進(jìn)行更改，在3中的definitionFilter函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)為2的behavior的定義段，即2中的各項(xiàng)內(nèi)容進(jìn)行更改，第二個(gè)參數(shù)為3的behaviors的內(nèi)容，由于3沒(méi)有引用其他的behaviors，所以為一個(gè)空數(shù)組

總結(jié)，當(dāng)調(diào)用的時(shí)候，第一個(gè)參數(shù)為調(diào)用者的behaviors，而第二個(gè)參數(shù)為其本身的behaviors

當(dāng)進(jìn)行到1的時(shí)候，將會(huì)調(diào)用2的definitionFilter，其2的該函數(shù)的第一個(gè)參數(shù)為1的behaviors，和其他的一些項(xiàng)，第二個(gè)參數(shù)為2引用的behaviors，由于2引用了3的behaviors，而3沒(méi)有引用，所以是一個(gè)只有一項(xiàng)的數(shù)組，該數(shù)組的內(nèi)容為2引用的behaviors，即3的definitionFilter定義段

如果當(dāng)調(diào)用1的時(shí)候，要調(diào)用3的definitionFilter函數(shù)
分析，3的definitionFilter函數(shù)由2的behaviors函數(shù)調(diào)用，而2的·definitionFilter函數(shù)是由1的behaviors調(diào)用，并且3的definitionFilter函數(shù)在2中的definitionFilter函數(shù)的第二個(gè)參數(shù)的第一項(xiàng)(數(shù)組)中有其內(nèi)容，所以需要在2中寫數(shù)組，用來(lái)調(diào)用3的definitionFilter函數(shù)。
所以第2中有definitionFilterArr[0](defFields)表明是調(diào)用3的definitionFilter而參數(shù)defFields表明是2中的behaviors中的內(nèi)容。

同理使用Component構(gòu)造函數(shù)的時(shí)候，將會(huì)調(diào)用1的definitionFilter函數(shù)對(duì)Component內(nèi)容進(jìn)行更改。

最后，總結(jié)就是一句話

當(dāng)調(diào)用的時(shí)候，第一個(gè)參數(shù)為調(diào)用者的behaviors，而第二個(gè)參數(shù)為其本身的behaviors

官方擴(kuò)展包 https://github.com/wechat-min... 實(shí)現(xiàn)動(dòng)態(tài)的計(jì)算屬性

哦。貌似切圖仔最重要的瀑布流還沒(méi)有學(xué)習(xí)

第三方自定義組件

終于到自己的知識(shí)范疇啦。目前已經(jīng)會(huì)node.js和npm，下面的就比較好學(xué)習(xí)了。
微信小程序的官方ide支持npm
官方提供有一個(gè)模板 https://github.com/wechat-min...
屬于小程序的自定義腳手架的相關(guān)內(nèi)容。
官方的事例的組件 https://github.com/wechat-min...
以及官方提供的命令行工具 https://github.com/wechat-min...

命令行工具

npm install -g @wechat-miniprogram/miniprogram-cli

東西有點(diǎn)多

安裝完成以后進(jìn)行初始化

miniprogram init [options] [dirPath]

進(jìn)行選擇即可。

miniprogram

即第三方的自定義組件，custom-component為創(chuàng)建一個(gè)空的自定義組件目錄，miniprogram為一個(gè)小程序的自定義組件的快速的開始，會(huì)有一個(gè)從github上下的一個(gè)模板，寫代碼即可。
屬于腳手架的一部分。

由于涉及到glup，暫時(shí)擱置。

目錄如下

|--miniprogram_dev // 開發(fā)環(huán)境構(gòu)建目錄
|--miniprogram_dist // 生產(chǎn)環(huán)境構(gòu)建目錄
|--src // 源碼
|   |--common // 通用 js 模塊
|   |--components // 通用自定義組件
|   |--images // 圖片資源
|   |--wxml // 通用 wxml 模版資源
|   |--wxs // 通用 wxs 資源
|   |--wxss // 通用 wxss 資源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模塊/自定義組件入口文件
|
|--test // 測(cè)試用例
|--tools // 構(gòu)建相關(guān)代碼
|   |--demo // demo 小程序目錄，開發(fā)環(huán)境下會(huì)被拷貝生成到 miniprogram_dev 目錄中
|   |--test // 測(cè)試工具相關(guān)目錄
|   |--config.js // 構(gòu)建相關(guān)配置文件
|
|--gulpfile.js

即，按照上方進(jìn)行構(gòu)建相關(guān)的組件即可。目前src部分能看明白，暴露的接口和node.js的包如出一轍，都是直接在主文件中進(jìn)行暴露出接口的，最上方兩個(gè)文件，最開始接觸到的是git的工作流，根據(jù)git的工作流也能明白，最后test和tools這一點(diǎn)還有點(diǎn)暈。測(cè)試用例使用下方的命令構(gòu)建出測(cè)試用例。

npm run test

tools中的demo為一個(gè)演示，即開發(fā)者下載下來(lái)內(nèi)容以后將會(huì)直接出現(xiàn)的內(nèi)容，例如，文檔中的使用微信小程序打開這一點(diǎn)就是參考這樣的，
test測(cè)試工具相關(guān)目錄，進(jìn)行測(cè)試的工具存放的目錄。例如進(jìn)行自動(dòng)化測(cè)試的一些腳本要書寫在這里。
config.js為進(jìn)行自動(dòng)化構(gòu)建所要進(jìn)行的文件，

ps 由于構(gòu)建工具未學(xué)，構(gòu)建工具的學(xué)習(xí)重點(diǎn)肯定是配置文件的書寫。以及對(duì)接口的暴露等。

至此，暫時(shí)結(jié)束微信小程序的自定義組件化，明天寫插件。

云服務(wù)器 GPU云服務(wù)器微信小程序組件自定義選擇組件微信小程序微信小程序支付

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97877.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zhonghanwen

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#黑五#DediPath：美國(guó)10個(gè)機(jī)房VPS全部3.5折，低至$27.3/年，1C/1G/10G

閱讀 1079·2021-11-24 10:27
＜LeetCode天梯＞Day027 合并兩個(gè)有序鏈表（遞歸法+改進(jìn)遞歸） | 初級(jí)算法 | Pyt

閱讀 3351·2021-11-18 10:02
C語(yǔ)言初階學(xué)習(xí)——掃雷小游戲（遞歸）

閱讀 2408·2021-11-16 11:45
商標(biāo)到期

閱讀 3173·2021-11-15 18:10
云主機(jī)是干什么的-什么是云主機(jī)？是做什么用的，能簡(jiǎn)單的說(shuō)明白嗎？

閱讀 841·2021-09-22 15:23
雪碧圖的生成

閱讀 1544·2019-08-30 15:53
vue2.0子組件修改父組件數(shù)據(jù)

閱讀 3030·2019-08-30 13:20
你們對(duì)于vw一無(wú)所知

閱讀 1678·2019-08-30 12:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微信小程序自定義組件(二)

相關(guān)文章

微信小程序開發(fā)中遇到的問(wèn)題及解決辦法：微信小程序ad自適應(yīng)布局（二）

微信小程序開發(fā)中遇到的問(wèn)題及解決辦法：微信小程序ad自適應(yīng)布局（二）

微信小程序之如何使用自定義組件封裝原生 image 組件

**自制微信小程序通訊JS**

發(fā)表評(píng)論

0條評(píng)論

zhonghanwen

男|高級(jí)講師

TA的文章

#黑五#DediPath：美國(guó)10個(gè)機(jī)房VPS全部3.5折，低至$27.3/年，1C/1G/10G

＜LeetCode天梯＞Day027 合并兩個(gè)有序鏈表（遞歸法+改進(jìn)遞歸） | 初級(jí)算法 | Pyt

C語(yǔ)言初階學(xué)習(xí)——掃雷小游戲（遞歸）

商標(biāo)到期

云主機(jī)是干什么的-什么是云主機(jī)？是做什么用的，能簡(jiǎn)單的說(shuō)明白嗎？

雪碧圖的生成

vue2.0子組件修改父組件數(shù)據(jù)

你們對(duì)于vw一無(wú)所知

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微信小程序自定義組件(二)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！