小程式元件庫mangom-we

芒言發表於2019-02-12

簡介

小程式基礎核心元件庫,讓業務開發更加關注業務並且快速實現。

環境準備

小程式基礎庫版本 1.9.90 以上(可升級小程式開發工具為最新)。

使用

獲取原始碼

專案git地址:git.coding.net/prin/mangom…

配置

  1. 元件庫引入
    將mangom-we-demo專案下的pages/mangom-we資料夾匯入到專案的的pages目錄下,與其他page同級。
  2. 樣式匯入
//app.wxss中匯入樣式
@import `pages/mangom-we/mg.wxss`;

複製程式碼

使用一個banner元件

//Demo.json配置檔案中引入元件,程式碼如下    
{
    "usingComponents": {"banner": "../mangom-we/banner/banner"}
}

/** Demo.xml結構中使用元件
*   ds是元件接受資料的統一定義屬性,imgUrls是提供的陣列資料
*  class-img-item是控制banner中子項的樣式展示,無需自定義的話則使用預設樣式
*/    

<banner ds="{{imgUrls}}" class-img-item="mg-banner-img-item"/>

複製程式碼

小程式在同一個節點上使用普通樣式類和外部樣式類時,兩個類的優先順序是未定義的,為了解元件支援樣式預設和自定義,採用所有元件預設樣式配置在一個樣式表中提供使用,且開放自定義元件樣式屬性功能。

相關文章