# wx

**Repository Path**: wcg_fly/wx

## Basic Information

- **Project Name**: wx
- **Description**: 为微信公众号打造的样式表，用于公众号内嵌的网页，采用微信原生的设计风格。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 123
- **Created**: 2015-04-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

## Demo
目前文档还在完善，不过，你暂时可以按照这个非常直观的
[demo](http://wxcss.oschina.mopaas.com/demo.html)
中的代码来实现想要的效果。

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

![demo](https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://wxcss.oschina.mopaas.com/demo.html)

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

## 快速入门
[Getting Started](http://git.oschina.net/xiongliding/wx/wikis/Getting-Started)

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

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

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

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

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

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

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

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

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

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

另外一个方向，就是结合 JavaScript 来进一步简化开发流程，比如结合 [riot.js](https://muut.com/riotjs/) 把一些标准模块做成 tag 。

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

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

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

## License
[The MIT License](/xiongliding/wx/blob/master/LICENSE)