小程序使用之自定義組件

Ververica 發布于2019-08-02 12:09 / 2601人閱讀

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

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

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

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

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

{
  "component": true
}

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

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


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

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

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構造器可以指定組件的屬性、數據、方法等。

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

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

/**
* 組件的初始數據
*/
data: {
    txt:"顏色"
},

組件的內部數據用于wxml的渲染。

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

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

wxml頁面內直接使用標簽，該標簽下的節點text 用于填充到內


  
    1、

一個簡單的頁面渲染

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

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

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

{{title}}

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

//wxml文件

    1、


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

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

歡迎關注我的個人博客：https://www.manjiexiang.cn/

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

更多精彩：
[python itchat 爬取微信好友信息
](https://mp.weixin.qq.com/s?__...
[python爬蟲學習：爬蟲QQ說說并生成詞云圖，回憶滿滿
](https://mp.weixin.qq.com/s?__...
[python 圖片在線轉字符畫預覽
](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?__...

云服務器 GPU云服務器小程序組件開發微信小程序組件小程序個人使用怎么使用小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53371.html

小程序使用之自定義組件

摘要：今天要介紹的是小程序的自定義組件，類似的在做開發的過程中會用到自定義，封裝成通用的組件可以在不同頁面里重復使用可以將復雜的頁面拆分成多個低耦合的模塊，便于代碼的維護。文章鏈接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章小程序使用之WXS中，介紹了關于 wxs 的使用，通過wxs處理數據再渲染到view層，可以簡...

ztyzz 2019-08-29 17:28 評論0 收藏0
微信小程序數據分析之自定義分析

摘要：什么是自定義分析引用下官方文檔自定義分析支持靈活多維和近實時的用戶行為分析，可以通過自定義上報，對用戶在小程序內的行為做精細化跟蹤，滿足頁面訪問等標準統計以外的個性化分析需求。在小程序后臺，微信已經提供了強大的數據分析功能，包括實時統計、訪問分析、來源分析和用戶畫像功能，可以說對一般的數據分析已經完全足夠了，但有時應用需要做一些更加精準的數據分析，比如具體到某一個頁面的分享，頁面中某...

firim 2019-07-01 10:32 評論0 收藏0
微信小程序數據分析之自定義分析

摘要：什么是自定義分析引用下官方文檔自定義分析支持靈活多維和近實時的用戶行為分析，可以通過自定義上報，對用戶在小程序內的行為做精細化跟蹤，滿足頁面訪問等標準統計以外的個性化分析需求。在小程序后臺，微信已經提供了強大的數據分析功能，包括實時統計、訪問分析、來源分析和用戶畫像功能，可以說對一般的數據分析已經完全足夠了，但有時應用需要做一些更加精準的數據分析，比如具體到某一個頁面的分享，頁面中某...

siberiawolf 2019-08-26 12:14 評論0 收藏0
微信小程序數據分析之自定義分析

摘要：什么是自定義分析引用下官方文檔自定義分析支持靈活多維和近實時的用戶行為分析，可以通過自定義上報，對用戶在小程序內的行為做精細化跟蹤，滿足頁面訪問等標準統計以外的個性化分析需求。在小程序后臺，微信已經提供了強大的數據分析功能，包括實時統計、訪問分析、來源分析和用戶畫像功能，可以說對一般的數據分析已經完全足夠了，但有時應用需要做一些更加精準的數據分析，比如具體到某一個頁面的分享，頁面中某...

abson 2019-08-02 11:17 評論0 收藏0