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

Charlene987 7年前發布 | 25K 次閱讀小程序開發 Weex 移動開發

開文簡介，本人是一名 iOS 開發者，對于前端方面的知識掌握的并不是很全面，所以接下來有些理解不到位的地方還望指出。

由于這兩年移動開發的熱潮有點冷淡，加上前端行業的火爆，所以從今年四月份開始看了一個月的 HTML+CSS+JS ，簡單的做了一兩個網頁，接著學習了一個月的 ReactNative，緊接著阿里 Weex 公測，就接著這個節奏研究了一段時間的 Weex，再就是最近的微信小程序，相比而言小程序簡單很多，花了幾天就明白了。

基本簡介

ReactNative : (簡稱RN) 是非死book 于2015年四月開源的跨平臺移動應用開發框架，是非死book早先開源的 Web UI 框架 React 在原生移動應用平臺的衍生產物，目前支持 iOS 和安卓兩大平臺。該框架使用 Javascript，類似于 HTML 的 JSX，以及 CSS 來開發移動應用 UI，因此熟悉 Web 開發的人只需很少的學習成本就可以轉入移動應用開發。官方給出的介紹里用了一句 “Learn Once ,Write Anywhere” 還是非常貼切的，RN 并做不到一份代碼很好的適配 iOS 和安卓的所有機型和系統，需要你根據具體情況去做適配。

Weex : Weex 是阿里巴巴公司與2016年6月開源的一種用于構建移動跨平臺的 UI 框架，基于 vue.js ，特點是輕量級，性能很高，官方給出的口號是 “Write Once Run Everywhere”，聽起來比 RN 要屌很多哈。

小程序 : 微信小程序是混合式的移動應用，開發者在自己的微信中通過小程序的開發者工具，撰寫出Native 級別的界面，通過開發者工具生成壓縮包，提交到微信公眾平臺，然后在微信 app 中請求執行，便可實現原生Native 的界面體驗。微信之父張小龍在他的朋友圈里寫道微信小程序是不需要下載安裝的應用，實現‘觸手可及’，‘用完即走’的理念。這也是小程序最大的特點。

三者之間比較

文件類型

微信小程序

app.js 里面包含了程序的生命周期函數以及全局的數據
app.json 初始化了所有的頁面（“pages 數組中的第一個頁面就是小程序啟動完成后顯示的頁面”）以及其他一些全局的基礎配置。
app.wxss 類似于 css，并且 app.wxss 類似于基類，所有其他頁面的 .wxml 文件都可以使用 app.wxss 里面定義好的 UI 配置
index.js 具體子頁面的 js ，負責提供數據和邏輯控制
index.json 可以重寫 app.json 里配置好的屬性，如導航欄標題和顏色
index.wxml 具體子頁面里的組件
index.wxss 具體子頁面的 UI 布局，可以自己配置，也可以用 app.wxss 里的配置

ReactNative

package.json 里面主要是當前版本配置信息
index.ios.js iOS App 的入口，在這里注冊需要返回的組件
xxx.js RN 的一個頁面只需要一個 js 文件就夠了，請求數據，渲染組件，以及組件的 style 配置都在這個 js 文件里。

Weex

和 RN 差不多，一個 .we 文件就可以完整的配置好一個頁面了

編碼風格

<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>

Weex

template 代表 html, style 代表 css，script 代表 js
命名方式采用串羊肉法(“border-bottom-width”)
template里面的組件通過 class 的字符串數值來連接 style 里的布局設置
綁定方法采用 ondisappear="ondisappear" 這種直接對應字符串的方法
flexbox 布局

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;

ReactNative

HomeDetail 這個類里面 render 方法負責渲染組件，style 屬性對應著組件的 UI 配置，請求數據等方法也寫在 React.createClass 注冊類方法里面，請求完成數據之后直接重新 set 數據，組件會自動重寫渲染
命名方式采用駝峰法(“ justifyContent”)
綁定方法采用 onPress={()=>{this.popTopHome()}} ，{}表示一個函數，相對而言更加面向對象一些
flexbox 布局

<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>

微信小程序

{{switch1Checked}} 獲取 js 里面對應的switch1Checked數據
命名方式很采用“body-view”+"page__desc"，既然官方都這樣命名，那你可以自己根據具體情形去選擇命名方式
綁定方法采用 bindchange="switch1Change" 這種直接對應字符串的方法
flexbox 布局

渲染機制

ReactNative 原生渲染，虛擬 Dom。
weex 原生渲染，真實 Dom。
微信小程序有說是原生渲染，有說其實是 web 渲染，但是以后會轉向原生渲染，但是小程序是沒有 Dom 的概念的。

性能分析

ReactNative 需要自己實現分包加載，從而優化JS加載執行時間
weex 默認提供分包實現
ReactNative 默認沒有優化機制，長 view 渲染性能會比較差，這里還有一個臭名昭著的性能 bug
weex 提供了 node 和 tree 兩種渲染模式，優化長 view 的渲染
小程序還在內測，性能方面的內容不多，但是看 demo 運行出來的效果還可以

JS引擎

weex 在 iOS 上使用 JSCore 而在安卓上使用了 V8
ReactNative 使用 JSCore
微信小程序使用 JSCore，出處請戳這里

發展形勢

ReactNative 開源時間最長，已經接受了市場的檢驗，目前大部分公司的目前的選擇都是 RN。
weex 是非常有潛力的一個開源項目，并且項目組在不斷的積極跟新中，目前不少調研的公司都說非常好，準備投入使用，不知道使用多了會不會也被發現有很多坑，或者說只是適合阿里的業務不適合其他公司呢。
微信小程序已經目前還在內測中，剛開始非常火，不過現在也降溫了不少，不知道公測的時候又會是怎樣一番情況，比較適合于一些低頻的應用，用于快速驗證自身的業務模式將會是一個非常好的選擇，畢竟微信的用戶量在那。

參考文章

weex&ReactNative對比

Weex 和 React Native的比較看這里

微信小程序背后的思考

Weex & ReactNative & JSPatch

來自：http://www.jianshu.com/p/fb28b8e14bc5

本文由用戶 Charlene987 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1490750946932.html

小程序開發 Weex 移動開發