王宁billjoy

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">JavaScripttext>
    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 (
      Hello world!
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
社区支持
Weex开源较晚，网上相关资料还比较少，社区规模较小，网站资源还在建设中；
React Native社区则比较活跃，可以参考的项目和资料也比较丰富；

开发效率
Weex工程开发套件weexpack
Weex在线编码Weex Playground
ReactNative开发工具Nuclide
sublime text
webstorm
ReactNative在线编码 ReactNative Playground,对于国内用户来说，可能访问很困难。

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">JavaScripttext>
    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">JavaScripttext>
    div>
  div>
template>

对