Giter Club home page Giter Club logo

weui.js's Introduction

weui.js

npm version

概述

WeUI 的轻量级 js 封装。

注意:由于微信小程序不支持dom操作,所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本,详情请看:https://github.com/Tencent/weui-wxss/

手机预览

https://weui.io

https://weui.io/weui.js/

开发

安装

git clone https://github.com/Tencent/weui.js.git
cd weui.js
npm install
npm start

编译

npm run build

使用

global

<link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.5.16/weui.min.css">
<script type="text/javascript" src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.21/weui.min.js"></script>
<script type="text/javascript">
    weui.alert('alert');
</script>

import as module

import 'weui';
import weui from 'weui.js';

weui.alert('alert');

文档

Documents

贡献

如果你有好的意见或建议,欢迎给我们提issue或pull request。

License

The MIT License(http://opensource.org/licenses/MIT)

请自由地享受和参与开源

weui.js's People

Contributors

007pub avatar bearj avatar fanqi avatar jaminq avatar progrape avatar sklme avatar uxsi avatar xiaosongxiaosong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

weui.js's Issues

请问怎么在webpack环境中实现分模块引入?

这个我觉得还是挺有必要的,有时候就只想用一点点。。
比如我想这样:
import alert from 'weui.js/src/alert/alert'
但是vue的webpack配置中又忽略了node_modules,所以会编译不通过,因为该模块使用了es6语法

loading在定位元素上显示不出来

当页面元素本身是定位元素,且有zIndex时,loading界面显示不出来
image
如上图:
当前这个表单页面是定位元素,有zIndex属性,导致loading被遮挡出不来,因为loading最外层的容器不是定位元素,没有zIndex属性
image
经过测试,将loading的容器,设置成定位(relative,absolute,fixed都可以),然后给zIndex一个比较大的值,就可以正常显示了,虽然我觉得这个应该反馈在weui里面

不能同时打开多个dialog窗口

场景:
用户点击某提交按钮,弹出confirm窗口。用户确认信息后点击【确认】按钮,此时执行【确认】按钮的回调事件,同时confirm执行hide()方法。 如果回调事件内要弹出alert窗口,但是此时confirm窗口的hide()还未执行完毕,所以导致alert无法弹出

1.建议在hide()方法添加一个回调事件的传参,可以在hide()完成后执行。
2.或者只允许 alert/confirm/dialog 同时只存在一个。(即允许同时存在一个alert,一个aconfirm,一个dialog。但是不允许同时存在两个alert。)

toast 的时间 duration 失效

window.location.replace('xxxx');
window.event.returnValue = false;
这两行放到toast前面,toast的时间就失效了。直接就执行回调了。
这两行放到toast回调里面,这两行就失效了。这两行是用来抑制后退的。
qq 20170213173717

Picker为什么result只返回value,而不返回label?

在表单中需要填入label值,提交表单时需要提交value值。目前result只返回了value值,请问使用者们怎么把label值填入表单页面显示出来的......
不返回一个对象,只返回value,是出于什么特殊的考虑吗?

requirejs无法加载

index.html 页面直接require(['weui'], function(weui)){ ... }
可以用...

index.html 页面中require a.js a.js 依赖 weui.js,index.html页面会报错:
提示weui is not defined

picker 能否直接指定 depth?

直接:

 weui.picker(items, {
     onChange: function (result) {
         console.log(result)
     },
     onConfirm: function (result) {
         console.log(result)
     },
     id: 'doubleLinePicker',
     depth: 3
);

如果有指定的 options('depth') 就无须使用 util.depthOf()
这样城市选择就可以去掉蛋疼的“北京市/北京/朝阳区”这样的数据设计。

关于 alert confirm dialog中的按钮

里面的按钮回调方法里,能不能接受return false ,不要关闭窗口内容.
因为特殊情况下,比如我dialog里放了form表单内容,点按钮时,需要表单检验,检验成功后,才关闭窗口!!

common模块

你们common模块的方式
import 'weui';
import weui from 'weui.js';
试过么,我这边打印出来的console.log(weui) 是个空对象

使用Vue.js框架后,form表单验证无法工作

在使用vue之后,其渲染出来的input元素会给required属性添加一个“required”的value,类似这样
<input data-v-d26d3a4a="" name="ContactName" required="required" type="text" placeholder="请输入联系人名称" class="weui-input">,在默认情况下,表单的验证就无法工作。
经检查是 function _validate($input,$form,regexp) 下的 var reg = input.getAttribute('required') || input.getAttribute('pattern') || ''; 此句获取的reg值为“required”,导致后面的逻辑都将验证字符串是否匹配"requied",所以给出错误的验证结果,希望官方能改进此处以适应vue.js

gallery 组件不显示问题

问题极其怪异,是这样子的,一样的代码在安卓所有版本的微信客户端是没有问题的,图片可以正常显示。但是在某些 iPhone 机上是有问题的,首先是 iPhone5 Plus 上没有问题(犹如安卓机一样流畅),但是在iPhone6 Plus、iPhone7 上有些图片会显示不出来(比如两组图片,A组都可以而B组统一都显示不出来。是的,好像这些客户端商量好的一样对这组图片屏蔽了一样),百思不得其解,特来求助,没有代码(需要的话周一我传一下),希望给个方向性建议~

Picker选择器定位不准?

image

如上图,我经常发现picker滚动之后不再停留在某一项上,而是停在两项之间,这让使用者很困惑,请问这大概是什么原因造成的?

actionSheet的hide方法在某些情况下会报错

如果在actionSheet的menu回调方法中手动调用了hide方法关闭actionSheet,回调结束后actionSheet仍然会尝试关闭一次,这时候就会报错。

使用场景是这样的:
正常情况下点击actionSheet中的menu后,actionSheet会自动关闭。
但是,单页应用中,如果在actionSheet打开的情况下返回上一个页面,就必须手动关闭actionSheet。因此,我必须要在切换页面时手动调用actionSheet的hide方法。然后呢,我有一个menu会触发页面切换,这时候actionSheet是打开的,页面切换调用了一次hide,actionSheet自动关闭又调用一次,就出现了前面描述的问题。

建议调用hide方法的时候判断一下actionSheet是不是还存在。

能否增加单页面路由的功能

开发公众号涉及到用户信息的获取与腾讯的授权 ,多个HTML文件跳转比较麻烦。 能否写一个单页面路由,简单的几个页面都在一个HTML完成。

picker defaultValue 无效

压缩脚本(v1.0.0) picker 组件 defaultValue 项设置无效,而未压缩版本则有效,希望排查一下~

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.