Lin UI(微信小程序UI組件庫)是基于微信小程序原生語法實現的組件庫,可以通過這款軟件快速開發小程序,調用組件就可以設計程序界面功能,設計界面布局,設計交互方式,讓用戶在開發新程序的時候獲得更多幫助。快來統一下載點擊體驗一下吧!
現在很多程序都是結合組件工具開發的,在設計UI界面以及菜單頁面的時候就可以添加按鈕組件,添加數據組件,添加文字組件,添加二維碼組件,添加輸入框組件,添加菜單組件,添加彈出窗口組件,將頁面需要的功能全部通過組件進行設計,極大提升用戶界面開發效率,讓企業可以更快設計自己的微信小程序,如果你需要程序UI組件就可以下載Lin UI!
軟件特色
簡單易用
組件采用微信小程序的原生語法編寫,只需要熟悉初級的 HTML 、 CSS 、 JavaScript 和 微信小程序 相關知識就能上手開發,同時既可以一次性加載所有的代碼,也可以選擇只加載使用到的某些組件的代碼。
規范統一
遵循統一的 設計規范 ,接口標準和事件冒泡機制 ,減少開發者查閱文檔的時間成本,提升開發效率。
文檔豐富
為了能讓更多開發者接觸之初,就能夠熟練的用Lin-UI開發自己的小程序應用,我們對每個組件的 屬性 、 事件 、用法 、和 案例 上都做了詳盡的描述。
擴展性強
支持 按需引入 和 自定義的主題色 ,生成多種風格,滿足個性化產品需求;同時還具有很強的 擴展性 ,輕松實現組件的二次開發。
支持第三方庫框架
支持第三方框架,taro,mpvue。
組件介紹
1、加載中 Loading
加載類型
可通過加載組件的type屬性設置加載動畫類型。并通過 設置show 為 true 或者 false 來控制它的顯示與隱藏。
type共有五種狀態,可選值為flash、flip、change、circle、rotate,可根據使用場景選擇合適的類型,默認為rotate。
示例代碼
2、通告欄 NoticeBar
是否顯示通告欄
通過show屬性設置是否顯示通告欄。默認值為true。
3、進度條 Progress
百分比
通過percent屬性設置進度條當前進度,取值0~100,默認為0.
4、導航欄 TabBar
導航欄適用場景:需要動態控制標簽種類、數量,以及對樣式自定義程度高的場景
5、輸入框 Input
基于原生組件Input封裝,用于接收單行文本,支持文本、密碼、數字、身份證等類型的輸入。
用戶可控制是否顯示輸入框標題,是否出現清除按鈕,還可以自定義 Input 組件的右邊部分(傳入 slot),實現自定義按鈕、驗證碼輸入框等
6、表單 Form
由輸入框、文本框、單選框、多選框、評分控件組成,用以收集、校驗、提交數據。適用于賬號注冊、用戶信息填寫等表單頁面。
官方教程
組件的引入
引入Lin-UI組件和引入自己寫的組件一樣,首先需要在 json 文件中進行自定義組件聲明,也就是在usingComponents 下以鍵值對的形式去注冊,l-icon 是組件的名稱,path/to/icon/index 是組件的路徑。
注意事項
需要注意的是,由于引入lin-ui的方式不同,(npm引入/ 復制源碼的dist文件夾),所以這里的path/to 只是用來表示路徑這個含義,并不能直接復制進項目里。需要你根據實際情況來配置正確的路徑。
組件的使用
當組件的聲明已經完成,那么我們在頁面的 wxml 中就可以像使用基礎組件一樣使用自定義組件。
同時每個組件都有相對應的props(屬性), 例如: l-icon標簽上的name屬性,就是根據傳遞不同的name值,來顯示不同的icon
注意事項
因為 WXML 節點標簽名只能是小寫字母、中劃線和下劃線的組合,所以自定義組件的標簽名也只能包含這些字符。
組件的事件
大部分的組件都有對應的事件,詳細的內容請參閱每個組件的文檔,以及統一的事件說明 (opens new window)。
#全局自定義組件
我們都知道微信小程序的組件使用需要在頁面的json文件里注冊,那么這個時候會有一個問題:一些常用的基礎組件,如toast,diolag等等,每次在一個頁面使用都要在json中去聲明一次,實在過于繁瑣,或則說這一點也不前端。
所以,對于這類跨頁面,使用頻率高的組件,我們可以在app.json里一次性聲明,也就是創建全局自定義組件,聲明的方法和頁面聲明一樣。
這樣,我們使用Lin-UI開發的效率又會大大提升啦!
事件綁定
在組件中事件的綁定寫法同組件的屬性,以key、value的形式。
key以bind開頭,然后跟上事件的類型,如bind:lintap。
value 是一個字符串,需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。
事件冒泡和非冒泡
事件可以分為冒泡事件和非冒泡事件:
冒泡事件:當一個組件上的事件被觸發后,該事件會向父節點傳遞。
非冒泡事件:當一個組件上的事件被觸發后,該事件不會向父節點傳遞。
在使用組件事件時,組件的事件均為冒泡事件,如需使用非冒泡事件,將key設置為catch即可,如catch:lintap。
外部樣式類使用
微信小程序官方文檔中指出,在同一個節點上使用普通樣式類和外部樣式類時,兩個類的優先級是未定義的。
所以在使用外部樣式類去覆蓋組件原有的樣式屬性時只能通過提高外部樣式優先級的方法進行覆蓋。
本章建議在傳入的外部樣式類css屬性后添加!important提高樣式的優先級,供各位開發者參考使用。
例如更改button組件的文本顏色:
wx.lin使用方法
已廢棄
wx.lin 已廢棄,將在未來的某個版本移除,如果對應組件有開放函數,請使用開放函數代替
在一些操作交互方面,有些組件可以全局掛載一個調用的方法,比如說vue中的類似的調用方法this.$message,同樣的在小程序的組件中,我們也設計了類似的調用方法,不過在小程序中使用會受到一些限制:
1、需要調用某個組件時,必須在對應的頁面的json文件中引入并在wxml文件中掛載。
2、組件僅顯示在引入的頁面,跳轉到其他頁面時組件將會消失。比如某些場景下,在成功操作后會提示并跳轉頁面,這種場景建議傳入回調函數在組件隱藏后再進行跳轉或者使用原生的API。
3、一個頁面只能引入一個相關的組件,比如water-flow組件每一個頁面只能使用一次該組件。
下面以Loading組件為例,介紹下wx.lin的用法:
1、在json和wxml文件中引入loading組件。
2、在js文件調用API并傳入參數即可,參數參考對應組件的屬性列表,參數均為非必填,并且參數需改為駝峰命名。