微信小程序 UI 组件库

Github地址

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

文档

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

扫码体验

使用微信扫一扫体验小程序组件示例,欢迎Star

演示图片

快速上手

在开始使用 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

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

Wuss Weapp 官方交流群

QQ 群号 787275772

贡献

有任何意见或建议都欢迎提 issue,提 issue 之前请先阅读是否已经有相关 issue 或者如果有相关但是已经关闭 issue 只是还未更新的版本,请不要在此 issue 下方回复,如果更新版本后依然存在 请提新出的 issue,感谢

LICENSE

MIT

Wuss Weapp 微信小程序 UI 组件库的更多相关文章

  1. 小程序开发-iView Weapp微信小程序UI组件库入门使用

    iView Weapp UI组件库 今天来试试iView Weapp 这个微信小程序组件库,看看好不好用~~ 官网地址: http://inmap.talkingdata.com/wx/index_p ...

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

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

  3. 微信小程序 UI 组件库

    微信小程序 UI 组件库 Vant Weapp 需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下 $ yarn add @vant/weap ...

  4. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

  5. 5个最优秀的微信小程序UI组件库

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

  6. 6个最优秀的微信小程序UI组件库

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

  7. 6个优秀的微信小程序ui组件库

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

  8. 从零开发一款自己的小程序UI组件库(一)

    写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的 ...

  9. 从零开发一款自己的小程序UI组件库(二)

    写在前面:从零开发一款自己的小程序UI组件库(一) 上节我们讲到初始化组件库模板.模板文件概述.模板上传npm以及npm包文件下载至本地并运用到项目.这节我们继续,内容主要有基础UI组件库的搭建(bu ...

随机推荐

  1. pycharm中文专业版安装使用

    激活码 MTW881U3Z5-eyJsaWNlbnNlSWQiOiJNVFc4ODFVM1o1IiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWduZWVOYW1lI ...

  2. [SDOI2011]消耗战 题解

    题面 虚树的模板题: 虚树的思想是只保留有用的点(在这道题目里面显然是标记点和lca),然后重新构建一棵树,从而使节点大大减少,优化复杂度 我们维护一条链(以1号点为根),这条链左边的所有在虚树上的位 ...

  3. navicat 使用 pymysql模块

    新健库 ,新增字段+类型+约束 设计表:外键(自增) 新建查询 建立表模型 /* 数据导入: Navicat Premium Data Transfer Source Server : localho ...

  4. uname、hostname命令

    一.uname:显示系统信息. 语法:       uname [OPTION] ... 描述        打印某些系统信息. 没有选项,与-s相同. -a,--all               ...

  5. Python解释器换源

    Python解释器换源 """ 1.采用国内源,加速下载模块的速度 2.常用pip源: -- 豆瓣:https://pypi.douban.com/simple -- 阿 ...

  6. vs 2013 设置website项目端口

    vs 2015/2013 设置website项目端口 在web项目创建之后,当我想重新debug时,出现the port xxx is in use 错误. 经过netstat分析,发现占用此项目端口 ...

  7. SNI功能在NetScaler上的实现

    SNI功能在NetScaler上的实现 来源  https://raynorli.com/2018/09/11/sni-on-netscaler/ 现网中经常是一台主机上运行多个Web站点,如果启用了 ...

  8. JS基础_相等运算符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Rsyslog服务器的安装与配置

    一.Rsyslog服务器的安装与配置 1.清空iptabels, 关闭selinux避免安装过中报错 清空iptables iptables -F service iptables save 关闭se ...

  10. Golang Gateway API 搭建教程

    原文链接 随着微服务的兴起,行业里出现了非常多优秀的微服务网关框架,今天教大家搭建一套国人,用Golang写的微服务网关框架. 这里啰嗦一句,可能到今天还有人不理解什么是微服务,为什么要用微服务.目前 ...