wuss weapp

Wuss Weapp

一款高質量，組件齊全，高自定義的微信小程序UI 組件庫

文件

https://phonycode.github.io/wuss-weapp

Wuss Weapp 官方交流群

QQ 群號787275772

掃碼體驗

使用微信掃一掃體驗小程序組件示例

演示圖片

快速上手

在開始使用Wuss Weapp 之前，你需要先閱讀微信小程序自定義組件的相關文檔。

如何使用

方法一[推薦] (通過npm安裝依賴並在小程序構建npm模塊)

1. 通過使用shell命令或git定位到當前小程序開發目錄，然後使用npm或者yarn安裝依賴。

npm init && npm install --production wuss-weapp

或者

yarn init && yarn add --production wuss-weapp

2. 當依賴安裝完成後即可在微信小程序開發者工具裡點擊[工具] => [構建npm]，此時若出現彈窗則記得吧“使用npm模塊” 勾上，若無彈窗則待構建完成後在詳情裡面手動勾上“使用npm模塊”。

3. 構建完成後即可添加需要的組件。在頁面的json 中配置：

 "usingComponents" : {
  "w-button" : " wuss-weapp/w-button/index " ,
  "w-toast" : " wuss-weapp/w-toast/index " ,
  "w-alert" : " wuss-weapp/w-alert/index "
}

4. 在wxml 中使用組件：

 < w-button type =" info " bind:onClick =" buttonClick " >这是一个按钮</ w-button >
< w-toast id =" wuss-toast " />
< w-alert id =" wuss-alert " />

5. 在JavaScript中使用:

 import { Alert , Toast } from 'wuss-weapp' ;

Alert ( {
  title : '提示' ,
  content : 'wuss weapp is good' ,
} ) ;

Toast . show ( {
  message : 'wuss小程序UI库' ,
} ) ; 

方法二(通過clone當前項目的dist拷貝到自己項目中使用)

1. 到GitHub 下載Wuss Weapp 的代碼，將dist目錄拷貝到自己的項目中。然後按照如下的方式使用組件，以Button 為例，其它組件在對應的文檔頁查看：

2. 添加需要的組件。在頁面的json 中配置（路徑根據自己項目位置配置）：

 "usingComponents" : {
  "w-button" : " /dist/w-button/index "
}

2. 在wxml 中使用組件：

 < w-button type =" info " bind:onClick =" buttonClick " >这是一个按钮</ w-button >

預覽所有組件

我們內置了所有組件的示例，您可以掃描上方的的小程序碼體驗，或按以下方式在微信開發者工具中查看：

git clone https://github.com/phonycode/wuss-weapp.git

然後，直接將項目在微信開發者工具中打開即可。

貢獻

有任何意見或建議都歡迎提issue，提issue 之前請先閱讀是否已經有相關issue 或者如果有相關但是已經關閉issue 只是還未更新的版本，請不要在此issue 下方回复，如果更新版本後依然存在請提新出的issue，感謝

LICENSE

MIT