wux-weapp / wux-weapp Goto Github PK

View Code? Open in Web Editor NEW

5.0K 5.0K 874.0 48.74 MB

:dog: 一套组件化、可复用、易扩展的微信小程序 UI 组件库

Home Page: https://wuxui.com

License: MIT License

JavaScript 84.99% Smarty 0.02% Shell 0.02% Less 14.97%

bem-css mini-program miniprogram ui-design weapp weapp-demo wechat-weapp weixin wux wux-weapp wuxui wx-component wxapp

wux-weapp's Introduction

Wux Weapp

一套组件化、可复用、易扩展的微信小程序

快速上手

使用之前

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

如何安装

方式一. 通过 npm 安装

通过 npm 安装，需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建，详见 npm 支持。

# Using npm
npm i wux-weapp -S --production

# Using yarn
yarn add wux-weapp --production

方式二. 通过下载代码

通过 GitHub 下载 Wux Weapp 的代码，然后将 packages/lib/ 目录拷贝到自己的项目中。

packages/lib/ - 压缩版（ES5）
packages/es/ - 未压缩版（ES6，使用时需要开启 ES6 转 ES5，位于开发者工具右上角-详情-本地配置）

git clone https://github.com/wux-weapp/wux-weapp.git
cd wux-weapp

方法三. 选择需要的模块，量身定制

参考量身定制。

如何使用

按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：

在 page.json 中引入组件

"usingComponents": {
    "wux-button": "../../dist/button/index"
}

在 page.wxml 中使用组件

<wux-button size="small">Button</wux-button>
<wux-button size="default">Button</wux-button>
<wux-button size="large">Button</wux-button>

组件库文件体积过大的问题

随着组件库越来越丰富，文件的体积也越来越大，某些时候我们可能只需要其中的一个或多个组件，如果直接引入整个组件库的话是不合适的，这时候就需要我们将要使用到组件给单独抽离出来。

使用量身定制功能自动抽离组件（官方推荐）。
手动抽离组件，也很简单直接拷贝 packages/ 目录下对应的组件即可，当然某些组件存在依赖关系，则抽离过程会相对复杂一些，以 ActionSheet、Badge、Button 为例。

demo/
  |-actionsheet/
  |-animation-group/
  |-backdrop/
  |-badge/
  |-button/
  |-helpers/
  |-index.js

首先将 packages/ 目录下对应组件（如 actionsheet）拷贝至 demo 目录；
其次看其对应目录下 index.json 是否存在依赖组件，若存在则一一拷贝；
然后看组件是否依靠 JavaScript 主动调用（查看对应文档可得知或存在 index.js 文件中），是则拷贝 index.js 文件，并删除不需要的组件引用；
最后查看组件目录下 index.js 是否存在对帮助方法的引用，若存在则拷贝 helpers 目录（抑或直接拷贝不管是否存在引用）。

预览

您可以扫描下方的小程序码体验或用微信web开发者工具打开 example 目录（请注意，是 example 目录，不是整个项目）。

讨论组

您可以扫码添加下方的左侧『Wux 小助手』微信并备注『Wux Weapp』或者『加群』进交流群。注意：如果添加『Wux 小猪手』没有反应，可以再尝试添加后边作者『Skyvow』微信。

赞助

请作者喝营养快线补补小身体(`・ω・´)

案例

贡献

有任何意见或建议都欢迎提 issue

License

MIT

wux-weapp's People

Contributors

Stargazers

Watchers

Forkers

six006 taoxincool jbasttdi lostpengk czcaike ccocc basion delktsai yuanych luckyuns fly2012 wuxingtao svddx qinloo dlg1004667450 sduper fengshuang110 lizziebing drunksword xxchevi voidluffy cknote resweapp yunhor belief-m amwybj041989 kainy carlsunliang zhoukunlv orange7 sohocolin haoljp emaiqi cqinwn renxlin ampboris cgc1983 chubby886 benzhenzhang stonegithubs huangshaoze huige555551 trock excxapp lizhil tanytree sharetop kookey luckycrystalm jtrhb ls19491314 bailu666 genru yzway lixing-zhang xcchcaptain dgsammy jiedan xing609 jackyglony chaohz1 lilizing m69w stgeo88 hanxiaoma hunseto luozhibo2003 guozhihao9396 style-clear andy521 zhanghuan1989 jackywei1228 ecmascript6 pmdcc metallica8023 bluefox1688 pronebel leilay davidabm pangxie1991 xzusoft derekhe zeng-zhi-yong frankxxiao arlen1031 iamxjb xing00 talliujobs guojunwang mrdavy leadrive ouyang90 devxiaruwei hky301 dysheng heronyu marquessc huyasi dchijack fujianjun804

wux-weapp's Issues

关于倒计时传入动态数据

// date: +(new Date) + 24 * 60 * 60 * 1000,
直接传入数值可以倒计时
date: that.c3Date,
传入自定义的动态数据，实际倒计时时的数值还是js封装类里面定义的默认值，进行倒计时。
怎样修改封装的类

Filterbar模拟器下，过滤条件画面切换radiobutton的选项的时候出item.children.map is not a function 错误，但是真机下可以

rater评分组件如何获取当前的评分值呢?

rater组件的rater.js文件中：
/**

点击触发事件
*/
bindtap(e) {
const i = e.currentTarget.dataset.index
const rater = this.page.data.$wux.rater[id]
const value = rater.value
const disabled = rater.disabled

  			if (disabled) return !1

  			if (value === i + 1) {
  				this.page.setData({
  					[`$wux.rater.${id}.value`]: i
  				})
  			} else {
  				this.page.setData({
  					[`$wux.rater.${id}.value`]: i + 1
  				})
  			}

  			that.updateStyle(id, this.page)
  			that.updateValue(id, this.page)

  			typeof options.callback === `function` && options.callback(e)
  		}

上面代码中，评分回调函数options.callback(e)的参数e好像并没有带上用户选中评分的value，请问是我理解有误还是有其他方式来获得当前用户选中的评分值，谢谢：）

编译不过！Error: ENOENT: no such file or directory, open 'E:\Proj\view_component\wux\dist\game.json’

请问上面这个error是怎么回事，有点莫名其妙

调用遇到问题

我在项目中调用的时候报错了, 改成 -> onConfirm: function(e) { 这样可以

FilterBar在模拟器下可以用，真机下点击任何按钮没有反应

我使用例子程序就可以重现这个问题。
经过dubug，发现 filterbar.js的初始化方法里，options.items传过来了，options.onChange竟然是空的，所以点击排序等按钮不起作用

请问如何采用babel而不用自带的es6转es5

想使用wux当中的组件，但是wepy没有用到自带的es6转es5，如何设置使用babel用wux呢，请不吝赐教🤕

filterbar筛选在模拟器可以使用，到真机上层级出现问题，弹出层在list下面

如题

#Rater组件的使用问题 "如何给一个列表传不同的评分(value)?"

个人学习的时候遇到问题,此处的value如何给列表中多个星星?
场景页面:评价列表,一个列表里有多个评分和星星.
如何给每行item赋各自不同的value?

onLoad() { $wuxRater.init('decimal', { value: 3.7, disabled: !0, }) },

Rating component在真机上错位，模拟器中正常。

gallery预览图片的时候，显示黑色背景，没有图片，左右滑动屏幕，图片才出现

如题

能不能增加一个下拉筛选的菜单组件

网上有一些下拉筛选的菜单组件感觉不是太好，看到大神的组件封装得逼格很高，可否有时间新增一个功能比较齐全的下拉筛选菜单组件？

建议：筛选框点击空白处，弹出部分可以关闭

点击筛选之后，scroll-view打开，但是要关闭这个页面，需要点击下面确认才能关闭，如果点击左边空白的地方能关闭就好了，同样的，顶部的那一排，点击空白的地方也能自己关闭就好了

Demo在Meizu MX4 Pro 上显示错位,日历选择有JSON解析错误

android 5.1.1
Flyme 6.0.20A

不是issue

你做的这个组件，效果很漂亮。大赞，帮了我这个后端大忙。

通常，这个时候，会有一个但是。。。
但是，编程风格上面，我这个后端程序员就很痛苦了。。而且文档说明也不多，幸好有很多例子，而且还是特新潮的 ES6 的例子。。老人家看起来很累啊，很累啊，很累啊，很累啊。。

您好，我看了您最近的更新，将筛选框点击空白处的事件绑定到onConfirm(e)事件上了，这样的话，点击空白处等同于点击确定。我觉得这样用户体验不是很好，因为点击空白一般发生在误点筛选，或者点击筛选之后发现没有需要的筛选项，只是简单的关闭筛选框而已。
建议将此时间单独绑定一下。
我按照我的需求新建了一个方法，components/filterbar/filterbar.js第60行后增加以下代码
/** * 点击空白筛选框消失 * @param {Object} e 事件对象 */ filterHide(e) { const { index } = e.currentTarget.dataset this.setData({ [$wux.filterbar.items[${index}].visible]: false, }) },
在components/filterbar/filterbar.wxml第12行改为以下
<view class="wux-backdrop {{ animateCss }}" hidden="{{ !item.visible }}" wx:if="{{ item.type === 'filter' }}" data-index="{{ index }}" bindtap="{{filterHide}}"></view>

想请教一个问题 return !1 和 return !0 这样写的作用

我看到源码里很多return !1 和 return !0，为什么不直接些return false or true，我一直不理解为什么要这么写？也没有搜索到到答案，想请教作者这样些有什么作用？

日历组件真机调试模式报错

手机：iOS 11.2.6（15D100）
微信：6.6.5
工具：v1.02.1803210
基础库：1.9.91

复现：

wux 日历 demo 模拟器正常，远程调试正常，真机正常，但真机预览开启调试模式时报错；
真机预览开启调试后，默认与多选点击报错无法弹出，单选可弹出但选中日期报错；
错误提示：JSON.stringify cannot serialize cyclic structures.

建议可以基于wepy封装一套更强大的吗？

因为用你的这种形式对于我这种小白的很难自己封装组件，但是基于wepy的话就可以

筛选框一级的时候，类型为checkbox，子级别的value无效

感谢作者的辛勤劳动，做出这么好的产品。
现在有个问题，就是在筛选框为一级的时候，类型选择为checkbox，子级别的value无效，二级筛选框没问题。

为什么使用您的component.js再继承写一个tab组件, 老是有这个错误呢?

VM261:2 webviewScriptError
firstRender not the data from Page.data;firstRender not the data from Page.data
Error: firstRender not the data from Page.data

希望能得到帮助, 谢谢!

[BUG] Dialog遮罩层无法遮盖Toptips中的文本输入框！

Dialog遮罩层无法遮盖Toptips中的文本输入框！
Toast提示也无法遮盖Toptips中的文本输入框！

宝宝

嘤嘤拿小拳拳锤你胸口

多次new Component实例的问题

showToast() {
this.$wuxToast.show({
type: 'success',
timer: 1500,
color: '#fff',
text: '已完成',
success: () => console.log('已完成')
})
},
showToastCancel() {
this.$wuxToast.show({
type: 'cancel',
timer: 1500,
color: '#fff',
text: '取消操作',
success: () => console.log('取消操作')
})
}

比如pages里面的toast示例，其实每次show都会new一个component实例，从性能上考虑有木有更好的办法？:)

地址选择器默认地址传值无效

$wuxPickerCity.init('city', {
			title: '请选择目的地', 
			value: [18, 4, 4],
		    onChange(p) {
		    	console.log(p)
				this.setData({
					city: p.value
				})
			},
		})

市不管传什么值都是默认第一个

怎么把seats组件删除了呢

有考虑出wepy版本吗？

如题

refresher有明显的卡顿问题，下拉刷新不能自动消失

iPhone 6sp 真机

js:

// pages/notifications/notifications.js
import { $wuxRefresher } from '../../dist/components/wux'

Page({
    data: {
        items: [
            {
                user_name: 'Hzzone',
                pic_url: 'http://tuchuang-1252747889.cosgz.myqcloud.com/2018-03-23-01.png',
                time: new Date().toLocaleString(),
                content: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
            },
            {

                user_name: 'Hzzone',
                pic_url: 'http://tuchuang-1252747889.cosgz.myqcloud.com/2018-03-23-01.png',
                time: new Date().toLocaleString(),
                content: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
            }
        ],
    },
    onLoad() {
        this.refresher = new $wuxRefresher({
            onPulling() {
                console.log('onPulling')
            },
            onRefresh() {
                console.log('onRefresh')
                // 刷新时调用
                setTimeout(() => {
                    const items = this.scope.data.items

                    items.unshift({

                        user_name: 'Hzzone',
                        pic_url: 'http://tuchuang-1252747889.cosgz.myqcloud.com/2018-03-23-01.png',
                        time: new Date().toLocaleString(),
                        content: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                    })

                    this.scope.setData({
                        items: items,
                    })

                    this.events.emit(`scroll.refreshComplete`)
                }, 1000)
            }
        })
        console.log(this.refresher)
    },
    touchstart(e) {
        this.refresher.touchstart(e)
    },
    touchmove(e) {
        this.refresher.touchmove(e)
    },
    touchend(e) {
        this.refresher.touchend(e)
    },
})

html:

<!--pages/notifications/notifications.wxml-->
<import src="../../dist/components/refresher/refresher.wxml"/>

<view class="container" style="position: absolute; height: 100%; {{ $wux.refresher.style }}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
	<template is="refresher" data="{{ ...$wux.refresher }}"/>
	<view class="weui-panel weui-panel_access">
        <view class="weui-panel__hd">消息列表</view>
        <view class="weui-panel__bd">
            <navigator wx:for="{{ items }}" wx:key="" url='/pages/notification_detail/notification_detail?user_name={{item.user_name}}&time={{item.time}}&content={{item.content}}&pic={{item.pic_url}}'>
            <view class="weui-media-box weui-media-box_text">
                <view class='user_info'>
                    <image src='{{item.pic_url}}'></image>
                    <view>{{ item.user_name }}</view>
                </view>
                <view class='notification_info'>
                        <view class="time">{{ item.time }}</view>                     
                 <view class="weui-media-box__desc">{{ item.content }}</view>  
                </view>
                
            </view>
            </navigator>
            
        </view>
    </view>
</view>

css:

/* pages/notifications/notifications.wxss */
.weui-media-box {
    padding: 10rpx;
}

.weui-media-box image {
    height: 120rpx;
    width: 120rpx;
    padding: 10rpx;
}

.weui-media-box.weui-media-box_text {
    display: flex;
}

.title {
    display: row;
}

.user_info {
    font-size: 30rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.time {
    margin: 10rpx;
    color: black; 
    font-size: 35rpx;
}
.notification_info .weui-media-box__desc{
    margin: 10rpx;
    height: 110rpx;
    -webkit-line-clamp: 3;
}

.weui-panel.weui-panel_access {
    overflow: visible;
}
.container {
    display: block;
}

component的事件调用

Component类的数据是通过加前缀$wux.componentname.examplename插入到Page中的，但是事件是怎么插入我不是很明白， @skyvow 可否说明下，谢谢赐教～

dialog组件出现点击穿透问题

模拟器没问题，真机上如果页面中有input、textarea组件，弹出dialog会出现点击穿透的问题，placehodel的内容会悬浮到dialog上面

报错 firstRender not the data from Page.data

$wui.xxx.yyy这类都是onload之后才挂到Page的data上的，所以页面初始化时候没有这类数据
<template data="...$wui.xxx.yyy"就报错

目前只找到笨办法手动提前设置好

Page({
  data: {
    $wui: { xxx: { yyy: [] } }
  }
})

filterbar侧边栏滚动影响蒙板后列表的滚动

filterbar组件弹出的筛选侧边栏，滑动时，蒙版后面的列表也跟着滚动，有什么办法能避免吗？
如以下Gif动图效果所示。

Refresher下拉刷新来回滚动卡顿回滚后不应刷新

上下来回滚动的时候有卡顿现象；
下拉再回滚到初始位置时应不刷新。

能否增加一个Field内容也，具体参见内容

这个项目没有你们做的好，但是有些组建我觉得可以参考一下加进来，
参考项目

gallery component back button in navigation bar make user confused.

gallery 展现图片时候。顶部的返回按钮容易让人理解错误，从而造成误操作。
比如页面stack 是

A > B > Gallery

此时点击返回按钮，会返回到 A，而不是用户期望的 B。

	if (offset === `next`) {
		// const next = this._data.months[this._data.months.length - 1]
		// const nextDateTime = this.getNextDateTime(next.year, next.month)
        const currentYear = this._data.currentYear
        const currentMonth = this._data.currentMonth
		const currentDateTime = new Date(currentYear, currentMonth)
        const prevMonthHTML = this.monthHTML(currentDateTime, `prev`)
        const currentMonthHTML = this.monthHTML(currentDateTime)
        const nextMonthHTML = this.monthHTML(currentDateTime, `next`)
		// this._data.months.splice(0, 1)
		// this._data.months.push(nextMonthHTML)
        this._data.months = [prevMonthHTML, currentMonthHTML, nextMonthHTML]
	}

	if (offset === `prev`) {
		// const prev = this._data.months[0]
		// const prevDateTime = this.getPrevDateTime(prev.year, prev.month)
        const currentYear = this._data.currentYear
        const currentMonth = this._data.currentMonth
		const currentDateTime = new Date(currentYear, currentMonth-2)
        const prevMonthHTML = this.monthHTML(currentDateTime, `prev`)
        const currentMonthHTML = this.monthHTML(currentDateTime)
        const nextMonthHTML = this.monthHTML(currentDateTime, `next`)
		// this._data.months.splice(this._data.months.length - 1, 1)
		// this._data.months.unshift(prevMonthHTML)
        this._data.months = [prevMonthHTML, currentMonthHTML, nextMonthHTML]
	}
}

Dialog可以定义多个输入框吗？

浮动按钮在苹果真机上无显示

在安卓机上就正常，苹果手机用的是5S, 10.3系统，只试用了一下浮动按钮，其它组件未知。

另外无法在目前的开发工具预览你的工程（原打算在苹果机上测试其它组件是否正常）。