小程序使用之自定義組件

ztyzz 發(fā)布于2019-08-29 17:28 / 2279人閱讀

摘要：今天要介紹的是小程序的自定義組件，類似的在做開發(fā)的過程中會用到自定義，封裝成通用的組件可以在不同頁面里重復使用可以將復雜的頁面拆分成多個低耦合的模塊，便于代碼的維護。

文章鏈接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ

在前一篇文章小程序使用之WXS中，介紹了關(guān)于 wxs 的使用，通過wxs處理數(shù)據(jù)再渲染到view層，可以簡化數(shù)據(jù)處理，將通用的數(shù)據(jù)處理封裝起來，避免重復代碼的使用。

今天要介紹的是小程序的自定義組件，類似的在做android 開發(fā)的過程中會用到自定義view，封裝成通用的組件可以在不同頁面里重復使用；可以將復雜的頁面拆分成多個低耦合的模塊，便于代碼的維護。

一個自定義組件由js json wxml wxss 4個文件組成，微信開發(fā)者工具里新建選擇 Component，會自動創(chuàng)建這個4個文件， json文件里設置：

{
  "component": true
}

這一組文件可以當做自定義組件使用。

一個簡單的例子，自定義item當做組件使用。
在組件的wxml文件里碼上頁面元素


  {{txt}}
  
    
      
      {{title}}
    
    {{subTitle}}

組件提供節(jié)點，用于承載組件在引用時提供的子節(jié)點，可以當做占位的標志，后面可以將視圖直接填充到此節(jié)點。

wxss是對應組件的樣式

.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px
}
.title{
  color: #424242
}
.subTitle{
  color: #939393;
  font-size: 16px
}

js文件里的Component構(gòu)造器可以指定組件的屬性、數(shù)據(jù)、方法等。

/**
* 組件的屬性列表
*/
properties: {
    title: {
      type: String, //屬性類型
      value: "--" //屬性初始值
    },
    subTitle: {
      type: String,
      value: "--" 
    },
}

屬性列表里的值對應渲染在組件的wxml里。

/**
* 組件的初始數(shù)據(jù)
*/
data: {
    txt:"顏色"
},

組件的內(nèi)部數(shù)據(jù)用于wxml的渲染。

在需要用到組件的頁面json文件里添加，注意路徑是絕對路徑

{
  "usingComponents": {
    "item": "/component/item/item" //絕對路徑
  }
}

wxml頁面內(nèi)直接使用標簽，該標簽下的節(jié)點text 用于填充到內(nèi)


  
    1、

一個簡單的頁面渲染

組件也可以接受外部傳入的樣式，在組件的js文件 Component 構(gòu)造器里

Component({
  externalClasses: ["title-class"]
})

注意這里使用*-class 的形式定義，在組件的wxml里

{{title}}

外部使用的話，可以看到外部的樣式傳遞給組件使用。

//wxml文件

    1、


//wxss
.red-class{
  color: red
}

一個簡單的組件的例子完成，實際項目中，通過自定義組件便于在不同的頁面中重復使用。

歡迎關(guān)注我的個人博客：https://www.manjiexiang.cn/

更多精彩歡迎關(guān)注微信號：春風十里不如認識你
一起學習，一起進步，歡迎上車，有問題隨時聯(lián)系，一起解決！！！

更多精彩：
[python itchat 爬取微信好友信息
](https://mp.weixin.qq.com/s?__...
[python爬蟲學習：爬蟲QQ說說并生成詞云圖，回憶滿滿
](https://mp.weixin.qq.com/s?__...
[python 圖片在線轉(zhuǎn)字符畫預覽
](https://mp.weixin.qq.com/s?__...
[android 仿微信表情雨下落！
](https://mp.weixin.qq.com/s?__...
[仿支付寶首頁頭部伸縮效果
](https://mp.weixin.qq.com/s?__...
[一款屬于自己的小程序
](https://mp.weixin.qq.com/s?__...