Giter Club home page Giter Club logo

weui's Introduction

WeUI - tailor-made for WeChat web service

Build Status npm version

中文版本

Introduction

WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order to improve and standardize the experience for WeChat users. Including components such as buttoncelldialogprogresstoastarticleactionsheeticon.

Documentations

Mobile demo

https://weui.io

https://weui.io

Legacy version 1.x: https://weui.io/1.x

Legacy version 0.4.x: https://weui.io/0.4.x

Development

License

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

Please feel free to use and contribute to the development.

Contribution

If you have any ideas or suggestions to improve Wechat WeUI, welcome to submit an issue/pull request.

weui's People

Contributors

airyland avatar antife-yinyue avatar bearj avatar blade254353074 avatar bruceczk avatar chen-zeyu avatar classicoldsong avatar eric-guo avatar francistm avatar haibinyu avatar hakurouken avatar helloyou2012 avatar jeff2ma avatar karlew avatar lishewen avatar progrape avatar qcam avatar qianduan avatar sklme avatar u0x01 avatar uxsi avatar winstonxie avatar zoomzhao 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's Issues

weui在vivo手机中样式乱掉了

最近在微信开中写了几个页面,在iPhone 华为 小米 页面样式都是好的,唯独vivo手机5.5寸屏幕,样式乱掉了

居然只能输入3个汉字的label

1
这个表单左侧 的label,居然宽度只有3个汉字的位置,一旦超过3个汉字,就和右侧 的input重叠了。

好奇葩的设定,是为了什么呢?
或者说我还不太会用?

新的需求

打开页面后,看完button再想看dilag无法返回了,能否增加回退按钮,或者向右滑动返回

发现没有微信底部菜单

我们用这ui 来做微信的底部页面,但是从微信消息或新闻进入html5 页面 微信自带菜单就消失了,所以需要html5 css3 实现一个和微信菜单一样的菜单,希望你们能提供ui

IIS中如何配WEUI,怎么配都没有样式

IIS中如何配WEUI,怎么配都没有样式出来
把LESS转成CSS,还是不出来
最后把LESS加到MIME中,引入less.js
也不出来样式,CHROME环境中报 406 (Not Acceptable) 错
谢谢

weui交流的方式?

是否可以考虑给个微信群或者QQ群方便大家的交流,weui才出,最近想使用weui框架,如果有个官方的交流方式更快捷方便一点~

ios微信客户端中打开页面,时间插件点不开,Android的没有问题

ios微信客户端中打开页面,时间插件点不开,就像加了一个disabled属性一样。Android的微信客户端中打开页面没有问题,这个和系统有关系吗?
然后我将连接复制到浏览器中:
Android UC浏览器
iOS 自带的Safari浏览器
两者都能点开时间插件,但是样式风格完全不一样(好像是和系统有关)
不知道你们有没有遇到过这样子的情况

weui_dialog

.weui_dialog {
position: fixed;
z-index: 13;
width: 85%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform:translate(-50%,-50%);/需要加上这行,QQ和微信里才能显示居中/
background-color: @weuiDialogBackgroudColor;
text-align: center;
border-radius: 3px;
.weui_dialog_confirm & {
.weui_dialog_hd {
text-align: left;
padding: 1.2em 20px .5em;
}
.weui_dialog_bd {
text-align: left;
}
}
}

flexbox 和 bem

android 4.0 ~ 4.3 的内置浏览器支持 flexbox old syntax,也就是说绝大部分的 flexbox 特性都能使用。何必要使用 display: table-cell 这种 hack。
现在所有的 class 都是 _ 分割的,如何区分连字符和层级关系?

执行gulp -ws命令报错

module.js:338
throw err;
^
Error: Cannot find module 'lodash'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (D:\git\weui\node_modules\browser-sync\lib\hooks.js:3:20)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

请问如何使用到真实的生产环境中去?

我想要这样的效果,希望在微信公众号项目中能使用。
那我改怎么做呢?

我通过开发环境去开发出了我想要的效果之后,如何提取这些html/css/js,使用到真实的微信公众号项目中呢?
需要部署微信公众号项目的服务器有
nodejs?还是怎么样能不能给小弟指点一番

[建议]示例中的example.js添加一个自动加载的方法

$container.on('click', '.js_cell[data-id]', function () {
    var id = $(this).data('id');
    var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id);
    $container.append($tpl);
    stack.push($tpl);
    history.pushState({id: id}, '', '#' + id);

    //加载数据
    if(typeof eval('load_'+id) != 'undefined' && eval('load_'+id) instanceof Function) { 
        eval('load_'+id+'();');
    }
    $($tpl).on('webkitAnimationEnd', function (){
        $(this).removeClass('slideIn');
    }).on('animationend', function (){
        $(this).removeClass('slideIn');
    });
    // tooltips
    if (id == 'cell') {
        $('.js_tooltips').show();
        setTimeout(function (){
            $('.js_tooltips').hide();
        }, 3000);
    }
});

添加的三行代码用于页面跳转前的加载数据

//加载测试
function load_test(){
    $('#toast').show();
    setTimeout(function () {
        $('#toast').hide();
    }, 800);
}

ios微信下input[type=date]失效

在ios微信浏览器中将Input的type设为date后无法点击和输入……
(在Android设备中没有问题,在chrome中使用设备模式也没问题)

<div class="weui_cells_title">输入日期</div>
<div class="weui_cells weui_cells_form">
  <div class="weui_cell">
    <div class="weui_cell_hd">
      <label class="weui_label">生日</label>
    </div>
    <div class="weui_cell_bd weui_cell_primary">
      <input type="date" class="weui_input">
    </div>
  </div>
</div>
<div class="weui_btn_area">
  <button class="weui_btn weui_btn_primary" type="submit">提交</button>
</div>

设备:iphone 5s
系统:ios 8.1.3

截图如下:

699982646500440699

微信可能内置 React.js 吗

目前听说是有 Zepto.js 的,
作为微信内生态的合作伙伴,想知道有没有内置 React.js 的计划~
毕竟你们也要推基于 React.js 的 React-weUI 嘛

Router in wechat webview

Hey, nice work guys.

我注意到你们使用 history.pushState() 实现了简单的路由,我在微信 webview 中测试了一下,有一个问题有点奇怪:使用微信 webview 上方的 Back 和使用“屏幕边缘左滑返回” 的效果完全不一样

当使用 Webview Back 时,所有的路由都很正常
但当通过屏幕边缘左滑返回时,路由好像失效了,直接退出了整个 webview。

我发现好像所有使用 pushState 实现路由的 web app 都有这个问题,
但是使用原始的 locatin.hash & hashchange 做路由的却没有这个问题……

但是它们确实都给 history.length +1 了……
是微信 webview 做了什么处理吗?还是 pushState 的表现在 iOS WebView 上本来有有不同?(Safari 是没有这个问题的)

WeUI新增组件需求

目前WeUI整理出来的组件有:

  • button
  • cell
  • dialog
  • toast
  • article
  • icon

使用场景是移动端微信内

我们知道,一套完整的Wap端UI库肯定不止以上这些组件,所以我们希望借助开源社区的力量,来丰富WeUI的组件库。

各位在开发微信内的Web应用时,希望使用哪些组件,可以提出建议,谢谢~

目前感谢@sinhe 同学提出“图片列表” #8, 将加入我们的开发计划。

能否把代码内嵌入微信里面

能否把这个框架内嵌进入微信里面呢,微信内置的浏览器好像不支持页面缓存。 如果能把这个框架放入到微信应用里面。那么加载起来页面就更快了。能大大的提升微信内页面的体验。

能否增加对话UI

对话列表UI,类似web版微信的UI(不过那套的样式已经比较古老了)

weui 可以在微信程序里面正确显示吗

比如我向关注的微信用户发了一个外链接的图文消息,然后点击跳转到对应的外链接,而这个外链接是由weui做成的,但是这个页面是在微信程序里面打开的,而不是在手机浏览器中打开的,请问这种情况下weui能否正确显示。

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.