10 月 23 - 25 日,QCon 上海站即将召开,现在购票,享9折优惠 了解详情
写点什么

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

  • 2016-02-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-02-29 02:496484
用户头像

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

关注

评论

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

架构实战营模块 2 作业

陌生流云

架构实战营

JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量

胖虎不秃头

前端 js 10月月更

如何以非root用户运行Docker容器

琦彦

Docker 10月月更 root用户

ESP32-C3 学习测试 蓝牙 篇(七、GATT 数据通信 — 发送自定义数据)

矜辰所致

蓝牙 ESP32-C3 10月月更

【C语言难点突破】指针和数组名的爱恨情仇

Geek_65222d

10月月更

《Rust for Rustaceans》读书笔记2

袁世超

rust

【愚公系列】2022年10月 Go教学课程 019-循环结构之for

愚公搬代码

10月月更

国庆perfetto学习

留白的艺术

JavaScript——数据类型

胖虎不秃头

前端 js 10月月更

基于BuildKit优化Dockerfile的构建

琦彦

Dockerfile 10月月更

Python应用之拉力赛求最短时间

芯动大师

10月月更 Python语法应用 函数构建

JVM——垃圾回收算法

琦彦

Java JVM 垃圾回收 10月月更

JavaScript——JS事件

胖虎不秃头

前端 js 10月月更

Docker层和虚悬镜像(dangling image)介绍

琦彦

Docker 10月月更

利用Vue自定义指令让你的开发变得更优雅

茶无味的一天

Vue 前端 vue指令

docker-maven-plugin:自动构建Docker镜像,并推送到Docker Registry或阿里云

琦彦

Docker maven 10月月更 docker-maven-plugin

Docker可视化工具Portainer的安装和使用

琦彦

Docker Portainer 10月月更 可视化管理工具

Python应用之寻求两个数对之间的最大乘积

芯动大师

Python语法 10月月更 split函数

2022-10-05:在一个 n x n 的整数矩阵 grid 中, 每一个方格的值 grid[i][j] 表示位置 (i, j) 的平台高度。 当开始下雨时,在时间为 t 时,水池中的水位为 t 。

福大大架构师每日一题

算法 rust 福大大

开发者有话说|以码为梦,心向远方,路在脚下

乌龟哥哥

个人成长 10月月更

作为Android Coder,你了解注解吗?

子不语Any

后端 java; 10月月更

vue快速入门---高速版

楠羽

笔记 VUE 3.0 源码 10月月更

构建Java镜像的10个最佳实践

琦彦

Java应用 Docker 镜像 10月月更

Python应用之丑数的判断

芯动大师

Python 10月月更 丑数

架构师的十八般武艺:领域建模

agnostic

领域建模

第九期 - 模块二

wuli洋

Qt|控件的事件过滤使用与总结

中国好公民st

c++ qt 10月月更

什么是光网络,几张图就可以很好的解释!

wljslmz

光纤 10月月更 光网络 通信网络

二分查找

掘金安东尼

算法 10月月更

2022 Kubernetes 批处理和HPC发展一览

琦彦

HPC 批处理 KubeCON 10月月更

陈宗绵|关于研发效能的理想与现实

laofo

DevOps cicd 研发效能 持续集成 持续交付

专访微信WeUI主程江剑锋:对微信Web App开发的建议_移动_徐川_InfoQ精选文章