phonycode / wuss-weapp

:whale:wuss-weapp 一款高质量，组件齐全，高自定义的微信小程序UI组件库

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

wuss-weapp's Issues

cell 无法绑定点击事件 bindtap='click'

描述错误。


当我这么写的时候无法触发绑定事件 showvideo

当我修改 /dist/w-cell/index.wxml 中第六行 catchtap为bindtap 后 showvideo事件触发 因为catchtap阻止事件冒泡

由于我只看了一个礼拜微信小程序 所以我想知道 是插件写错了 还是我之前的用法不对
w-cell 的onClick事件需要怎么使用?因为没有示例代码我使用不成功

版本相关信息：。
2018/11/6 下午六点版本

Form表单不使用validate组件时无法提交form表单

描述错误。
在form表单里如果不使用validate这个组件的话 button type = submit 的时候 form没触发submit 事件

复现。
重现行为的步骤：
1.点击

预期行为。

截图。
如果适用的话，添加屏幕截图来帮助解释您的问题。

版本相关信息：。
-wuss版本：[1.0.4]。
-微信开发者工具：[1.02.1809111]。

附加上下文。
在这里添加有关问题的任何其他上下文。

增加search组件

微信原生小程序serach组件样式太单一了，建议增加一下

更新界面data值导致触发initPicker，选中的值消失

描述错误。
采用mpvue框架，绑定onSelect事件，在事件中更新页面元素值，会触发initPicker，导致选中的值消失

dateSelect(e) { this.selectDate = 1; }

截图。
选择后选中的字段一闪而过

能否支持在wepy中使用

描述错误。
能否在wepy中使用

w-input : type为textarea的时候 只读 无效

设置 readOnly 属性无效

input 和 所有picker 的defaultValue无法动态设置

描述错误。
input 和 所有picker 的defaultValue无法通过连接接口获取信息后再设置

复现。
重现行为的步骤：
随便写一个延时设置defaultValue就可以复现

在onShow里面设置
onShow() {
setTimeout(() => {
this.info.name = "sss";
}, 1000);
}

最后显示的还是“未知”
应该显示为sss才对

如何获取发送模板消息使用的formid

如何获取发送模板消息使用的formid

range日历 minDate和maxDate无效？

demo中也是，这两个参数是控制在这儿区间内的日期才能选择？
都是从当前月份开始渲染？还是该怎么设置参数，文档中也不是太清楚
麻烦各位大佬能帮忙解决下疑惑

w-input 如何实现双向绑定？

你好，我用到了 w-input，但是怎么实现js里面变量和界面显示的双向绑定呢？

报错警告不能用tag标签

描述错误。
wxss中不能使用tag选择器，而有些组件使用了tag选择器
附加上下文。

w-popup 在 ios中 偶尔不出现的动画

描述错误。
弹起动画不出现

input使用校验后失去焦点后位置有所偏移

表单input组件
在使用validate组件后
检验失败出现提示icon后
失去焦点会出现位置偏移

wx.nextTick is not a function

描述错误。
在使用Notice通知的时候出现了wx.nextTick的错误

复现。
重现行为的步骤：
编译后console里就有错了
VM710:1 thirdScriptError
wx.nextTick is not a function; [Component] Property Observer Error @ dist/w-notice/index#init
TypeError: wx.nextTick is not a function
at o.init (http://127.0.0.1:39782/appservice/dist/w-notice/index.js:88:10)
at Function.o.safeCallback (http://127.0.0.1:39782/appservice/__dev__/WAService.js:10:16407)
at e.protoFunc. (http://127.0.0.1:39782/appservice/__dev__/WAService.js:11:12083)
at d (http://127.0.0.1:39782/appservice/__dev__/WAService.js:10:24457)
at a.doUpdates (http://127.0.0.1:39782/appservice/__dev__/WAService.js:10:25624)
at t.applyProperties (http://127.0.0.1:39782/appservice/__dev__/WAService.js:12:28817)
at e.value (http://127.0.0.1:39782/appservice/__dev__/WAService.js:12:22654)
at http://127.0.0.1:39782/appservice/__dev__/WAService.js:12:22726
at Array.forEach ()
at e.value (http://127.0.0.1:39782/appservice/__dev__/WAService.js:12:22698)

预期行为。
对你期望发生的事情的清晰而简明的描述。

截图。
如果适用的话，添加屏幕截图来帮助解释您的问题。

版本相关信息：。
-wuss版本：[例如1.0.0]。
-微信开发者工具：[例如1.02.1809111]。
-操作系统：[例如iOS8.1]。

附加上下文。
在这里添加有关问题的任何其他上下文。

demo在微信小程序内打不开

扫描二维码，demo在微信小程序内打不开，空白页

range日历，confirm后的日期不正确

描述错误。
range日历，confirm后的日期不正确。
如下截图：
所选日期为2018-11-15 至 2018-11-22
confirm后的value为 2019-01-15 至 2019-11-22

截图。

w-swiper-out: incorrect slip width

w-swiper-out sliding width is not accurate

Dialog component initialization causes bugs

Dialog component click to show Dialog appearance animation will have a short initialization caused by the bug

w-radio 组件 defaultValue 无效

版本：1.0.4
问题：使用 w-radio 组件 defaultValue 无效
描述：defaultValue的因类型问题导致无法选中默认

w-cell-picker defaultValue默认值问题

描述错误。
w-cell-picker不提供defaultValue时，直接选中并确定会返回false

复现。
重现行为的步骤：
1.page中使用w-cell-picker组件同时不添加defaultValue属性
2.页面中点击w-cell-picker组件同时不选择任何选项，直接点击“确定”
3.w-cell-picker的显示值为false

代码判断
可能与defaultValue默认值有关

defaultValue: {
  type: null
}

同时w-cell-picker中的isValidValue方法会导致null通过检查

    isValidValue(value) {
      return typeof value !== 'undefined' || Object.prototype.toString.call(value) !== '[object Null]' || !isNaN(value);
    },

预期行为。
希望可以返回placeholder的值或者返回第一个Option

截图。
如果适用的话，添加屏幕截图来帮助解释您的问题。

版本相关信息：。
-wuss版本：^2.3.3。
-操作系统：win10

w-popup的maskCancel属性无效

描述错误。
清楚而简洁的描述什么是错误。

复现。
重现行为的步骤：
1.点击

预期行为。
对你期望发生的事情的清晰而简明的描述。

截图。
如果适用的话，添加屏幕截图来帮助解释您的问题。

版本相关信息：。
-wuss版本：[例如1.0.0]。
-微信开发者工具：[例如1.02.1809111]。
-操作系统：[例如iOS8.1]。

附加上下文。
在这里添加有关问题的任何其他上下文。

2.0.2版本，w-popup点击mask不会消失，maskCancel设置为true无效，回退到1.0.4会消失

怎样覆盖CSS

怎样覆盖CSS

w-validate中required没有使用到自定义的message

w-validate中required没有使用到自定义的message，也没有判断value是否为true

建议优化日历预订控件

我们搜寻一遍后，发现WUSS是唯一支持日历预订组件的UI组件库，但在欣喜引入项目后发现一些小问题建议优化：
1.组件间依赖太强，需求仅希望增加一个日历预订组件却得同时引入数个如icon、Button等，建议减少依赖；
2.日历预订界面只能全屏展开，建议增加高度自定义api；
建议：
1.若增加高度自定义，则建议考虑增加遮罩开启关闭；

样式参考：

官方文档可不可以放在国内服务器上，以图文方式展示？

phonycode.github.io访问非常慢，展示的还是视频的形式，查点东西超级不方便！

w-cell-picker

描述错误。
w-cell-picker组件传入options有value等于0的选项时，传入0和选择时都会失效

截图。

w-alert组件不支持文本换行

描述错误。
w-alert组件不支持文本换行

defaultValue

描述错误。
清楚而简洁的描述什么是错误。

复现。
重现行为的步骤：
1.点击

代码判断
尽量提供可复现代码，查看如何创建代码片段
代码片段地址：

预期行为。
对你期望发生的事情的清晰而简明的描述。

截图。
如果适用的话，添加屏幕截图来帮助解释您的问题。

版本相关信息：。
-wuss版本：[例如1.0.0]。
-微信开发者工具：[例如1.02.1809111]。
-操作系统：[例如iOS8.1]。

附加上下文。
在这里添加有关问题的任何其他上下文。

[add] 增加骨架屏组件

抽出骨架屏成新的组件

Badge 徽章

去除定位内置依赖