写点什么

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

  • 2016 年 2 月 29 日
  • 本文字数:2352 字

    阅读完需:约 8 分钟

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:495646
用户头像

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

关注

评论

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

Android 开发,你遇上 Emoji 头疼吗?

android 程序员 移动开发

Android 抖音爆红的口红挑战爬坑总结

android 程序员 移动开发

Android 拍照:如何使用已有相机应用捕获图片(Taking Photos Simply)

android 程序员 移动开发

Android 横向ListView实现

android 程序员 移动开发

Android 自定义软键盘实现 数字九宫格

android 程序员 移动开发

Android 这座山,我一定要爬到顶

android 程序员 移动开发

Android 面试必备 - 系统、App、Activity 启动过程

android 程序员 移动开发

Android 开发艺术探索笔记(21)

android 程序员 移动开发

Android----Matrix-与坐标变换

android 程序员 移动开发

Android-ContentProvider实例详解(1)

android 程序员 移动开发

Android 序列化(Serializable和Parcelable)

android 程序员 移动开发

基于 KubeVela 的 GitOps 交付

阿里巴巴云原生

阿里云 Kubernetes 云原生 gitops KubeVela

Android 教你一步步搭建MVP+Retrofit+RxJava网络请求框架

android 程序员 移动开发

Android 开发规范(完结版)

android 程序员 移动开发

android 方式实现imageview圆角

android 程序员 移动开发

Android 自定义软键盘实现 数字九宫格(1)

android 程序员 移动开发

Android-kotlin的继承

android 程序员 移动开发

Android 开发中,与屏幕有关的三个小众知识

android 程序员 移动开发

Android 开发面试中,面试过最喜欢问那些问题?

android 程序员 移动开发

Android 获取设备信息

android 程序员 移动开发

Android 调用相机拍照,适配到Android 10

android 程序员 移动开发

Android 集成讯飞SDK实现语音拨号、语音导航、语音启动应用

android 程序员 移动开发

加速SaaS规模化演进,餐道基于K8s的云上创新底座

阿里巴巴云原生

阿里云 Kubernetes 云原生 SaaS 智慧餐饮

Android 开发者想咸鱼翻身并不是难事,只要你掌握这些……

android 程序员 移动开发

Android-Handler机制详解

android 程序员 移动开发

Android 性能优化:手把手带你全面了解内存泄露

android 程序员 移动开发

Android 设置默认Launcher

android 程序员 移动开发

Android 性能监控系列一(原理篇)

android 程序员 移动开发

Android 程序员不得不收藏的 90+ 个人博客(持续更新

android 程序员 移动开发

Android-R-中的heap新分配器——Scudo

android 程序员 移动开发

Android 开发艺术探索笔记(1)

android 程序员 移动开发

基于英特尔x86平台构建AI软件生态系统

基于英特尔x86平台构建AI软件生态系统

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