UDN-企业互联网技术人气社区

板块导航

浏览  : 790
回复  : 2

[资源] 微信WeUI主程江剑锋:对微信Web App开发的几个建议

[复制链接]
杀马特的忧伤的头像 楼主
发表于 2016-4-5 13:14:55 | 显示全部楼层 |阅读模式
  来源:infoQ

  3月19日,第二届FEDay前端开发者大会将在广州举行,来自Facebook、腾讯、阿里巴巴等公司的一线工程师将向参会者分享React、Redux、微信WebApp、HTTP/2等话题。微信团队UI工程师,WeUI主程江剑锋将参加FEDay大会,分享《微信WebAPP开发最佳实践》。

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

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

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

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

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

  江剑锋:JS-SDK是微信WebAPP区别于一般WebApp的重要特点,除此之外,微信WebApp,可以通过网页授权,调用微信的用户体系。WebApp通常都需要对用户进行标识,记录用户的一些数据,普通的WebApp,需要开发者开发用户注册流程,用户得填写用户名、密码等信息才能完成注册。对于开发者而言,增加了开发量;对于用户而言,需要走注册流程,记忆多一个用户名和密码。

  而在微信内,只需要调用网页授权,用户无需输入用户名密码,就可以获取到用户的openid、昵称、头像,对用户进行标识了,对开发者和用户来说都很方便。因为微信网页授权必须在微信内完成,其他App或普通浏览器内就无法使用,开发者可能需要做兼容性判断。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  另外,美观的界面、流畅的操作,能够有效地提升用户体验。可以使用流行的开源UI库或者框架,这些库或者框架通常有专业的设计。对于开发者来说,可以快速构建出应用的界面,提升效率;对于用户而言,用起来也更加舒心。
发表于 2016-4-5 13:23:19 | 显示全部楼层
赞一个
使用道具 举报

回复

发表于 2017-8-30 10:34:43 | 显示全部楼层
重要的是用户体验要好
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部