微信小程序、非死book-RN、阿里-Weex 三者分析比较

   <p style="text-align:center"><img src="https://simg.open-open.com/show/d44d210b47e518120e169f231ca97056.png"></p>    <p>开文简介，本人是一名 iOS 开发者，对于前端方面的知识掌握的并不是很全面，所以接下来有些理解不到位的地方还望指出。</p>    <p>由于这两年移动开发的热潮有点冷淡，加上前端行业的火爆，所以从今年四月份开始看了一个月的 HTML+CSS+JS ，简单的做了一两个网页，接着学习了一个月的 ReactNative，紧接着阿里 Weex 公测，就接着这个节奏研究了一段时间的 Weex，再就是最近的微信小程序，相比而言小程序简单很多，花了几天就明白了。</p>    <h3>基本简介</h3>    <p><a href="/misc/goto?guid=4958872159930900776" rel="nofollow,noindex">ReactNative</a> :  (简称RN) 是 非死book 于2015年四月开源的跨平台移动应用开发框架，是非死book早先开源的 Web UI 框架 <a href="/misc/goto?guid=4958968605084997344" rel="nofollow,noindex">React</a> 在原生移动应用平台的衍生产物，目前支持 iOS 和安卓两大平台。该框架使用 Javascript，类似于 HTML 的 JSX，以及 CSS 来开发移动应用 UI，因此熟悉 Web 开发的人只需很少的学习成本就可以转入移动应用开发。官方给出的介绍里用了一句 “Learn Once ,Write Anywhere”  还是非常贴切的，RN 并做不到一份代码很好的适配 iOS 和安卓的所有机型和系统，需要你根据具体情况去做适配。</p>    <p><a href="/misc/goto?guid=4959746258595073947" rel="nofollow,noindex">Weex</a> : Weex 是阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的 UI 框架，基于 <a href="/misc/goto?guid=4959746258676864249" rel="nofollow,noindex">vue.js</a> ，特点是轻量级，性能很高，官方给出的口号是 “Write Once Run Everywhere”，听起来比 RN 要屌很多哈。</p>    <p><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl&token=&lang=zh_CNl" rel="nofollow,noindex">小程序</a> : 微信小程序是混合式的移动应用，开发者在自己的微信中通过小程序的开发者工具，撰写出Native 级别的界面，通过开发者工具生成压缩包，提交到微信公众平台，然后在微信 app 中请求执行，便可实现原生Native 的界面体验。微信之父张小龙在他的朋友圈里写道微信小程序是不需要下载安装的应用，实现‘触手可及’，‘用完即走’的理念。这也是小程序最大的特点。</p>    <h3>三者之间比较</h3>    <p>文件类型</p>    <p><img src="https://simg.open-open.com/show/70a62d18bf541e51ec301e89008d7a35.png"></p>    <p>微信小程序</p>    <ul>     <li> <p>app.js 里面包含了程序的生命周期函数以及全局的数据</p> </li>     <li> <p>app.json 初始化了所有的页面（“pages 数组中的第一个页面就是小程序启动完成后显示的页面”）以及其他一些全局的基础配置。</p> </li>     <li> <p>app.wxss 类似于 css，并且 app.wxss 类似于基类，所有其他页面的 .wxml 文件都可以使用 app.wxss 里面定义好的 UI 配置</p> </li>     <li> <p>index.js 具体子页面的 js ，负责提供数据和逻辑控制</p> </li>     <li> <p>index.json 可以重写 app.json 里配置好的属性，如导航栏标题和颜色</p> </li>     <li> <p>index.wxml 具体子页面里的组件</p> </li>     <li> <p>index.wxss 具体子页面的 UI 布局，可以自己配置，也可以用 app.wxss 里的配置</p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/e7d3d5e10d1e70c81d7c694a53ee8252.png"></p>    <p>ReactNative</p>    <ul>     <li> <p>package.json 里面主要是当前版本配置信息</p> </li>     <li> <p>index.ios.js iOS App 的入口，在这里注册需要返回的组件</p> </li>     <li> <p>xxx.js RN 的一个页面只需要一个 js 文件就够了，请求数据，渲染组件，以及组件的 style 配置都在这个 js  文件里。</p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/500a85d43900bff3d43b09a88f54afa8.png"></p>    <p>Weex</p>    <ul>     <li> <p>和 RN 差不多，一个 .we 文件就可以完整的配置好一个页面了</p> </li>    </ul>    <p>编码风格</p>    <pre>  <code class="language-javascript"><template>    <div>      <list class="list">        <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{rows}}" index="{{$index}}">          <div class="item">            <text class="item-title">row {{id}}</text>          </div>        </cell>      </list>    </div>  </template>    <style>    .list {      height:850px    }    .item {      justify-content: center;      border-bottom-width: 2px;      border-bottom-color: #c0c0c0;      height: 100px;      padding:20px;    }  </style>    <script>    require('weex-components');    module.exports = {      methods: {        onappear: function (e) {          var appearId = this.rows[e.target.attr.index].id;          nativeLog('+++++', appearId);          var appearIds = this.appearIds;          appearIds.push(appearId);          this.getMinAndMaxIds(appearIds);        },      }      data: {        appearMin:1,        appearMax:1,        appearIds:[],        rows:[          {id: 1},          {id: 2},        ]      }    }  </script></code></pre>    <p>Weex</p>    <ul>     <li> <p>template 代表 html, style 代表 css，script 代表 js</p> </li>     <li> <p>命名方式采用串羊肉法(“border-bottom-width”)</p> </li>     <li> <p>template里面的组件通过 class 的字符串数值来连接 style 里的布局设置</p> </li>     <li> <p>绑定方法采用 ondisappear="ondisappear" 这种直接对应字符串的方法</p> </li>     <li> <p>flexbox 布局</p> </li>    </ul>    <pre>  <code class="language-javascript">import React, { Component } from 'react';  import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity  } from 'react-native';  var HomeDetail = React.createClass({      render() {          return (              <View style={styles.container}>                  <TouchableOpacity onPress={()=>{this.popTopHome()}}>                      <Text style={styles.welcome}>                          测试跳转                        </Text>                  </TouchableOpacity>              </View>        );      },      popTopHome(){           this.props.navigator.pop();      }    }  );    const styles = StyleSheet.create({      container: {         flex: 1,         justifyContent: 'center',          alignItems: 'center',        backgroundColor: 'red',      },      welcome: {          fontSize: 20,           textAlign: 'center',          margin: 10,      }}  );  // 输出组件类module.exports = HomeDetail;</code></pre>    <p>ReactNative</p>    <ul>     <li> <p>HomeDetail 这个类里面 render 方法负责渲染组件，style 属性对应着组件的 UI 配置，请求数据等方法也写在 React.createClass 注册类方法里面，请求完成数据之后直接重新 set 数据，组件会自动重写渲染</p> </li>     <li> <p>命名方式采用驼峰法(“ justifyContent”)</p> </li>     <li> <p>绑定方法采用 onPress={()=>{this.popTopHome()}} ，{}表示一个函数，相对而言更加面向对象一些</p> </li>     <li> <p>flexbox 布局</p> </li>    </ul>    <pre>  <code class="language-javascript"><view class="page">      <view class="page__hd">          <text class="page__title">switch</text>          <text class="page__desc">开关</text>      </view>      <view class="page__bd">          <view class="section section_gap">              <view class="body-view">                  <switch checked="{{switch1Checked}}" bindchange="switch1Change"/>              </view>          </view>      </view>  </view></code></pre>    <p>微信小程序</p>    <ul>     <li> <p>{{switch1Checked}} 获取 js 里面对应的switch1Checked数据</p> </li>     <li> <p>命名方式很采用“body-view”+"page__desc"，既然官方都这样命名，那你可以自己根据具体情形去选择命名方式</p> </li>     <li> <p>绑定方法采用 bindchange="switch1Change" 这种直接对应字符串的方法</p> </li>     <li> <p>flexbox 布局</p> </li>    </ul>    <p>渲染机制</p>    <ul>     <li> <p>ReactNative 原生渲染，虚拟 Dom。</p> </li>     <li> <p>weex 原生渲染，真实 Dom。</p> </li>     <li> <p>微信小程序有说是原生渲染，有说其实是 web 渲染，但是以后会转向原生渲染，但是小程序是没有 Dom 的概念的。</p> </li>    </ul>    <p>性能分析</p>    <ul>     <li> <p>ReactNative 需要自己实现分包加载，从而优化JS加载执行时间</p> </li>     <li> <p>weex 默认提供分包实现</p> </li>     <li> <p>ReactNative 默认没有优化机制，长 view 渲染性能会比较差，这里还有一个臭名昭著的 <a href="/misc/goto?guid=4959648334040651444" rel="nofollow,noindex">性能 bug</a></p> </li>     <li> <p>weex 提供了 node 和 tree 两种渲染模式，优化长 view 的渲染</p> </li>     <li> <p>小程序还在内测，性能方面的内容不多，但是看 demo 运行出来的效果还可以</p> </li>    </ul>    <p><a href="/misc/goto?guid=4959746258901649856" rel="nofollow,noindex">JS引擎</a></p>    <ul>     <li> <p>weex 在 iOS 上使用 JSCore 而在安卓上使用了 V8</p> </li>     <li> <p>ReactNative 使用 JSCore</p> </li>     <li> <p>微信小程序使用 JSCore， <a href="/misc/goto?guid=4959746258986381057" rel="nofollow,noindex">出处请戳这里</a></p> </li>    </ul>    <p>发展形势</p>    <ul>     <li> <p>ReactNative 开源时间最长，已经接受了市场的检验，目前大部分公司的目前的选择都是 RN。</p> </li>     <li> <p>weex 是非常有潜力的一个开源项目，并且项目组在不断的积极跟新中，目前不少调研的公司都说非常好，准备投入使用，不知道使用多了会不会也被发现有很多坑，或者说只是适合阿里的业务不适合其他公司呢。</p> </li>     <li> <p>微信小程序已经目前还在内测中，刚开始非常火，不过现在也降温了不少，不知道公测的时候又会是怎样一番情况，比较适合于一些低频的应用，用于快速验证自身的业务模式将会是一个非常好的选择，毕竟微信的用户量在那。</p> </li>    </ul>    <p>参考文章</p>    <p><a href="/misc/goto?guid=4959742474505740404" rel="nofollow,noindex">weex&ReactNative对比</a></p>    <p><a href="/misc/goto?guid=4959746259091569221" rel="nofollow,noindex">Weex 和 React Native的比较看这里</a></p>    <p><a href="/misc/goto?guid=4959746259174891193" rel="nofollow,noindex">微信小程序背后的思考</a></p>    <p><a href="/misc/goto?guid=4959746259264241034" rel="nofollow,noindex">Weex & ReactNative & JSPatch</a></p>    <p> </p>    <p>来自：<a href="/misc/goto?guid=4959746259353716091" rel="nofollow,noindex">http://www.jianshu.com/p/fb28b8e14bc5</a></p>    <p> </p>