Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

wx

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

Demo

目前文档还在完善,不过,你暂时可以按照这个非常直观的 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

Comments ( 0 )

Sign in for post a comment

About

为微信公众号打造的样式表,用于公众号内嵌的网页,采用微信原生的设计风格。 spread retract
MIT
Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more