Weex实战分享|Weex在盛大游戏中的应用实践

大家好!

我来自盛大游戏游麦团队前端负责人-李永亮,很荣幸这次被选中,与大家分享下weex在我们实践中遇到的问题。

今天我的议题从五个大方面来说,从技术选型选定Weex,到在产品中小试牛刀,再到后来大规模的页面实践,再着遇到性能上的问题怎么去优化,最后是踩坑填坑的历程。

Weex实战分享|Weex在盛大游戏中的应用实践

一、技术选型

我们为什么要选Weex方案呢?其实在2017年年初的时候,我们CTO期许各技术团队要高效开发、节省成本,产品快速迭代。所以在这种倡导下,各团队开始研究RN、Weex。

Weex实战分享|Weex在盛大游戏中的应用实践

我们游麦团队为什么选择了Weex呢?

(一)首先是高效交付

1、它支持三端(iOS/Android/H5);

2、运用了Web的技术,像CSS、JS等,我们团队中主要的前端框架是Vue;

3、Vue用起来非常简单,如果Android或者iOS同学想学习Weex的技术,也是十分容易的;

4、我们是在现有App中接入Weex页面的,有新的产品页面开发,还有原有Native页面转化成Weex的过程。很多原生功能做得非常好,我们是希望充分利用原生的能力,Weex的可扩展性,正好能够在这上面发挥作用。

(二)它的性能上来说非常优异的,Weex最终打包的bundle文件体积非常小,不像RN那样依赖过多冗余代码;它的渲染速度也快;Weex对资源利用还是做了很多努力,这方面确实值得信赖。

我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。

(三)除了阿里集团内部在使用这些产品,下面这些数据,阿里的同学统计了一些数据,加上我在知乎上搜集了一些信息,得到了这些数据。

Weex实战分享|Weex在盛大游戏中的应用实践

二、小试牛刀

我们公司有两个团队在同时尝试接入Weex。信息化团队在做公司内部App的食客在线频道页,这个weex页可以直观看到内部食堂的就餐情况,它是通过原生控制来横屏展现的。

右边是游麦电商平台的系统消息页,是一个典型的列表页。大家会看到,最开始是从原生页面跳到此列表,点击列表项就跳转到原生页。

Weex实战分享|Weex在盛大游戏中的应用实践

在这两个接入页面中遇到一些问题,和大家分享一下。

Weex实战分享|Weex在盛大游戏中的应用实践

(一)最开始用的Weex版本是0.7.0,我们在两部手机上,小米5和三星中,不同的SDK版本下页面会有不同的展现。红色的区域是有问题的。我们发现在SDK0.10.0这个版本上,list是没有问题的。所以有可能的话,尽量升级为高版本的SDK。我们目前升级到的是0.12.0,比较稳定(不过建议大家再往更高版本升级)。

(二)那个列表页需要带有用户登录态,Weex虽然不支持Cookie,但是可以借用原生的Cookie能力,调用原生的Cookie做到用户登录态的介入。还有一种方案,我们还有团队采用在接口中传递Ticket票据获取用户登录态的方式这是原生中封装一个自定义module方法,每个请求带上Cookie也可以Native拦截接口请求并添加Cookie信息

原文链接