Wuss Weapp

一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

文档

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

扫码体验

使用微信扫一扫体验小程序组件示例

演示图片

快速上手

在开始使用 Wuss Weapp 之前,你需要先阅读 微信小程序自定义组件 的相关文档。

如何使用

方法一 [推荐] (通过npm安装依赖并在小程序构建npm模块)

  1. 通过使用shell命令或git定位到当前小程序开发目录,然后使用npm或者yarn安装依赖。
npm init && npm install --production wuss-weapp

或者

yarn init && yarn add --production wuss-weapp
  1. 当依赖安装完成后即可在微信小程序开发者工具里点击 [工具] => [构建npm],此时若出现弹窗则记得吧 “使用npm模块” 勾上,若无弹窗则待构建完成后在详情里面手动勾上 “使用npm模块”。

  2. 构建完成后即可添加需要的组件。在页面的 json 中配置:

"usingComponents": {"w-button": "wuss-weapp/w-button/index","w-toast": "wuss-weapp/w-toast/index","w-alert": "wuss-weapp/w-alert/index"
}
  1. 在 wxml 中使用组件:
<w-button type="info" bind:onClick="buttonClick">这是一个按钮</w-button>
<w-toast id="wuss-toast" />
<w-alert id="wuss-alert" />
  1. 在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"
}
  1. 在 wxml 中使用组件:
<w-button type="info" bind:onClick="buttonClick">这是一个按钮</w-button>

预览所有组件

我们内置了所有组件的示例,您可以扫描上方的的小程序码体验,或按以下方式在微信开发者工具中查看:

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

然后,直接将项目在微信开发者工具中打开即可。

LICENSE

MIT

Wuss Weapp一款高质量,组件齐全,高自定义的微信小程序 UI 组件库相关推荐

  1. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  2. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序UI组件库

    快速上手 在开始使用 Wuss Weapp 之前,你需要先阅读 微信小程序自定义组件 的相关文档. Github 地址(喜欢的可以点个star~) Github Wuss Weapp 文档 wuss- ...

  3. Wuss Weapp 微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组件示例 演示图片 ...

  4. 高颜值微信小程序 UI 组件库!

    Vant Weapp Vant 是一个轻量.可靠的移动端组件库,由有赞于 2017 年开源. Github(⭐️ 16.5k):github.com/youzan/vant- iView Weapp ...

  5. 当前最热门的微信小程序UI组件库

    1.WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progre ...

  6. 小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...

    如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...

  7. 微信小程序UI组件的推荐以及使用

    小编今天写一个微信小程序的界面,之前都是使用原声的编写页面,按照设计图编写.但是这次是编写一个微信小程序的时间选择器,让小编我自由发挥,没有设计稿(复杂的设计稿小编也是写不出来的,比如好看实用的时间选 ...

  8. 5个受欢迎的微信小程序UI组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  9. 5个微信小程序UI组件库

    小程序UI组件库 WeUI WXSS iView WeApp Vant Weapp (原ZanUI WeApp) MinUi Wux WeApp 此文仅为便于自己查找 原文链接:https://www ...

最新文章

  1. Efficient local alignment discovery amongst noisy long reads
  2. Spring boot 各种入门及问题
  3. java 百度账号注册界面_基于百度AI开放平台的人脸识别的注册登录(1)
  4. python bosonnlp_BosonNLP分词技术解密
  5. Gradle构建工具的学习与使用
  6. leetcode 729, 731, 732. My Calendar I, II, III | 729. 我的日程安排表 I, II, III(线段树)
  7. 【LeetCode】390. 消除游戏
  8. 算法工程师和python_算法工程师只掌握Python行吗?如果在java和cpp中选一门语言学习哪个更有用?...
  9. cocos2d c 调用java_cocos2d-x之C++ 调用Java函数并接收返回值
  10. 从/etc/inetd.conf学习服务(4)
  11. inner/left/right/full join on
  12. PWA登陆iOS了,但它还有这些缺陷
  13. 生成N位的数字英文随机混合的字符串
  14. 图案怎么导入ps?Photoshop图案导入教程
  15. 华为手机升级回退_华为手机版本回退 - 卡饭网
  16. 剖析虚幻渲染体系(16)- 图形驱动的秘密
  17. Leetcode——495. Teemo Attacking
  18. reinterpret_cast、static_cast、dynamic_cast和const_cast,区别
  19. 第二周学习前端总结与感悟(二)
  20. 查询某个表空间下所有的表的空间占用情况

热门文章

  1. Android面试宝典2022-(停止更新,请看面试专栏)
  2. [实战系列]SelectDB Cloud Kafka Connect 最佳实践张家锋
  3. 什么是GBase 8a 并行技术
  4. 【计算机网络】CRC校验码||循环冗余码详解及计算习题
  5. 桌面计算机图标改名后,解答电脑桌面图标后怎么自定义设置呢?
  6. 黑莲花在服务器维护后,怀旧服新版黑莲花刷新机制 动态刷新最快9分钟
  7. House Robber 房屋偷窃问题
  8. ADSP21489的算法调用基础
  9. 如何区分变压器的同名端和异名端
  10. 《Go语言实战》笔记之协程同步 sync.WaitGroup