wx

这个项目的名称叫 wx ，显而易见，这是 weixin 的缩写，虽然微信也叫 wechat ，但缩写成 wc 🚽 总觉得怪怪的。

Demo

目前文档还在完善，不过，你暂时可以按照这个非常直观的 demo 中的代码来实现想要的效果。

手机可以直接扫这个二维码。

Feature

• 模拟聊天记录界面
• 模拟通讯录界面
• 模拟功能界面
• 模拟设置界面
• 以上界面均能分组，参考通讯录的效果
• 可以使用图片或文字作为图标，包括FontAwesome之类的矢量字体图标
• 内置了一些色彩

快速入门

Getting Started

为什么要做这个项目

我已经做了一年多微信公众号相关的开发工作，其中大部分时间都是在做网页——嵌在微信浏览器中的手机网页。

一直以来，我都是用 bootstrap 来完成界面，简单好用，前后台通吃，我也熟悉它。但仍然会有客户提出来，这界面不够精致。bootstrap 的优点就是有很多现成的主题和模版，我开始向他们展示不同的风格和主题，但还是难以让所有人满意。 毕竟 bootstrap 是一个响应式框架，要适应各种大小的设备，有些地方还不得不为适应性而在美观上作出了妥协，结果显得有些中规中矩。

虽然我可以对 bootstrap 进行微调，使它在手机上表现得更为精致，但我却突然意识到了更深刻的问题所在，以及更巧妙的回避一些问题的方法。

我应该可以把界面做成某种形式，并让大家觉得界面就应该是这样的。 那就是把界面做成微信本身的样子。好的设计是看不见的设计，也是这个道理吧。

对于用户来说，把界面做成微信本身的样子，可以让他们觉得这是微信本身的功能，降低学习和适应的成本。

对于客户来说，让他们明白这不是我设计的，他们就不会再用个人的喜好来评价设计的好坏了。

而对于开发者来说，还要至少和 bootstrap 一样易于使用，甚至更易用。

怎么做

我所作的工作其实很简单，就是把微信的界面截下来，并将图标、文字、边距、颜色等数值一一测量出来，并识别出一些重复的模式，然后做成对应的样式表。这和根据设计稿做网站并没太大的区别，需要的只是一点点耐心。

方向

后续会继续加入更多界面和元素，比如下方的导航条、微信推送的图文消息、标准按钮等。

已有的界面也会进一步细化和强化，比如增加提示的小红点、照片缩略图等。

另外一个方向，就是结合 JavaScript 来进一步简化开发流程，比如结合 riot.js 把一些标准模块做成 tag 。

已知的问题

微信本身在 Android 和 iOS 下风格一致，但细节略有不同，目前，本项目是按照 Android 来制作的，Android 上的微信更简洁一些。

微信作为 Native App ，对细节的控制更好，可以直接控制物理像素，而我们的样式是受到浏览器限制的，最小只能控制到一个逻辑像素，比如分割线会比微信自身的粗一些，我们能做的就是适当削弱它的颜色，来减小视觉上的差异。

这个项目是专门为微信中的页面设计的，因此最终以 Android 和 iOS 版微信中的显示效果为准，其他浏览器的显示问题不在考虑范围之内。

License

The MIT License