精华内容
下载资源
问答
  • WeUI

    2021-06-01 20:46:01
    WeUI是一套同微信原生视觉体验一致的基础样式库。
  • weui

    2019-09-21 23:36:11
    WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。\ WeUI 提供了总共30+个非常实用的组件:列表,...

    WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。\

    WeUI 提供了总共30+ 个非常实用的组件:列表,表单,卡片,对话框,下拉刷新等。

    WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

    基础组件详情请参考  http://jqweui.com/components#grid
     

    转载于:https://www.cnblogs.com/cnn2017/p/7454244.html

    展开全文
  • WEUI

    2018-08-15 10:53:40
    WEUI 1.showLoading 显示:$.showLoading("数据加载中"); 隐藏:$.hideLoading(); 2.修改showLoading样式 .weui-toast 3.修改加载框样式 p.weui-toast_content {  margin-top: 0rem; }...

    WEUI

    1.showLoading

    显示:$.showLoading("数据加载中");

    隐藏:$.hideLoading();

    2.修改showLoading样式

    .weui-toast

    3.修改加载框样式

    p.weui-toast_content {
           margin-top: 0rem;
    }

    展开全文
  • WeUi

    2017-03-23 17:24:00
    weui0.44基础上,采用zepto作为基础库,兼容weui1.1所有效果,目前分为表单,基础,布局,组件,js函数五大类,共计百余项功能 二.使用方法 直接看官方文档 三.注意 1.如果用的是weui+(即参考文献2),则要...

    一.参考文献

    1.GitHub:https://github.com/weui/weui

    2.weui+:一个扩展库,在weui0.44基础上,采用zepto作为基础库,兼容weui1.1所有效果,目前分为表单,基础,布局,组件,js函数五大类,共计百余项功能

    二.使用方法

    直接看官方文档

    三.注意

    1.如果用的是weui+(即参考文献2),则要使用GitHub上下载的css和zepto文件,因为作者做了修改,增加了一些功能。

    2.body上要加一个属性

    <body ontouchstart>

    四.实例(weui+)(meta标签是根据自己项目需求加的)

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <!--优先使用最新版本 IE 和 Chrome-->
            <meta name="apple-mobile-web-app-title" content="">
            <!--添加到主屏后的标题(IOS)-->
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <!--启用 WebApp 全屏模式(IOS)-->
            <meta name="apple-touch-fullscreen" content="yes" />
            <!--启用 WebApp 全屏模式(IOS)-->
            <meta http-equiv="Cache-Control" content="no-siteapp" />
            <!--禁止百度转码-->
            <meta name="format-detection" content="telephone=no" />
            <!--关闭电话号码的自动识别-->
            <meta content="email=no" name="format-detection" />
            <!--关闭邮箱的自动识别-->
            <meta name="msapplication-tap-highlight" content="no">
            <!--winphone系统a、input标签被点击时产生的半透明灰色背景-->
            <meta name="description" content="">
            <meta name="keywords" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
            <title></title>
            <link rel="stylesheet" type="text/css" href="../css/weuix.min.css"><!-- WeUi+样式文件 -->
        </head>
        <body ontouchstart>
    
            
            <script type="text/javascript" src="../js/zepto.min.js"></script>
        </body>
    </html>

     

    五.weui+(注意:不是weui)使用小结(这个扩展库的GitHub没有给出文档,以下是一些自己使用过的)

    5.1datetimePicker时间选择组件

    	// 日期选择初始化
    			$("#date1").datetimePicker({title:"选择日期",m:1,onChange: function () {
    				var date1=$("#date1").val();			
       },});

    我没有看到如何获取日期返回值,后来参考微信weui文档,加了个onChange函数获得了所选择的时间。注意,函数里面是用的input的val()。有个问题:获取的值是前一个onchange的,并非最终的,未解决这个问题。

    转载于:https://my.oschina.net/Cubicluo/blog/865701

    展开全文
  • weui 开发文档

    万次阅读 多人点赞 2019-03-28 14:58:21
    今天需要用到weui,这里记录一下开发文档地址 开发文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md github: https://github.com/Tencent/weui.js 效果展示: https://weui.io ...

    一系列文档地址

    今天需要用到weui,这里记录一下开发文档地址

    开发文档:http://old.jqweui.com/components

    js文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md

    github: https://github.com/Tencent/weui.js

    菜鸟教程:http://www.runoob.com/w3cnote/weui-for-weixin-web.html

    效果展示: https://weui.io

    这里简单介绍一下小程序如何引入weui及其简单的使用

    项目中使用步骤

    1、在GitHub上https://github.com/weui/weui-wxss/下载程序代码,解压后可以看到如下目录:

    在这里插入图片描述

    2、我们只需要将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下:

    在这里插入图片描述

    3、新建微信小程序项目,将weui.wxss文件导入到小程序项目的根目录下:

    在这里插入图片描述

    在这里插入图片描述

    4、在项目中引用:在全局app.wxss中加入weui.wxss的引用- @import "weui.wxss";

    5 根组件使用class=”page”

    <view class="page"></view>
    

    6 页面骨架

    <view class="page">
    	<view class="page__hd"></view><!--页头-->
    	<view class="page__bd"></view><!--主体-->
    	<view></view><!--未设置页脚-->
    </view>
    

    7 除此之外都是按照weui-开头后接组件名称,例如class=”weui-footer”

    <view class="weui-footer">我是页脚</view>
    

    8 组件的子组件样式,例如view.weui-footer组件还有链接和版权信息。

    <view class="weui-footer">
    <view class="weui-footer__links">
        <navigator url="" class="weui-footer__link">上海物联网科技有限公司</navigator>
    </view>
    <view class="weui-footer__text">Copyright © 程序媛专用</view>
    </view>
    

    本地起测试demo

    1. 为了更直观的查看效果和方便使用,我在小程序中新建个项目,地址指向weui-wxss-master\dist(即从git上克隆的代码对应的dist目录),这样就可以随时查找自己要的效果,剩下的就是复制粘贴了,在项目中使用weui的样式如下:

    在这里插入图片描述

    示例代码:

    <view class="page">
        <view class="page__hd">
            <view class="page__title">Button</view>
            <view class="page__desc">按钮,WeUI采用小程序原生的按钮为主体,加入一些间距的样式。</view>
        </view>
        
        <view class="page__bd page__bd_spacing">
            <button class="weui-btn" type="primary">页面主操作 Normal</button>
            <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>
    
            <button class="weui-btn" type="default">页面次要操作 Normal</button>
            <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>
    
            <button class="weui-btn" type="warn">警告类操作 Normal</button>
            <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>
    
            <view class="button-sp-area">
                <button class="weui-btn" type="primary" plain="true">按钮</button>
                <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>
    
                <button class="weui-btn" type="default" plain="true">按钮</button>
                <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>
    
                <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
                <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
                <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
            </view>
        </view>
    </view>
    
    
    展开全文
  • 微信WeUI源代码

    2016-09-22 18:05:30
    WeUI
  • weui-sketch:ZTfer的weui草图
  • WeUI - tailor-made for WeChat web service 中文版本 Introduction WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order ...
  • WeUI-为WeChat Web服务量身定制 介绍 WeUI是类似于WeChat的UI框架,由WeChat设计团队正式设计,是为WeChat Web开发量身定制的,目的是改善和标准化WeChat用户的体验。 包括button , cell , dialog , progress , ...
  • WeUI框架

    千次阅读 2019-10-23 08:22:35
    WeUI框架 WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案,有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了UI框架,我们就可以让我们的小程序变得更加美观。 体验WeUi小程序 WeUI是微信...
  • NGX-WEUI 组件使用构建。 版 使用7.0.x WeUI 1.x 使用8.x和Angular 8的WeUI <= 2.2 WeUI >= 2.3使用9.x和Angular 9,10,支持深色和浅色主题 目录 用法与演示 - - 建立专案 安装全局angular-cli : npm ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,012
精华内容 1,604
关键字:

weui