WeUI 专为微信Web服务量身定制

IT实战联盟博客：http://blog.100boot.cn

####概述

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

####手机预览
请用微信扫码或长按识别

####WeUI核心组件

**WeUI组件**目前不是很丰富，但是能满足大部分需求了。体验就更不用说了，自己试过就知道，使用起来也非常方便直接copy。**WeUI** 的核心文件就是 **weui.css**，如果发布正式环境环境，可以压缩一下。

####简单框架搭建

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>WeUI</title><!-- 引用weui.min.css --><link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">
</head>
<body ontouchstart><!-- 使用 WeUI --><a href="" class="weui_btn weui_btn_primary">绿色按钮</a>
</body>
</html>备注：HTML头部 viewport 的meta标签，body标签的ontouchstart属性也需要加上。

HTML使用WeUI的基本框架搭建好了，可以随意使用WeUI的各种组件了，官方Demo直接copy 就OK了。

####示范组件-对话框Dialog
在移动web开发中经常有对话框提醒的业务，那么我们就来看一下使用WeUI的对话框组件的效果吧！
#####自定义对话框

<div class="weui_dialog_confirm"><div class="weui_mask"></div><div class="weui_dialog"><div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div><div class="weui_dialog_bd">自定义弹窗内容<br>...</div><div class="weui_dialog_ft"><a href="javascript:;" class="weui_btn_dialog default">取消</a><a href="javascript:;" class="weui_btn_dialog primary">确定</a></div></div>
</div>

<div class="weui_dialog_alert"><div class="weui_mask"></div><div class="weui_dialog"><div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div><div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div><div class="weui_dialog_ft"><a href="javascript:;" class="weui_btn_dialog primary">确定</a></div></div>
</div>

好了，其他组件大家可以尝试自己尝试一下啦！
更多经常内容请大家关注“IT实战联盟”公众号哦~~~

IT实战联盟博客：http://blog.100boot.cn

WeUI 专为微信Web服务量身定制相关推荐

[论文泛读]Web服务组合综述相关论文1（3篇）
邓水光,吴朝晖. Web服务组合方法综述. 中国科技论文在线,2008,3(2):79-84. Time:2 hours Web服务组合领域的研究内容包括:Web 服务组合建模语言.服务组合方法.服务 ...
WeU专为微信移动 Web应用设计的 UI 库。
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库. WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含butt ...
WeUI 为微信 Web 服务量身设计-h5前端框架
WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toas ...
微信小程序开发实战3 使用Go语言开发Web服务
3.使用Go语言开发Web服务微信小程序提供了一系列服务端API用以配合小程序前端来完成相应的功能,以及帮助开发者进行各类数据分析.业务管理和信息查询等操作.例如小程序用户信息的获取就是通过服务端A ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
zabbix===》微信报警、聚合图形、自动发现自动注册、监控NFS、MySQL、web服务、URL地址
一.企业微信号申请 https://work.weixin.qq.com/ 1.注册因为我们没有企业,所以我们选择组织. 下一步, 按需填好相应信息 2.配置微信企业号设置好相应信息,后记录下企业 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
文章目录前言一.连接主机数据库二.创建数据表结构三.准备测试数据专题文章链接前言做完了前面的注册申请工作,今天我们开始进行程序的开发. 这篇文章,我们要完成的是服务端数据库表的创建. 一 ...
微信小程序使用高德地图Web服务爬取企业数据
高德地图Api官网:高德开放平台 | 高德地图API 一.高德地图使用说明 "POI2.0" 地点搜索服务2.0是一类Web API接口服务:服务提供多种场景的地点搜索能力,包括关 ...
Evento 易语言web服务框架微信小程序微信支付微信JSAPI调用
Evento 易语言web服务框架使用说明前言: 为什么要有这个东西,C/S构架在十多年前就已经开始向主流的B/S构架转型,其中在易语言WEB应用也不泛优秀的例程和应用.官方出了针对IIS开发的IS ...
WeUI 为微信 Web打造权限UI框架
WeUI 为微信 Web 服务量身设计 1 WeUI 是什么? WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库,你可以把它理解为一个前端框架,类似于 Bootstrap ...

WeUI 专为微信Web服务量身定制

WeUI 专为微信Web服务量身定制相关推荐

最新文章

热门文章