使用weui - 相关文章

【使用weui】的更多相关文章

微信官方开源UI库-WeUI

概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog.toast.article.icon等各式元素. 这有什么好处呢?其实从上面也可以看到官方的话,就是让你的应用跟微信官方版本更加统一,而没有违和感.当然,更重要的是,这样的库在某些时候可以提供你的开发效率哦.github地址:https://github.com/weui/weui 使用方法一: 使用bower进行安装 bower insta…

weui 图片弹框

添加图片与弹出效果对比: HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />  <link rel=…

weui 搜索框

点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <!--医首信息自…

weui dialog

切记:weui dialog 的样式是在weui.css,而不是在weui.min.css HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <…

weui tabbar 切换

Html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />  <link rel="stylesh…

weui 多网页切换效果分析

weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.icon等各式元素. 严格的讲它是一个css库.算一个精简的库. 如果要用jQuery开发的话,head部分,需要加载如下信息: <head> <meta charset=&quo…

TODO：小程序集成WeUI

TODO:小程序集成WeUI WeUI 为微信 Web 服务量身设计.WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素. 1.使用微信开发者工具添加新项目MWL 2.下载WeUI的源码,把style文件拷贝到MWL根目录,与pages文件夹同一级 3.WXSS(WeiXin Styl…

微信小程序之使用weui.wxss（八）

[未经作者本人同意,请勿以任何形式转载] 什么是WeUI? WeUI是在遵守微信视觉设计规范下,由官方设计团队为小程序量身定制的基础样式库. 这里把WeUI放到基础篇里,是因为WeUI是官方出品,并且在10月28号IDE更新后,IDE不能识别和引用css,同时也屏蔽了从网络获取样式文件,和css划清界限. >>> 如何引入WeUI 下载WeUI weui.wxss 注意是在[weui-wxss/dist/style/]目录下,不要[weui-wxss/src]目录里面下载将weui.w…

移动端前端UI库—Frozen UI、WeUI、SUI Mobile

[MUI]http://www.dcloud.io/ [Clouda]http://clouda.baidu.com/blend2是百度历时两年共同研发的开源App技术框架,基于Node.js,简单易用,完美结合BAE: Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https://github.com/frozenui/frozenui Demo:http:…

WeUI 为微信 Web 服务量身设计-h5前端框架

WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素. git地址: https://github.com/weui/weui…

移动端前端框架UI库（Frozen UI、WeUI、SUI Mobile）

Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https://github.com/frozenui/frozenui Demo:http://frozenui.github.io/frozenui/demo/index.html WeUI 自述:WeUI是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一. 开…

推荐：移动端前端UI库—Frozen UI、WeUI、SUI Mobile

Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https://github.com/frozenui/frozenui Demo:http://frozenui.github.io/frozenui/demo/index.html WeUI 自述:WeUI是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一. 开…

WeUI—微信官方UI库

WeUI 为微信 Web 服务量身设计概述 WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress, toast.article.icon等各式元素. 使用方法一: 使用bower进行安装 bower install --save weui 方法二: 使用npm进行安装 npm install --save weui 开发 git clone https://…

从WeUI学习到的知识点

WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar). Demo页面: https://weui.io Github页面: https://github.com/weui/weui 下面讲一讲我从WeUI中学到的CSS技巧. Button 从这里我开始注意到, WeUI的实现中, 很多边框都是用:…

移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile

web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/ 很厉害的一个个人产品 http://amazeui.org/ 这也是一个 mui.com 这个也是一个不错的 Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https://github.com/frozenu…

Weui 微信网站开发样式插件使用教程

微信的网页样式正式发布了,搜了一下,正式引入了乐学一百微信端的项目中. <div class="weui_grids"> <a href="javascript:;" class="weui_grid js_grid" data-id="button"> <div class="weui_grid_icon"> <img src="./images/ico…

WeUI首页、文档和下载 - 专为微信设计的 UI 库 - 开源中国社区

Download Bitnami Review Board Stack click here WeUI首页.文档和下载 - 专为微信设计的 UI 库 - 开源中国社区…

WeUI

从WeUI学习到的知识点 WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar). Demo页面: https://weui.io Github页面: https://github.com/weui/weui 下面讲一讲我从WeUI中学到的CSS技巧. Button 从这里我开始注意到, WeU…

巧用weui.gallery()，点击图片后预览图片

要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo: https://weui.io/weui.js/ 要先给图片创建一个节点: var imgDom = $("<img class='weui-jiaj-img' />"); 因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的…

巧用weui.topTips验证数据

场景一.有一个输入金额的场景,这个金额需要验证,验证说明如下: 不能为空格: 不能为0: 不能为汉字: 不能为其它字符: 不能大于200: 唯一可以的是,只有输入3~199之间的数字,下面的确定按钮才会显示,否则,隐藏这个按钮. HTML:  <div class="weui-jiaj-panel"> <div class="weui-jiaj-money-box dialog js_show"> <…

weui.css中flex容器下子项目的水平和垂直居中

想用weui.css写微信平台的页面,发现没有让flex(weui-flex)容器下,子项目(weui-flex__item)居中的类. 百度了一下,是用justify-content:center;实现水平居中,用align-items:center 实现垂直居中. 可是当我这样写的时候,竟然没有用!  <style> .justify{ justify-content: center; } .align{ align-items: center; }…

weui 中的tabbar导航

最近做微信的服务号项目,用的weui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好.真是很让人头疼! 所以结合着自己做的项目,随便写一点东西. 比如说,tabbar导航的切换.官网给说的对应的文档如下图: 从我个人角度而言,实在不能短时间能看出来具体的用法. 还是直接晒一下用法吧! <div id="tab-home" class="weui-tabbar"> <a href="javascript:;&quo…

记录WEUI中滚动加载的一个BUG

最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较晦涩的.(个人看法) 微信端展示公司订单,采用了滚动加载而没有用分页,觉得一般移动端分页的处理比较少.当然,条件搜索才是满足用户精准查找的核心,无论是分页还是滚动加载都只是给用户一个大致浏览的处理. 顺便说说注意的一点,jquery-weui这个文件引入的位置应该在jq文件之后,这样才能在Jq的基础…

微信开发系列——微信订阅号前端开发利器：WeUI

前言:年前的两个星期,学习了下微信公众号的开发.后端基本能够基于盛派的第三方sdk能搞定大部分事宜.剩下的就是前端了,关于手机端的浏览器的兼容性,一直是博主的一块心病,因为博主一直专注于bootstrap的相关组件学习,知道bootstrap做响应式没有任何问题,所以曾经尝试过直接用bootstrap来布局,对于一些简单的栅格布局,bootstrap没有任何问题,可是一旦涉及前端组件这一块的时候,总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了.于是乎博主打算另辟蹊径,找找…

微信公众号开发，weUi组件，问题总结

1.实现上拉分页,Google兼容问题,weui框架提供的模板是这样的($(document.body).infinite()),在body定一个div通过这个div,实现上拉 $('#wrapper').infinite().on("infinite", function() { if(loading) return; loading = true; setTimeout(function() { page++; //你的操作 }, 2000); }); 2.多图片预览问题,通过pb…

weUI之分页查询实现

本文旨在介绍移动端h5分页查询实现 1.前端html 前端基于weui 样式库实现参考http://jqweui.com/ <div class="weui-search-bar" id="searchBar"> <form class="weui-search-bar__form"> <div class="weui-search-bar__box"> <i class=&qu…

vue+weui+FormData+XMLHttpRequest 实现图片上传功能

首先是样式:https://weui.io/#uploader 在weui示例中可以看到是用以下方法进行选择图片 <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/> $uploaderInput = $("#uploaderInput"): $uploader…

Jquery weui picker 支持label和value

万年没更新了. 最近用jquery weui. 在使用picker时需要一些问题. 就是让picker 显示label, 但是取值的时候取value用于存储. 官网例子如下 Jquery-weui 官网 : 点这里写这篇文章时,用的版本是1.2.1版本 $("#picker-name").picker({ title: "请选择您的称呼", cols: [ { textAlign: 'center', values: ['赵', '钱', '孙', '李', '…

微信 + weui 框架记录

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一: 包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素: 一.扩展操作文档手册: weui https://github.com/Tencent/weui/wiki weui.js https://github.com/Tencent/weui.js/blob/master/doc…

微信小程序从零开始开发步骤-引入框架WeUI

首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用个UI框架,这样可以省去以后很多麻烦. WeUI作为一个开源的移动端UI框架,由于它是微信官方提供的对微信的兼容性没有太大问题,而且和各组件的样式和微信一样,能够很好地和微信融合在一起,给用户较好的体验. 使用步骤 1.在GitHub上https://github.c…