微信WeUI主程江剑锋：对微信Web App开发的几个建议

xman

3月19日，第二届FEDay前端开发者大会将在广州举行，来自Facebook、腾讯、阿里巴巴等公司的一线工程师将向参会者分享React、Redux、微信Web App、HTTP/2等话题。微信团队UI工程师，WeUI主程江剑锋将参加FEDay大会，分享《微信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 库或者框架，这些库或者框架通常有专业的设计。对于开发者来说，可以快速构建出应用的界面，提升效率；对于用户而言，用起来也更加舒心。