Weex在内涵发现页中的工程实践

   <p>鉴于Weex在性能方面做过一些针对性的优化并且已在阿里的业务线上得到了规模性的应用，我们决定在内涵段子这个具备800万日活的产品中尝试应用Weex。这样做的主要目的是为了深化对Weex的认识，与React Native进行对比分析，确立IES客户端跨平台方案的下一步研究方向。</p>    <h2>一、工程实践</h2>    <h2>1.1 准备工作</h2>    <ul>     <li>开发环境搭建： <a href="/misc/goto?guid=4959751694037396243" rel="nofollow,noindex">https://weex.incubator.apache.org/cn/guide/set-up-env.html</a></li>     <li>集成Weex SDK到已有应用： <a href="/misc/goto?guid=4959751694128854665" rel="nofollow,noindex">https://weex.incubator.apache.org/cn/guide/integrate-to-your-app.html</a></li>     <li>下载Weex Playground APP： <a href="/misc/goto?guid=4959751694219495836" rel="nofollow,noindex">https://weex.apache.org/cn/playground.html</a> Weex Playground APP集成了Weex SDK，它内置了用于展示Weex组件功能的Demo。通过它的扫码功能，还可以加载自己本地Server的Weex代码进行调试（前提是手机和电脑在同一个局域网内）。</li>    </ul>    <h2>1.2 调试</h2>    <h3>1.2.1 调试环境</h3>    <p>在Weex项目中，调试代码的环境有三种：浏览器、Weex Playground APP、自己的应用内。</p>    <p>因为Weex的代码可以同时兼容浏览器、iOS和安卓三种运行环境，因此可以在浏览器环境中调试Weex项目代码。在Weex工程中运行npm run dev和npm run serve命令并在浏览器中访问 <a href="/misc/goto?guid=4958965640789895086" rel="nofollow,noindex">http://localhost:8080</a> 即可预览Weex项目效果，如下图所示。但是就目前的状况来讲，Weex对三端的兼容性支持还不是很完善，在浏览器中调试好的代码再放到客户端环境中运行还是有极大的可能会出问题，因此如果最终目标只是想在客户端中运行Weex代码，并不建议通过浏览器来调试。</p>    <p><img src="https://simg.open-open.com/show/488536b669118bec4c58a3677968ff92.png"></p>    <p>Weex Playground APP集成了Weex SDK，可以通过它的扫码功能来调试自己的Weex项目代码。项目开始时，如果客户端Weex集成工作还没完成且调试环境还没有准备好，可以使用Weex Playground APP来辅助调试，因为此时项目的主要工作还是编写界面，并不需要客户端扩展功能模块的支持。</p>    <p>项目界面开发完成后，后面阶段的调试工作就需要在自己的应用内进行了，因为此时一般需要客户端扩展的功能模块或组件的支持。例如，获取网络请求通用参数、打点、接收客户端事件消息等。应用内集成了Weex SDK后，在需要调试Weex代码的页面，建议客户端在DEBUG模式下提供刷新页面按钮以方便调试。</p>    <h3>1.2.2 DEBUG</h3>    <p>在React Native的开发中，可以通过点击开发者菜单中的“Debug JS Remotely”选项来开启JS代码的远程调试。然而在Weex的开发中，开启JS代码远程调试功能的步骤要麻烦一些，需要在应用内集成Weex DevTools工具。由于Weex Playground APP已经集成了Weex DevTools工具，可以使用Weex Playground APP来试验一下如何使用weex-toolkit里面提供的调试工具。</p>    <p>首先，在命令行中运行weex debug命令，该命令会启动一个调试服务器，并同时唤起Chrome浏览器打开调试主页，如下图所示。</p>    <p><img src="https://simg.open-open.com/show/bcd97e7f2752826fdaa04d8d66c354ce.png"></p>    <p>然后，打开Weex Playground APP扫描调试主页下方的二维码，即可在应用与调试服务器之间建立socket连接并向调试服务器注册应用信息，如下图所示。</p>    <p><img src="https://simg.open-open.com/show/0c538772129e3e616e8c69eb98bf158f.png"></p>    <p>此时，点击上图中的Debugger按钮可以开启JavaScript代码的远程调试功能，在ChromeDevTools里面对Weex工程的JavaScript代码进行调试；点击Inspector按钮可以查看Weex页面的element属性结构。</p>    <p>如果想使用weex-toolkit提供的调试工具对自己应用内的Weex页面进行调试，必须先在应用内集成Weex DevTools。具体集成方法请参考：集成 DevTools 到 iOS和集成 DevTools 到 Android。</p>    <h2>1.3 开发</h2>    <p>此次Weex应用于内涵的发现页，发现页的UI如下面三张图所示。发现页有以下特征：</p>    <ul>     <li>由热吧和订阅两个列表页组成，通过顶TAB进行切换；</li>     <li>热吧和订阅数据一次性加载完毕，无loadmore逻辑，热吧数据大概在200~300条；</li>     <li>用户可切换主题：白天模式和夜间模式。</li>    </ul>    <p><img src="https://simg.open-open.com/show/3446f4026c3b687a2141a6b1d6d862ec.png"> <img src="https://simg.open-open.com/show/06e4445067383f213ffbef7162afc736.png"> <img src="https://simg.open-open.com/show/2550511ba5d08de4d71807e84a3122a5.png"></p>    <h3>1.3.1 组件划分及布局</h3>    <p>发现页的页面组成元素比较简单，组件分为轮播图组件、热吧Cell组件以及订阅吧Cell组件。</p>    <p>发现页的文档结构大致如下：</p>    <pre>  <code class="language-html"><div>        <!-- 头部 -->      <div class="header"></div>         <!-- 热吧列表 -->      <list class="hot-bar-list"></list>         <!-- 订阅吧列表 -->      <list class="subscribed-bar-list"></list>   </div>  </code></pre>    <p>其中值得一提的是实现TAB切换的方式。一般来讲，很容易想到使用vue的条件渲染来实现TAB的切换，如下：</p>    <pre>  <code class="language-html"><div>        <!-- 头部 -->      <div class="header"></div>         <!-- 热吧列表 -->      <list class="hot-bar-list" v-if="activTab === 'HOT'"></list>         <!-- 订阅吧列表 -->      <list class="subscribed-bar-list" v-if="activTab === 'SUBSCRIBED'"></list>  </div>  </code></pre>    <p>但是这样做会造成TAB切换时列表渲染卡顿，因为热吧列表有200~300条数据，每次切换都重新渲染一次会造成较大的性能消耗。因此，在实现的时候对list采用了绝对定位的布局方式，在TAB切换的时候，将已经渲染好的列表结构在DOM树中保留，只改变列表节点的visibility属性。如下：</p>    <pre>  <code class="language-html"><div>        <!-- 头部 -->      <div class="header"></div>         <!-- 热吧列表 -->      <list :style="{visibility: activeTab === 'HOT' ? 'visible' : 'hidden'}" class="hot-bar-list"></list>         <!-- 订阅吧列表 -->      <list :style="{visibility: activeTab === 'SUBSCRIBED' ? 'visible' : 'hidden'}" class="subscribed-bar-list"></list>  </div>  </code></pre>    <h3>1.3.2 客户端支持</h3>    <p>(1) 客户端模块</p>    <p><img src="https://simg.open-open.com/show/4c808f9fd4f9db57c4d3855c259b23a1.png"> <strong>(2) 客户端事件</strong></p>    <p><img src="https://simg.open-open.com/show/81a0bff04c15f54813ac484dbe4fb739.png"></p>    <h3>1.3.3 Weex使用问题总结</h3>    <ul>     <li>如何处理本地图片资源？ Weex image组件不支持本地图片，然而在项目开发过程中经常需要引入一些本地图标文件，例如:</li>    </ul>    <pre>  <code class="language-html"><image class="icon-map" :src="require('../assets/map.png')"/>  </code></pre>    <p>此时，可以在webpack配置文件里面配置url-loader，将图片资源输出到构建目录。然后，通过output.publicPath配置项来配置资源的访问路径，在DEBUG模式下，将output.publicPath配置为本机server地址，在Production模式下，将output.publicPath配置为线上域名。由于图标文件一般比较小，为了避免在无网络状态下渲染Weex页面拉取不到线上图标资源的情况，项目中将图标文件直接用Base64编码。url-loader的配置如下所示：</p>    <pre>  <code class="language-html">{     test: /\.(png|jpg)$/,     loader: 'url?limit=102400'  }  </code></pre>    <ul>     <li>关于适配 Weex代码中的高度和宽度的单位均为px，但是所设置的宽高并不是实际呈现出来的宽高，Weex框架在底层做了针对不同屏幕的适配工作，具体计算公式为 实际高宽 = 代码高宽 * (屏幕宽度 / 750)。所以，在编写界面的时候，最好以宽度为750的设计稿最为标准，否则需要根据计算公式对设计稿上标明的宽高做转换。当需要设置元素的绝对宽高时，需要自行计算。计算时，需要获取以下参数：</li>    </ul>    <pre>  <code class="language-html">const screenWidth = this.$getConfig().env.deviceWidth; // 屏幕宽度  const scale = this.$getConfig().env.scale; // 屏幕倍率  </code></pre>    <ul>     <li>cell组件的appear事件和disappear事件在安卓端引发的性能问题 在热吧列表，有一个打点需求，就是统计每一个吧Cell的展示时间。为了实现这个打点需求，对每一个吧Cell都监听了appear事件和disappear事件。通过测试发现，当监听了吧Cell的appear事件和disappear事件时，安卓端列表滚动不流畅，会出现明显的卡顿现象。</li>     <li>slider组件的点击事件在安卓端不触发 由于Weex提供的slider组件无法满足使用要求，所以基于slider重新封装了一个轮播图组件，结构如下：</li>    </ul>    <pre>  <code class="language-html"><div class="carousel">        <!-- 轮播图 -->        <slider class="slider" auto-play="true">          <div class="item" v-for="item in items" @click="click">            <image class="cover" resize="cover" :src="item.cover"></image>          </div>        </slider>           <!-- 标题和轮播图位置指示标志 -->        <div class="banner">               <text class="title"></text>          <div class="indicators">            <div :class="['indicator', current === i - 1 && 'selected-indicator']" v-for="i in items.length"></div>          </div>        </div>      </div>  </code></pre>    <p>轮播图组件需要监听点击事件，当在slider组件或slider组件的父组件div上监听点击事件时，在安卓端点击轮播图并不触发点击事件。因此，需要在slider组件的子组件上监听点击事件。 在没有设置loadmoreoffset时，list组件的loadmore事件在安卓端不触发 虽然发现页没有loadmore逻辑，但是在使用weex的过程中对list组件进行了性能测试，使用到了list组件的loadmore功能，因此发现了list组件的loadmore事件在默认情况下不触发的问题。只有显示设置了loadmoreoffset且loadmoreoffset的值大于0时，list组件的loadmore事件才会触发。</p>    <ul>     <li>cell组件的scope属性 使list组件的时候，建议为同种类的cell设置相同的scope属性。Weex内部会缓冲cell，每种类型的cell最多缓冲9个。如果不设置cell的scope属性，weex会认为所有的cell的类型都不一样，会缓冲所有的cell，导致内存占用大。</li>    </ul>    <h3>1.3.4 Weex实现效果</h3>    <p>Weex实现的页面操作体验基本上接近原声应用，列表滚动、TAB切换、页面跳转等都十分流畅。效果如下图所示： <img src="https://simg.open-open.com/show/bf0c00f5b8133a4243ab2a7d56ed9730.gif"></p>    <h2>二、实践总结</h2>    <p>Weex可以选择使用Vue作为开发框架，开发与调试体验都比较好，接近Web开发体验，但是使用上仍然存在一些问题，例如：</p>    <ul>     <li>CSS支持不够完善，有些地方CSS样式的在客户端中的表现与WEB中的不太一致，甚至iOS和安卓端都会存在样式表现的不一致。而且CSS不支持继承，定义CSS样式的时候无法引入变量，这样在实现一些效果的时候十分不方便，例如白天模式和夜间模式；</li>     <li>文档资料不够完善；</li>     <li>某些内建组件存在使用上的BUG，例如slider组件在安卓手机上无法监听click事件、list组件在没有设置loadmoreoffset的情况下在安卓手机上不触发loadmore事件；</li>    </ul>    <p>当然，这些使用上的问题都可以解决或通过一定办法去规避。Weex更值得我们关注的问题可能还是list组件的性能问题。在React Native的实践中，我们深受长列表性能问题的困扰，而Weex号称是一套可以构建高性能原声应用的跨平台方案，它在长列表的性能表现上如何呢？我们对此进行了测试和评估，发现Weex在长列表的性能表现上也并不乐观。在列表长度不断增长的时候，Weex的内存占用也是不断增长的，在安卓和iOS上皆是如此。在iOS上，列表在不断向下滚动的过程中，CPU使用率的表现也十分堪忧。以下两张图分别是在列表cell定高和变高下的测试结果【详细测试结果请前往：RN & Weex ListView性能对比评估】：</p>    <p><img src="https://simg.open-open.com/show/737ea94d86a5de4f8b02f4e46ca35385.png"></p>    <p><img src="https://simg.open-open.com/show/907fec05679fd8bb45334599f5d6bb69.png"></p>    <p>因此，Weex目前可能更适用于非长列表的场景。由于其体验接近原生应用，比H5要好，可以用于替换端内的一些H5页面或一些需要频繁变动的客户端页面。在这些方面Weex是否可规模投入使用尚待验证，此次在内涵发现页的使用正好可以观察其稳定性。</p>    <p> </p>    <p>来自：http://web.jobbole.com/92270/</p>    <p> </p>