写点什么

专访微信 WeUI 主程江剑锋:对微信 Web App 开发的建议

2016 年 2 月 29 日

2016 年 3 月 19 日,第二届 FEDay 前端开发者大会将在广州举行,来自 Facebook、腾讯、阿里巴巴等公司的一线工程师将向参会者分享 React、Redux、微信 Web App、HTTP/2 等话题。

最近微信低调的发布了WeUI ,这是一套UI 组件库,可以帮助网页开发者实现与微信客户端一致的视觉体验,据悉,这套UI 组件库也在微信内部得到使用。

微信团队UI 工程师,WeUI 主程江剑锋也将参加FEDay 大会,分享《微信Web APP 开发最佳实践》。InfoQ 记者对他进行了采访,了解WeUI 的情况,以及微信内部是如何进行Web APP 开发的。

InfoQ:前段时间微信发布了 WeUI,请介绍一下这个组件库,以及它的开发历史?

江剑锋:WeUI 前身是我们在日常开发过程中,沉淀下来的基础组件库,在内部已经有广泛使用,例如微信安全中心、微信意见反馈、举报与投诉等微信内的 Web 应用。2015 年初,我们重新梳理这套基础组件库,包括设计、重构代码、测试、编写示例和文档,形成现在的 WeUI 。

InfoQ:微信为何要向外界发布 WeUI?

江剑锋:在 2015 年初,微信开放了 JS-SDK,开发者借助微信的帐号体系(网页授权)、JS-SDK 功能以及公众号提供的接口,就可以开发 出功能强大的 Web 应用。然而,不少微信第三方 Web 应用,功能齐全,但是界面体验却不佳,缺乏专业的交互 / 视觉设计。于是我们重新梳理之前沉淀的组件库,整理出一套与微信原生界面风格一致的基础组件,取名 WeUI ,于 2015 年 10 月在 github 正式开源。开发者可以使用这套 UI 库,快速构建出美观、易用的 Web 界面。

InfoQ:微信 Web App 和一般 Web App 有哪些不同?是否存在兼容性问题?

江剑锋:JS-SDK 是微信 Web APP 区别于一般 Web App 的重要特点,除此之外,微信 Web App ,可以通过网页授权,调用微信的用户体系。Web App 通常都需要对用户进行标识,记录用户的一些数据,普通的 Web App,需要开发者开发用户注册流程,用户得填写用户名、密码等信息才能完成注册。对于开发者而言,增加了开发量;对于用户而言,需要走注册流程,记忆多 一个用户名和密码。而在微信内,只需要调用网页授权,用户无需输入用户名密码,就可以获取到用户的 openid 、昵称、头像,对用户进行标识了,对开发者和用户来说都很方便。因为微信网页授权必须在微信内完成,其他 App 或普通浏览器内就无法使用,开发者可能需要做兼容性判断。

一般的 Web App,需要兼容不同的浏览器,而微信 Android 客户端嵌入了 QQ 浏览器团队开发的 X5 内核,消除了各个 Android 版本内置 webview 之间兼容性的差异,开发者在 Android 下只需要考虑 X5 即可。

InfoQ:微信内部有哪些应用是使用 Web APP 形式开发的?

江剑锋:目前微信里面典型的 Web App 有“微信网络搜索”、“表情搜索”、“微粒贷”、“理财通”、“微信意见反馈”等。

以微粒贷为例,该应用功能比较多,每个功能有多个步骤,程序需要记录这些步骤的状态,如果采用 Web Page 的形态,每个步骤都要重新加载页面,除了用户体验差,还给记录步骤的状态增加了开发难度。由于这个功能没有 SEO 的需求,不需要搜索引擎索引,所以采用 Web App 的形式进行开发。

InfoQ:能否介绍一下你们开发微信 Web App 使用的工具以及工作流?

江剑锋:主要使用 webpack 来做依赖管理和代码打包,用 gulp 来做模拟数据注入和本地 demo 服务启动相关的东西。目前的工作流程是使用模拟数据和模拟微信 JSAPI 在本地开发,然后再更新到测试环境的。这样的工作流程使前端开发可以脱离实际的环境限制来完成大部分工作。

InfoQ:能否介绍一下你们对于微信 Web App 有哪些质量标准?

江剑锋:质量一般可以从几个方面来衡量,功能完整性、兼容性、安全性、用户友好。

功能完整性,这个是最基础的,方案中设计到的功能,需要实现。这个开发自测、测试人员都可以测出来。

兼容性,指的是不同平台 / 系统版本 / 微信客户端版本 / 设备屏幕尺寸的适配能力,保证兼容到主流设备。平台、系统版本、设配屏幕尺寸都比较好理 解,就是要保证这些条件表现良好,或者平滑退化。而不同的微信客户端版本是指,如果 Web App 调用的 JSAPI,只在较新的微信版本才支持,那么当用户使用较低版本微信时,需要给出友好的提示。

安全性,除了开发自测外,需要经过测试人员、安全人员的检测。检测范围通常包括,方案本身是否存在逻辑漏洞、常见的 Web 漏洞如 XSS 等、压力测试、接口调用频率限制等。

至于用户友好,我们会从产品、交互、视觉、技术多方面来衡量。用户打开页面是否够快,看到的界面是否美观、大方得体,操作起来是否简单、流畅等,都是衡量的因素。

InfoQ:从您的经验出发,目前移动 Web 主要的坑有哪些?

江剑锋:从开发者的角度来看,移动端 Web 开发抱怨比较多的是来自 Android 平台不同版本差异。有些功能 / 样式,在 iOS 或者新版本的 Android 手机表现正常,但是到了某些 Android 手机,就出现奇怪的 bug ,这些很难提前应对,得靠经验总结。

此外,Android 流畅程度普遍比 iOS 的低,在 iOS 下表现良好的动画效果,在 Android 下可能就会出现卡顿的情况,这种情况下除了对代码进行优化之外,可能需要做些妥协,减少动画效果。

InfoQ:您对微信 Web App 开发者有什么建议?

江剑锋:我的建议是,Web App 开发需要注重用户体验,开发者可以从下面几个方面来提升。

首先是传输性能。因为是移动端的缘故,网速是一个不可忽视的问题,页面加载时间过长,用户体验就显著下降。在弱网络环境下,页面加载时间不宜超过 3 秒。可以通过对静态文件进行压缩(尤其是图片)、合并、设置缓存、使用流行的 CDN 服务等,来加快页面加载速度。

另外,美观的界面、流畅的操作,能够有效地提升用户体验。可以使用流行的开源 UI 库或者框架,这些库或者框架通常有专业的设计。对于开发者来说,可以快速构建出应用的界面,提升效率;对于用户而言,用起来也更加舒心。

2016 年 2 月 29 日 02:495618
用户头像

发布了 164 篇内容, 共 93.3 次阅读, 收获喜欢 381 次。

关注

评论

发布
暂无评论
发现更多内容

你的登录接口真的安全吗?快看看你有没有中招!

xcbeyond

安全性 8月日更

ElasticSearch 亿级数据检索深度优化

王知无

数据同步系统重构实践

Qunar技术沙龙

数据库 ES canal 数据同步 Kafk

Linux云计算-使用 MyCat 实现 MySQL 主从读写分离

学神来啦

MySQL 数据库 Linux 运维

如何在FL Studio中对整首歌曲音量进行调整

懒得勤快

超级人脉:让巴菲特老爷子告诉你圈子的重要性

非著名程序员

人脉 认知提升 思维 8月日更

学习笔记: JPA与Hibernate

yhrivory

数据库 hibernate jpa ORM spring data

【Spring MVC 新手指北】1、Spring MVC 简介及入门实

村雨遥

Java Spring MVC 8月日更

MySQL 字段NOT NULL

一个大红包

8月日更

架构实战营 1 期 - 模块五作业

李东旭

#架构实战营

极光开发者周刊【No.0813】

极光开发者

QDS07 Mysql 安装指定版本

耳东@Erdong

MySQL 8月日更 qds

你的日志打印对了么?

神策技术社区

数据分析 日志

事事请示是不靠谱的表现

boshi

团队管理

数据上报方式是否存在最优解?

神策技术社区

编程 数据

运用上游思维的七个思路

石云升

读书笔记 8月日更 上游思维

交易所市值管理机器人开发

橙子区块链l53o56oloo3

去中心化交易所系统开发 市值管理机器人系统开发 做市机器人 去中心化市值管理机器人

从小白程序员到大厂高级技术专家我看过哪些书籍?

冰河

学习 程序员 面试 程序人生

JAVA对于文件IO操作的支持

卢卡多多

Java 文件 io 8月日更

云原生-工作流引擎Zeebe

QiyihaoLabs

云原生 k8s cncf BPM zeebe

区块链交易所搭建,币币交易系统搭建

13823153121

深耕基础软件,华为开源加速“新全球化

科技热闻

【音视频】弱网下实时视频的极限通信

声网Agora

音视频 视频处理 视频压缩

DAPP智能合约搭建|DAPP波场智能合约开发

量化系统19942438797

智能合约 dapp

Python代码阅读(第10篇):随机打乱列表元素

Felix

Python 编程 Code Programing 阅读代码

一个小而美的 Swift 框架:Then

fuyoufang

swift iOS Developer 8月日更

漏洞挖掘的快乐你想象不到

网络安全学海

黑客 网络安全 信息安全 渗透测试 漏洞挖掘

一群人的战斗

神策技术社区

编程 代码

vue入门:简单指令介绍

小黄鸡1992

8月日更

手势事件采集究竟有多难?

神策技术社区

ios 手势

智能时代的信任口诀:让计算远离算计

脑极体

专访微信WeUI主程江剑锋:对微信Web App开发的建议-InfoQ