Weex 和 React Native的比較

2019-11-09 17:43:15

字體：大中小

來源：轉載

供稿：網友

Weex 和 React Native的比較

基本概念

weex

阿里巴巴公司與2016年6月開源的一種用于構建移動跨平臺的UI框架基于JS開發框架 weex基于Vue.js

React Native

Facebook在2015年3月在F8開發者大會上開源的跨平臺UI框架基于JS開發框架基于React.js

Vue和React的比較

Weex和React Native的異同

相同點:

CSS屬性通用都使用JS開發都可以直接在Chrome中調試JS代碼需要Node.js基礎環境

不同點:

JS框架 Weex基于Vue.js ，以下是HelloWorld程序

<template> <div class="container"> <div class="cell"> <image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">javaScript</text> </div> </div></template><style> .cell { margin-top: 10; margin-left: 10; flex-direction: row; } .thumb { width: 200; height: 200; } .title { text-align: center; flex: 1; color: grey; font-size: 50; }</style>

React Native基于React.js，以下是HelloWorld程序

import React, { Component } from 'react';import { ApPRegistry, Text } from 'react-native';class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); }}AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

社區支持 Weex開源較晚，網上相關資料還比較少，社區規模較小，網站資源還在建設中； React Native社區則比較活躍，可以參考的項目和資料也比較豐富；

開發效率 Weex工程開發套件weexpack Weex的Playground可以在線編碼 ReactNative沒有工程開發套件，沒有在線編碼功能

技術	開發工具	在線編碼
Weex	weexpack	支持
ReactNative	notepad++	不支持

Weex簡單程序入門

環境搭建

安裝Node.js,建議下載msi格式，它會自動配置環境變量,而exe需要手動配置安裝weex-toolkit,命令行輸入npm install -g weex-toolkit檢查weex是否安裝成功，命令行輸入weex --version

第一個HelloWorld程序

在任意目錄下新建一個.we文件，例如我的是E:/weex_workspace/tech_list.we 文件內容為官方示例：

<template> <div class="container" > <div class="cell"> <image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">Javascript</text> </div> </div></template><style> .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; } .thumb {width: 200; height: 200; } .title {text-align: center ; flex: 1; color: grey; font-size: 50; } </style>

編輯后保存，在命令窗口下執行weex E:/weex_workspace/tech_list.we weex會啟動瀏覽器并且展示出網頁,如圖所示: 注意圖中紅色標注部分，不難看出，weex啟動了一個服務，我的目錄是C:/Users/wangning/weex_tmp/h5_render,順著這個目錄打開，我們可以看到這樣一組文件沒錯，第二個紅色標注部分的tech_list.js就是它，打開之后我們可以看到

紅色圈圈的地方就是判斷module對象是否有緩存，如果有，則退出當前function，起到了緩存頁面的作用。重點是最后兩個function

可以看到1是我們之前tech_list.we中的這段代碼

<template> <div class="container" > <div class="cell"> <image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">JavaScript</text> </div> </div></template>

對<template>標簽之間的布局元素進行的的解析，按照一定規則，轉換成了json數據并賦值給module.exports

以此類推，2中對應的是tech_list.we中的

對<style>標簽之間將樣式按照一定規則轉換成了json數據并賦值給module.exports 只要修改了tech_list.we，與之對應的tech_list.js就會發生相應的變化, 例如，我們向tech_list.we中多添加幾個div元素

<template> <div class="container"> <div class="cell"> <image class="thumb" src="http://t.cn/RGE3AJt"></image> <text class="title">JavaScript</text> </div> <div class="cell"> <image class="thumb" src="http://t.cn/RGE3uo9"></image> <text class="title">Java</text> </div> <div class="cell"> <image class="thumb" src="http://t.cn/RGE31hq"></image> <text class="title">Objective C</text> </div> </div></template><style> .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; } .thumb { width: 200; height: 200; } .title { text-align: center ; flex: 1; color: grey; font-size: 50; }</style>

刷新網頁，tech_list.js發生了變化，用文件比較器查看，變為內容如下：

可以看到，只要<template>標簽之間有布局元素變化，weex就會自動修改與之對應的js文件，并將當前布局元素以json數據的形式呈現在與.we對應的.js文件中. 以此類推，<style><script>標簽同理，不再敖述。

在手機上運行

接下來，我們將這段代碼集成到安卓開發環境將已經生成的js文件復制到AndroidStudio的assets目錄下

在模擬器上運行，我們看到

發現沒有顯示圖片，因為我們沒有實現IWXImgLoaderAdapter的setImage方法我們使用imageloader加載網絡圖片，代碼如下：

public class ImageAdapter implements IWXImgLoaderAdapter { private static final String TAG = "ImageAdapter"; @Override public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) { //實現你自己的圖片下載，否則圖片無法顯示。 Log.d(TAG, "setImage: url"+url); ImageLoader.getInstance().displayImage(url, view, new DisplayImageOptions.Builder() .cacheInMemory(Boolean.TRUE) .imageScaleType(ImageScaleType.EXACTLY) .bitmapConfig(Bitmap.Config.RGB_565).build()); }}

再次運行，圖片就出來了

Weex中的變量定義和方法定義

以這段代碼為例

<template> <div style="width: {{w}}; height: {{h}}; background-color: red;" onclick="update"></div></template><script> module.exports = { data: function () { return {w: 750, h: 200} }, methods: { update: function (e) { this.h += 200 } } }</script>

data中定義數據，類似于成員變量，methods定義方法，可以把module.exports看做一個類, update方法對成員變量h進行了自增200的運算，{{h}}是Vue.js的數據綁定語法，只要對h的值進行了變更，則會立即生效。

我們將這段代碼在Playground中運行，如下圖

手機頂部有一塊紅色區域，就是我們<template>標簽中的<div>,這個<div>有一個點擊事件，onclick="update"點擊后會執行update方法，將變量h自增200，由于變量h是在<div>的height的值，因此點擊后高度會自增200，若是之前安裝了Playground手機程序，可以打開Playound App掃面右側二維碼，在手機上查看實際效果

ReactNative簡單程序入門

環境搭建

安裝Node.js,建議下載msi格式，它會自動配置環境變量,而exe需要手動配置安裝Python2安裝 Yarn、React Native的命令行工具（react-native-cli） npm install -g yarn react-native-cli安裝Android Studio2.0及以上版本

第一個HelloWorld程序

命令窗口下執行：

react-native init AwesomeProjectcd AwesomeProjectreact-native run-android

Windows用戶請注意，請不要在命令行默認的System32目錄中init項目！會有各種權限限制導致不能運行！

手動運行Packager

有個常見的問題是在你運行react-native run-android命令后，Packager可能不會自動運行。此時你可以手動啟動它：

cd AwesomeProjectreact-native start

如果你碰到了ERROR Watcher took too long to load的報錯，請嘗試將這個文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目錄下)。

打開AwesomeProject工程下的index.android.js文件，我們可以看到如下內容：我們可以看到<View>標簽中包含了三個<Text>標簽，分別展示了三條文本內容，需要注意的是，每一個工程必須要有一個render() {}方法，他負責渲染頁面，只返回一個直接子節點

正確寫法：

render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); }

錯誤寫法：

render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); }

在手機上運行

首先，我們需要用AndroidStudio打開AwesomeProject工程下的android工程 E:/reactnative_workspace/AwesomeProject/android 建議先將E:/reactnative_workspace/AwesomeProject/android/gradle/wrapper/gradle-wrapper.properties替換成已有的gradle版本，避免不必要的下載。項目構建成功后，請確保packager服務已經打開，若未打開，請cd到工程目錄下，執行react-native start,

如下圖所示

表示packager服務已經啟動成功。

我們運行AwesomeProject，如下圖所示

index.android.js代碼中的三個<Text>文本內容就展示出來了

現在你已經成功運行了項目，我們可以開始嘗試動手改一改了：

使用你喜歡的文本編輯器打開index.android.js并隨便改上幾行按兩下R鍵，或是用Menu鍵（通常是F2，在Genymotion模擬器中是?+M）打開開發者菜單，然后選擇 Reload JS 就可以看到你的最新修改。在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的應用的日志。

React Native內置了對ES2015標準的支持，你可以放心使用而無需擔心兼容性問題。上面的示例代碼中的import、from、class、extends、以及() =>箭頭函數等新語法都是ES2015中的特性。如果你不熟悉ES2015的話，可以看看阮一峰老師的書，還有論壇的這篇總結。