400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】微信小程序之自定義組件創建及使用

【Web前端基礎知識】微信小程序之自定義組件創建及使用

  • 發布: Web前端培訓
  • 來源:
  • 2021-08-30 16:50:55
  • 閱讀()
  • 分享
  • 手機端入口

一、自定義組件簡述

開發者可以將頁面內的功能模塊抽象成自定義組件,以便在不同的頁面中重復使用;也可以將復雜的頁面拆分成多個低耦合的模塊,有助于代碼維護。自定義組件在使用時與基礎組件非常相似。

二、如何創建自定義組件

1、創建一個放自定義組件集合的文件夾,

2、創建自定義組件的文件夾

3、鼠標右鍵自定義組件文件夾新建Component

三、如何引用

1、在頁面組件的配置文件中注冊,配置文件為.json的文件

***圖中“my-btn”為組件的名字隨便寫,后面跟的組件的路徑***

  1. {   
  2.   "usingComponents": {   
  3.     "my-btn""../../components/mybtn/mybtn"   
  4.   }   
  5. }   

2、在頁面.wxml文件中使用即可

  1.    

四、組件的樣式設置

組件的樣式很簡單,類比頁面,在.wxml中寫組件頁面結構,在.wxss中寫樣式

注意!!!:類名選擇器必須使用class

wxml文件:

  1. class="btn"> 我是mybtn組件   

wxss文件:

  1.  .btn{     background: red;    }   

五、 組件的數據和方法

自定義組件中.js文件,data字段是存放數組的,methods是寫方法的,可類比vue學習,在data中寫入數據可在wxml中渲染

1、如何渲染數據

.js文件:

  1. data: {     
  2.     title: "我是按鈕"  
  3.  },  

.wxml文件 :

  1. class="btn"> {{title}}    

2、如何綁定數據

.wxml文件:

  1. class="btn" bindtap="btnClick"> {{title}}    

.js文件:

  1. methods: {   
  2.  
  3.   btnClick() {   
  4.  
  5.     console.log( "btnClick" );   
  6.  
  7.   }   
  8.  
  9. }   

六、組件的對外開放屬性 -- properties

組件的對外屬性,用來接收外界傳遞到組件中的數據,組件的 properties 和 data 的用法類似,它們都是可讀可寫的,只不過:

-- data 更傾向于存儲組件的私有數據

-- properties 更傾向于存儲外界傳遞到組件中的數據

properties屬性不需要在自定義組件內部進行修改,是通過組件調用時傳遞進來的!!!

語法結構 :

  1. 屬性名稱: {   
  2.     type:String,NUmber,【null不限制數據類型】   
  3.     value: ""   
  4. }   

組件內定義:

  1. properties: {   
  2.     color: {   
  3.       type: String,   
  4.       value: "red"//默認顏色   
  5.    }   
  6. }  

組件頁面中使用:

  1. "btnClick" style= "background: {{ color }}">{{title}}    

使用自定義組件傳入對外開放屬性:

  1. "pink">   
  2. //此時button按鈕就會變成粉色   

 

文章“【Web前端基礎知識】微信小程序之自定義組件創建及使用”已幫助

更多內容

>>本文地址:http://www.softci.com/zhuanye/2021/69828.html

THE END  

聲明:本站稿件版權均屬中公教育優就業所有,未經許可不得擅自轉載。

領取零基礎自學IT資源

(內含學習路線+視頻教程+項目源碼)

涉及Java、Web前端、UI設計、軟件測試、Python等多個IT熱門方向

打開微信掃一掃即可領取哦~

1 您的年齡

2 您的學歷

3 您更想做哪個方向的工作?

獲取測試結果
  • 大前端大前端
  • 大數據大數據
  • 互聯網營銷互聯網營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯網嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內設計室內設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網頁設計網頁設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開發VR/AR
  • 網絡安全網絡安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發智能機器人
 

快速通道fast track

近期開班時間TIME

自拍偷拍精品视频99,偷拍精品久久,麻豆影视官网二区,国产网红一区二区在线视频,久久电影网重口味 啦啦啦免费高清在线直播| 娇小的日本学生video| oldwoman老太中國| 曰本女人牲交全视频免费播放| 2021亚洲VA在线VA天堂VA国产| 暖暖中国在线观看免费直播| 成年站色视频免费观看| young15 girl 中国| 杂乱小说1第403部分| 亚欧激情无码视频在线播放| 日本免费一二三区中文| 极品粉嫩学生无套视频| 日本高清无码系列| 精品久久久无码中文字幕| 日韩中文人妻无码不卡| 欧美最猛性xxxxx| 最新系列国产专区|亚洲国产| 四虎国产精品免费久久| g片男a同志y免费网站| 被窝影院午夜看片爽爽软件| 午夜18禁a片免费播放| 色婷婷五月综合激情中文字幕| 久久爱在线看观看中文| 亚洲va中文字幕无码| …亚洲 欧洲 另类 春色| 九九热爱视频精品视频| 三級片黃色三級片黃色| 日日麻批免费40分钟无码| 欧美亚洲国产精品久久| 协和影院| chinese男男gv学生系列| http://www.zenithjjang.com