資訊專欄INFORMATION COLUMN
摘要：今天要介紹的是小程序的自定義組件，類似的在做開發(fā)的過程中會(huì)用到自定義，封裝成通用的組件可以在不同頁面里重復(fù)使用可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊，便于代碼的維護(hù)。
文章鏈接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ
在前一篇文章 小程序使用之WXS中，介紹了關(guān)于 wxs 的使用，通過wxs處理數(shù)據(jù)再渲染到view層，可以簡化數(shù)據(jù)處理，將通用的數(shù)據(jù)處理封裝起來，避免重復(fù)代碼的使用。
今天要介紹的是小程序的 自定義組件 ，類似的在做android 開發(fā)的過程中會(huì)用到自定義view，封裝成通用的組件可以在不同頁面里重復(fù)使用；可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊，便于代碼的維護(hù)。
一個(gè)自定義組件由js json wxml wxss 4個(gè)文件組成，微信開發(fā)者工具里新建 選擇 Component，會(huì)自動(dòng)創(chuàng)建這個(gè)4個(gè)文件， json文件里設(shè)置：
{
"component": true
}
這一組文件可以當(dāng)做自定義組件使用。
一個(gè)簡單的例子，自定義item當(dāng)做組件使用。
在組件的wxml文件里碼上頁面元素
{{txt}} {{title}} {{subTitle}}
組件提供
wxss是對應(yīng)組件的樣式
.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: "--"
},
}
屬性列表里的值對應(yīng)渲染在組件的wxml里。
/**
* 組件的初始數(shù)據(jù)
*/
data: {
txt:"顏色"
},
組件的內(nèi)部數(shù)據(jù)用于wxml的渲染。
在需要用到組件的頁面json文件里添加，注意路徑是絕對路徑
{
"usingComponents": {
"item": "/component/item/item" //絕對路徑
}
}
wxml頁面內(nèi)直接使用
1、
一個(gè)簡單的頁面渲染
組件也可以接受外部傳入的樣式，在組件的js文件 Component 構(gòu)造器里
Component({
externalClasses: ["title-class"]
})
注意這里使用*-class 的形式定義，在組件的wxml里
{{title}}
外部使用的話，可以看到外部的樣式傳遞給組件使用。
//wxml文件- //wxss .red-class{ color: red }
1、
一個(gè)簡單的組件的例子完成，實(shí)際項(xiàng)目中，通過自定義組件便于在不同的頁面中重復(fù)使用。
歡迎關(guān)注我的個(gè)人博客：https://www.manjiexiang.cn/
更多精彩歡迎關(guān)注微信號：春風(fēng)十里不如認(rèn)識你
一起學(xué)習(xí)，一起進(jìn)步，歡迎上車，有問題隨時(shí)聯(lián)系，一起解決?。?！
更多精彩：
[python itchat 爬取微信好友信息
](https://mp.weixin.qq.com/s?__...
[python爬蟲學(xué)習(xí)：爬蟲QQ說說并生成詞云圖，回憶滿滿
](https://mp.weixin.qq.com/s?__...
[python 圖片在線轉(zhuǎn)字符畫預(yù)覽
](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?__...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53371.html
摘要：今天要介紹的是小程序的自定義組件，類似的在做開發(fā)的過程中會(huì)用到自定義，封裝成通用的組件可以在不同頁面里重復(fù)使用可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊，便于代碼的維護(hù)。 文章鏈接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章 小程序使用之WXS中，介紹了關(guān)于 wxs 的使用，通過wxs處理數(shù)據(jù)再渲染到view層，可以簡...
摘要：什么是自定義分析引用下官方文檔自定義分析支持靈活多維和近實(shí)時(shí)的用戶行為分析，可以通過自定義上報(bào)，對用戶在小程序內(nèi)的行為做精細(xì)化跟蹤，滿足頁面訪問等標(biāo)準(zhǔn)統(tǒng)計(jì)以外的個(gè)性化分析需求。 在小程序后臺，微信已經(jīng)提供了強(qiáng)大的數(shù)據(jù)分析功能，包括實(shí)時(shí)統(tǒng)計(jì)、訪問分析、來源分析和用戶畫像功能，可以說對一般的數(shù)據(jù)分析已經(jīng)完全足夠了，但有時(shí)應(yīng)用需要做一些更加精準(zhǔn)的數(shù)據(jù)分析，比如具體到某一個(gè)頁面的分享，頁面中某...
摘要：什么是自定義分析引用下官方文檔自定義分析支持靈活多維和近實(shí)時(shí)的用戶行為分析，可以通過自定義上報(bào)，對用戶在小程序內(nèi)的行為做精細(xì)化跟蹤，滿足頁面訪問等標(biāo)準(zhǔn)統(tǒng)計(jì)以外的個(gè)性化分析需求。 在小程序后臺，微信已經(jīng)提供了強(qiáng)大的數(shù)據(jù)分析功能，包括實(shí)時(shí)統(tǒng)計(jì)、訪問分析、來源分析和用戶畫像功能，可以說對一般的數(shù)據(jù)分析已經(jīng)完全足夠了，但有時(shí)應(yīng)用需要做一些更加精準(zhǔn)的數(shù)據(jù)分析，比如具體到某一個(gè)頁面的分享，頁面中某...
摘要：什么是自定義分析引用下官方文檔自定義分析支持靈活多維和近實(shí)時(shí)的用戶行為分析，可以通過自定義上報(bào)，對用戶在小程序內(nèi)的行為做精細(xì)化跟蹤，滿足頁面訪問等標(biāo)準(zhǔn)統(tǒng)計(jì)以外的個(gè)性化分析需求。 在小程序后臺，微信已經(jīng)提供了強(qiáng)大的數(shù)據(jù)分析功能，包括實(shí)時(shí)統(tǒng)計(jì)、訪問分析、來源分析和用戶畫像功能，可以說對一般的數(shù)據(jù)分析已經(jīng)完全足夠了，但有時(shí)應(yīng)用需要做一些更加精準(zhǔn)的數(shù)據(jù)分析，比如具體到某一個(gè)頁面的分享，頁面中某...
閱讀 1617·2021-11-23 09:51
閱讀 1186·2019-08-30 13:57
閱讀 2271·2019-08-29 13:12
閱讀 2021·2019-08-26 13:57
閱讀 1205·2019-08-26 11:32
閱讀 984·2019-08-23 15:08
閱讀 711·2019-08-23 14:42
閱讀 3092·2019-08-23 11:41
