微信常用的元素包含按钮、列表、提示、弹层、进度、消息、上拉、图标、面板、选项、搜索等。
这里只提供微信常用的按钮，其它按钮风格请参考官方文档：官网—CSS—按钮。
去看看，其它按钮效果
<![CDATA[
//可以设置按钮的边框色border-颜色,背景色bg-颜色，按钮锁定 button-block
<button class="button bg-green button-block">成功</button>
//默认按钮（无边框、无背景、无锁定，如需禁用加上disabled="disabled"属性）
<button class="button"></button>
]]>
列表
提示
弹层
进度
消息
上拉
图标
面板
选项
搜索
微信导航、特殊导航。
微信菜单
圆圈导航
微信里常用的一些内容，包括单图文消息、多图文消息、详情、分享、打赏、留言、关注、综合示例等等。
单图文消息
拼图前端框架介绍
2016年7月23日23:39
拼图是优秀的响应式前端CSS框架，国内前端框架先驱及领导者，自动适应手机、平板、电脑等设备，让前端开发像游戏般快乐、简单、灵活、便捷。
阅读全文
<![CDATA[
<!--
作者：1979788761@qq.com
时间：2016-07-24
描述：在微信中请使用wx-body样式，重置原有body背景色；即：<body class="wx-body">...</body>
-->
<div class="wx-push" onclick="location.href='index.html'">
<div class="title">标题</div>
<div class="time">时间</div>
<div class="view-banner">
<!--banner图片-->
<img src="...">
</div>
<div class="view-text">
简介/摘要
</div>
<div class="view-link">
阅读全文
</div>
</div>
]]>
多图文消息
这是图标在右侧的超长标题，最多显示3行文字，超出的部分不会截取，需要自己用程序处理哦！
<![CDATA[
<!--
作者：1979788761@qq.com
时间：2016-07-24
描述：在微信中请使用wx-body样式，重置原有body背景色；即：<body class="wx-body">...</body>
-->
<div class="wx-pushlist" onclick="location.href='index.html'">
<!--banner图样式请加上head-->
<div class="list head">
<div class="banner">
<!--banner图地址，banner尺寸建议在720x480 或等比例，宽度最低320px，高度最低360px-->
<img src="...">
</div>
<div class="title">banner图标题</div>
</div>
<div class="list left">
<!-- 64x64的图标-->
<div><img src="..."></div>
<div class="short-title">这是短标题。</div>
</div>
<!--列表样式根据喜好，可以设置图片在左侧还是右侧，在左侧使用left样式，右侧使用right样式-->
<div class="list left">
<div><img src="..."></div>
<div class="short-title">这是短标题，超出后会自动省略哦！</div>
</div>
<div class="list right">
<div><img src="..."></div>
<div class="long-title">这是图标在右侧的超长标题，最多显示3行文字，超出的部分不会截取，需要自己用程序处理哦！</div>
</div>
</div>
]]>
详情
文章详情
拼图 Pintuer-国产跨屏响应式前端框架
时间：2015-1-1 作者：拼图 来源：拼图
国内优秀的HTML、CSS、JS跨屏响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、快速、便捷。改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。
拼图 Pintuer：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。
功能特色：
移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面浏览器的同时，更适应了移动互联网的潮流。
组件丰富、海量插件：拼图前端框架重新定义了CSS基础、常用元件及JS组件，可快速构架前端界面，实现跨屏响应。同时兼容所有jQuery插件，在项目中可以灵活使用，让前端开发如虎添翼。
轻量高效、国产开源：拼图基于应用广泛jQuery插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。
<![CDATA[
<div class="detail">
<div class="padding">
<h3 class="text-center">
内容详情标题
</h3>
<br>
<h5 class="text-center">
时间：2015-1-1 作者：拼图 来源：拼图
</h5>
<br>
<p>
内容段落1</p>
<p align="center">
图片
</p>
<p>
段落1</p>
<p>
段落2</p>
<p>
<strong>段落标题：</strong>
</p>
<p>
段落内容，自行定义</p>
<p>
...</p>
</div>
</div>
]]>
文档详情
拼图
大标题
章标题
1.1 节标题
拼图 Pintuer：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。
1.2 节标题
拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。
<![CDATA[
<div class="padding">
<div class="text-center">
<h2>拼图</h2>
<hr>
</div>
<div class="height">
<article class="height">
<h3>大标题</h3>
<section>
<h4>章标题</h4>
<section>
<h5>1.1 节标题</h5>
<p>...</p>
</section>
<section>
<h5>1.2 节标题</h5>
<p>...</p>
</section>
</section>
</article>
</div>
</div>
]]>
分享
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../css/pintuer.debug.css" rel="stylesheet" />
</head>
<body>
<!--HTML调用按钮代码-->
<div class="text-center">
<a class="button button-block button-big bg-green wx-share-btn">分享给我的好友</a>
</div>
<!--HTML分享层代码-->
<div class="wx-share">
<div class="wx-share-bg"></div>
</div>
</body>
<!--JS代码，直接引用pintuer.js即可，注意，分享按钮必须包含 wx-share-btn样式。-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../../js/pintuer.debug.js"></script>
</html>
]]>
打赏
这里的打赏跟微信里的赞赏不同，微信里的赞赏是公众平台才有的功能，并且是输入密码支付的。
在这里我们可以直接转账支付，如何设置二维码请参考：微信中如何设置收款二维码
在使用时，直接复制示例代码即可，一般打赏是放在文章底部。
长按识别图片中的二维码进行打赏
金额随意，多多益善！
<![CDATA[
<div class="padding margin text-center">
<button class="button bg-yellow dialogs" data-toggle="click" data-target="#pay-dialog" data-mask="1" data-width="80%">打赏</button>
</div>
<div id="pay-dialog">
<div class="dialog">
<div class="dialog-body text-center">
<strong>长按识别图片中的二维码进行打赏</strong>
<!--
作者：1979788761@qq.com
时间：2016-07-27
描述：记得将这里的二维码替换成自己的二维码图片
-->
<img src="../../images/pay_qrcode.png" class="img-responsive">
<strong>金额随意，多多益善！</strong>
</div>
<div class="dialog-foot">
<button class="button dialog-close button-block">取消</button>
</div>
</div>
</div>
]]>
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../css/pintuer.debug.css" rel="stylesheet" />
</head>
<body>
<!--HTML代码-->
<div class="wx-comments-list">
<div class="alert alert-yellow">
<p>
留言/评论列表需自行设计，因为需求不同字段不同，大火兔在这里就不提供相关代码，如一定需要请在博客里留言。
</p>
</div>
</div>
<div class="wx-comments">
<textarea class="input wx-comments-input" maxlength="120"></textarea>
<span class="wx-comments-num">120</span>/<span>120</span><button class="button bg-green fadein-left wx-comments-btn">点评一下</button>
</div>
</body>
<!--JS代码，直接引用pintuer.js即可，注意，分享按钮必须包含 wx-share-btn样式。-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../../js/pintuer.debug.js"></script>
<script>
//提交点评
$(".wx-comments-btn").click(function() {
//提交点评的逻辑需要根据自己的业务需求去写，大火兔在这里就不提供代码了
});
</script>
</html>
]]>
关注
其实关注的调用很简单，基本上都是a链接。比如：
1、点解直接加QQ群的链接(http://jq.qq.com/?_wv=1027&k=gfkOho) 这里的链接可用通过QQ群的设置->分享->复制加群链接获得。
2、点击直接关注公众号的链接(http://www.tpy10.net/create.php?id=微信公众号)
3、点击直接关注微博的链接(http://weibo.com/新浪微博ID)
只要调用这些链接便可以直接使用。
<![CDATA[
<a class="button button-block bg-green " href="QQ加群链接">点击直接加QQ群<span class="icon-hand-o-left "></a>
<br>
<a class="button button-block bg-blue " href="http://www.tpy10.net/create.php?id=微信公众号">点击直接关注公众号<span class="icon-hand-o-left "></a>
<br>
<a class="button button-block bg-yellow " href="http://weibo.com/新浪微博ID">点击直接关注微博<span class="icon-hand-o-left "></a>
<br>
]]>
综合示例
