小程序組件化



 類似於頁面,自定義組件擁有自己的 wxml 模版和 wxss 樣式。

官方鏈接

組件化,反過來理解,寫重復的頁面,方法,寫第二遍就煩了,抽取出來就是組件化,可以理解為公用的方法

對於通用的數據,最先想到或者理應接觸的是template,但是template有個缺點,那就是只是頁面效果,不會有對應的js操作。

微信小程序組件化,為什么要有自定義組件呢
每個頁面有對應的js(JavaScript),json(配置config),wxml(html),wxss(css)還差什么
不挺好的嘛,為什么需要自定義組件呢
當然,對於特定的某個頁面而言,是足夠了,但是如果是通用的一些頁面都需要相同的效果,
或者是相似的效果呢,你還是一步步重復的操作嘛
存在就是合理的,完全可以把自定義組件理解為是一個自定義的標簽,頁面的一個片段。

 

當然這只是最基本的
想想,既然是組件component,那對於pages頁面而言,就是一對多的關系。
多個頁面織入組件,怎么銜接起來呢。
pages頁面可以給component組件傳遞值,自然組件也會對應的想pages自定義的回調方法。

只要是你能想到,想實現的,都會有對應的提供。

實現方式,在目錄新建component,會自動生成對應的js,json,wxml,wxss,基本跟pages差不多

看看component各個文件內容吧

復制代碼
Component({
  
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  },
/**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
   
  }
})
復制代碼

options,multipleslots:true 在組建中啟用多個slot支持。

properties,里面可以定義一些接收pages頁面的屬性。

data,組件的數據

method,組件抽取出來的方法

具體用法

首先需要在pages頁的json配置一下開啟使用組件

說說options吧

你可以在component的wxml中

通過slot的name屬性來指定對應的pages頁面內容

 ok

說說properties吧

在自定義標簽中傳遞一個num屬性

在組件中可以通過properties來傳遞

獲取num值可以通過this.properties.num來獲取

data用法的話跟page是一個樣子的。

最重要的要屬於方法事件了

page相對於組件而言,是一個一對多的過程

既然是抽取出來的,組件只能做一些共有的事,私自的一些實現肯定是得通過page自省的。

這就涉及到了回調。比如在組件中添加一個bindtap方法。

但是這個組件頁面的customevent的方法是綁定的。

對應的pages頁

 

在methods中,通過treggerEvent來調用page自己實現的方法。

ok,這是組件化入門


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM