从微信网页设计样式库看未来应用形态

WeUI

微信在 2016 年 1 月 20 号正式发布“微信网页设计样式库”（WeUI），向“微信应用号”又迈进一步。本文分为两部分，前半部分简明扼要提一下 WeUI 使用方法和第三方库；后半部分分析 WeUI 发布的目的，以及对不久的将来的三个预见。

微信网页设计样式库（WeUI）使用扼要

微信网页设计样式库的目的：

为帮助网页开发者实现与微信客户端一致的视觉体验，并降低设计和开发成本，微信团队推出了网页设计样式库：WeUI。

包含的内容：

该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素，并已在 GitHub 上开源。

点击查看：

DEMO 演示
开发者文档

简单的说，WeUI 的核心是一套样式表（weui.css），目的是规范微信 webapp （可以扩大一点说是网站）的 UI 组件设计，方便前端工程师快速开发，以此为即将到来的微信 webapp （应用号？）打基础。

使用方法只要三步：

根据文档说明，下载 WeUI 库。
在页面中引入 weui.min.css 文件。
从官方 demo 中拷贝需要的功能组件代码到自己页面即可。

对前端工程师来说应该没有难度，对前端工程师之外的人群只需要知道 WeUI 是干什么的就可以。

示意图较长，为不影响文字阅读放在文章末尾。:)

WeUI 扩展和第三方库

sketch uikit：ZTfer/weui-sketch
ui library：Eric-Guo/weui-rails(Using kevyu/weui-sass)
sass：kevyu/weui-sass
jquery：lihongxun945/jquery-weui
react：weui/react-weui
n7best/react-weui
vue：aidenzou/vue-weui
adcentury/vue-weui

未来 - 1：前端工程师的春天

微信应用号即将到来，开发应用号将会是一块大蛋糕，随之而来的是职场对前端工程师的需求增加，未来一段时间前端可能会变成更热门的职业。

为春天做准备：开发 webapp，学习后台知识。

随着移动端设备使用量逐渐上升，前端逐渐向移动端转移，从微信官方率先开发 react-weui 看，微信最看好的移动前端框架很可能是 react。前端工程师可以针对性地学习一些热门移动前端框架，如 react，ionic，bootstrap... 移动前端入门可以看以前写的一篇文章：移动前端基础

前端会后台已经逐渐变成硬需求，前年 BAT 前端的招聘需求还只是要求熟悉后台，去年的招聘面试就开始考查后台知识了。

未来 - 2：webapp 的春天

微信的最终目的应该是想打造一个 webapp 平台，估计许多家互联网公司也在竞争吧，webapp 平台最终的赢家是谁还很难说。

但是有一个点是可以肯定的：webapp 迎来了春天。想比起原生 app，webapp 的优势很早就被挖掘出来，但是由于接口、安全性、耗电、用户体验方面的缺陷，有人看好有人看坏。具体讨论看知乎。

个人的看法是一些涉及安全性的原生 app 将会被保留（如支付宝），大部分现有的原生 app 将会向 webapp 转移。因 webapp 占用空间远小于原生 app，将来的手机存储分级（16G, 64G, 128G...）可能失去意义。

未来 - 3：微信应用号应该快来了，但是不会完全按照微信的预期走

从最早的微信 JS-SDK 到后来张小龙说的“应用号”，再到刚发布的 WeUI，都能看到微信一统江湖的决心。但是事情可能不会这么顺利，Google 很早就开始开发 polymer，不仅想要搭建 web app 平台，还有将 web 做成系统的野心。

除了竞争对手之外，还有技术问题，一个比较简单的问题就很难解决：移动端浏览器提供了“安装到桌面”选项，这样安装的 webapp 可以直接从移动端桌面直接启动；而微信中的应用号需要多一个层级，先进入微信才能进入。当然啦，这么粗浅的问题微信 PM 肯定能考虑到，至于怎么绑定用户到微信应用号上，我们拭目以待吧。:)

转载请加原文链接及署名作者为Hongyang Wang。欢迎关注微信公众号 MRWHY，聊 WEB，聊 AI。