Wuss Weapp 微信小程序 UI 組件庫

dendoink 發(fā)布于2019-08-29 17:20 / 1941人閱讀

摘要：或者當(dāng)依賴安裝完成后即可在微信小程序開發(fā)者工具里點擊工具構(gòu)建，此時若出現(xiàn)彈窗則記得吧使用模塊勾上，若無彈窗則待構(gòu)建完成后在詳情里面手動勾上使用模塊。

微信小程序 UI 組件庫 Github地址

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

文檔

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

掃碼體驗

使用微信掃一掃體驗小程序組件示例,歡迎Star

演示圖片

快速上手

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

如何使用 方法一 [推薦] (通過npm安裝依賴并在小程序構(gòu)建npm模塊)

通過使用shell命令或git定位到當(dāng)前小程序開發(fā)目錄，然后使用npm或者yarn安裝依賴。

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

或者

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

當(dāng)依賴安裝完成后即可在微信小程序開發(fā)者工具里點擊 [工具] => [構(gòu)建npm]，此時若出現(xiàn)彈窗則記得吧 “使用npm模塊” 勾上，若無彈窗則待構(gòu)建完成后在詳情里面手動勾上 “使用npm模塊”。

構(gòu)建完成后即可添加需要的組件。在頁面的 json 中配置：

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

在 wxml 中使用組件：

這是一個按鈕

在JavaScript中使用:

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

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

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

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

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

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

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

在 wxml 中使用組件：

這是一個按鈕

預(yù)覽所有組件

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

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

然后，直接將項目在微信開發(fā)者工具中打開即可。

Wuss Weapp 官方交流群

QQ 群號 787275772

貢獻

有任何意見或建議都歡迎提 issue，提 issue 之前請先閱讀是否已經(jīng)有相關(guān) issue 或者如果有相關(guān)但是已經(jīng)關(guān)閉 issue 只是還未更新的版本，請不要在此 issue 下方回復(fù)，如果更新版本后依然存在請?zhí)嵝鲁龅?issue，感謝

LICENSE

MIT