WeUI 为微信 Web打造权限UI框架

WeUI 为微信 Web 服务量身设计

1 WeUI 是什么?

WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库,你可以把它理解为一个前端框架,类似于 Bootstrap 的那种。 由于是微信官方出品,所以对微信的兼容性基本没有太大问题,而且各组件的样式和微信一样,能够和微信很好的融合在一起,给用户较好的体验。。

WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含buttoncelldialogtoastarticleicon等各式元素。

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

2 安装

方式一(推荐)

微信官方、Staticfile CDN 和 cdnjs 为 WeUI 提供了 CDN 链接,推荐使用,链接如下:

来源 地址
微信官方 //res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
Staticfile CDN //cdn.staticfile.org/weui/0.4.3/style/weui.css
cdnjs //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css

方法二:

使用bower进行安装

bower install --save weui

方法三:

使用npm进行安装

npm install --save weui

开发

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
gulp -ws

运行gulp -ws命令,会监听src目录下所有文件的变更,并且默认会在8080端口启动服务器,然后在浏览器打开 http://localhost:8080/example

推荐使用方式一,直接进行引用链接或者将文件下载下来本地引入

3 使用

WeUI 官方 Github:https://github.com/weui/weui

WeUI 官方 Demo:http://weui.github.io/weui

WeUI 官方 Releases:https://github.com/weui/weui/releases

WeUI 官方 Wiki:https://github.com/weui/weui/wiki

WeUI 是一个样式库,核心文件就是 weui.css,如果用于生产环境,建议使用官方提供的 CDN 或下载官方最新的 Releases 引入即可,CDN 地址可以在官方 Wiki 中找到,生产环境建议使用压缩后的 weui.min.css

模块: 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar).

注意:

标签里要加上:

引入:

的开始标签要加属性:

WeUI,你可以任意使用各种组件了,关于组件怎么使用,去看官方文档就好了, F12 去官方代码 Demo 把代码复制过来就行了。

更多查看文档实例:

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

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

基础样式 : https://weui.io/

w3c 菜鸟 : https://www.runoob.com/w3cnote/weui-for-weixin-web.html

发布了225 篇原创文章 · 获赞 57 · 访问量 11万+
展开阅读全文

WeUI如何设计登陆界面

06-04

我用JS实现了登陆界面,如图所示(图片是GIF,若无法显示,点进去即可): ![图片说明](https://img-ask.csdn.net/upload/201806/05/1528142904_666808.gif) 但是移植到WeUI项目里去就不行了,烦请各位大神帮忙看一下,如何在WeUI里面实现相同的功能,账号密码不需要连数据库,使用字符串验证。 WeUI代码很简单,下载地址:https://pan.baidu.com/s/1ARGadPZS3o_LZeF_YPnVRw 不想下载的话我也把代码贴上来: ``` <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>智能大棚</title> <link rel="stylesheet" href="public/css/weui.css"/> <link rel="stylesheet" href="public/css/index.css"/> </head> <body ontouchstart> <div class="container" id="container"></div> <script type="text/html" id="tpl_home"> <div class="page"> <div class="page__hd"> <h1 class="page__title"> <img src="public/images/logo.png" alt="logo" width="100%" /> </h1> <p class="page__desc">用户登录</p> </div> <div class="page__bd page__bd_spacing"> <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"> <input class="weui-input name" name="NAME" type="text" placeholder="请输入账号"> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"> <label class="weui-label">密码</label> </div> <div class="weui-cell__bd"> <input class="weui-input pwd" name="PWD" type="password" placeholder="请输入密码"> </div> </div> </div> <div class="hb_mar_top_40"> <a href="javascript:;" class="weui-btn weui-btn_primary" id=submit_btn>登录</a> </div> </div> <!-- <div class="page__ft"> <a href="javascript:home()"><img src="public/images/icon_footer.png" /></a> </div> --> <!--BEGIN toast--> <div id="toast" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-icon-success-no-circle weui-icon_toast"></i> <p class="weui-toast__content">登录成功</p> </div> </div> <!--end toast--> <!--BEGIN cancelToast--> <div id="cancelToast" style="display: none;" > <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-icon-cancel weui-icon_toast"></i> <p class="weui-toast__content">登录失败</p> </div> </div> <!--end cancelToast--> <!-- loading toast --> <div id="loadingToast" style="display:none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-loading weui-icon_toast"></i> <p class="weui-toast__content">Loading</p> </div> </div> </div> </script> <script src="public/js/zepto.min.js"></script> <script src="public/js/jweixin-1.0.0.js"></script> <script src="public/js/weui.min.js"></script> <script src="public/js/index.js"></script> <script type="text/javascript"> $(function(){ $("#submit_btn").click(function(){ var username = $('.name').val(); var pass = $('.pwd').val(); if(username.value=="") { alert("请输入用户名"); username.focus(); return false; } else if(pass.value=="") { alert("请输入密码"); password.focus(); return false; } else if((pass.value=="admin")&&(username.value=="admin")) { window.location.href="www.baidu.com"; } else { showToast({ title: '用户名和密码不能为空'}) return false; } return false; }); //登录成功 function toast(){ var $toast = $('#toast'); if ($toast.css('display') != 'none') return; $toast.fadeIn(100); setTimeout(function () { $toast.fadeOut(100); location.href="http://39.105.24.124/18034#/layout/watch"; //成功后跳转 }, 500); } //登录失败 function canceltoast(){ var $cancelToast = $('#cancelToast'); if ($cancelToast.css('display') != 'none') return; $cancelToast.fadeIn(100); setTimeout(function () { $cancelToast.fadeOut(100); }, 500); } //Loading加载 function loadingtoast(){ var $loadingToast = $('#loadingToast'); if ($loadingToast.css('display') != 'none') return; $loadingToast.fadeIn(100); setTimeout(function () { $loadingToast.fadeOut(100); }, 500); } }); </script> </body> </html> ``` 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览