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

資訊專欄INFORMATION COLUMN

小程序使用之自定義組件

ztyzz / 2291人閱讀

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

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

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

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

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

{
  "component": true
}

這一組文件可以當(dāng)做自定義組件使用。

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


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

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

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)直接使用標(biāo)簽，該標(biāo)簽下的節(jié)點text 用于填充到內(nèi)


  
    1、

一個簡單的頁面渲染

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

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

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

{{title}}

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

//wxml文件

    1、


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

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

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

更多精彩歡迎關(guān)注微信號：春風(fēng)十里不如認(rèn)識你
一起學(xué)習(xí)，一起進步，歡迎上車，有問題隨時聯(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://systransis.cn/yun/114348.html

相關(guān)文章

  • 小程序使用之自定義組件

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

    Ververica 評論0 收藏0

  • 微信小程序數(shù)據(jù)分析之自定義分析

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

    firim 評論0 收藏0

  • 微信小程序數(shù)據(jù)分析之自定義分析

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

    siberiawolf 評論0 收藏0

  • 微信小程序數(shù)據(jù)分析之自定義分析

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

    abson 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<