开文简介，本人是一名 iOS 开发者，对于前端方面的知识掌握的并不是很全面，所以接下来有些理解不到位的地方还望指出。
由于这两年移动开发的热潮有点冷淡，加上前端行业的火爆，所以从今年四月份开始看了一个月的 HTML+CSS+JS ，简单的做了一两个网页，接着学习了一个月的 ReactNative，紧接着阿里 Weex 公测，就接着这个节奏研究了一段时间的 Weex，再就是最近的微信小程序，相比而言小程序简单很多，花了几天就明白了。
基本简介
三者之间比较
文件类型
微信小程序- 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 里的配置
- package.json 里面主要是当前版本配置信息
- index.ios.js iOS App 的入口，在这里注册需要返回的组件
- xxx.js RN 的一个页面只需要一个 js 文件就够了，请求数据，渲染组件，以及组件的 style 配置都在这个 js 文件里。
- 和 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 渲染性能会比较差，这里还有一个臭名昭著的
- weex 提供了 node 和 tree 两种渲染模式，优化长 view 的渲染
- 小程序还在内测，性能方面的内容不多，但是看 demo 运行出来的效果还可以
- weex 在 iOS 上使用 JSCore 而在安卓上使用了 V8
- ReactNative 使用 JSCore
- 微信小程序使用 JSCore，
发展形势
- ReactNative 开源时间最长，已经接受了市场的检验，目前大部分公司的目前的选择都是 RN。
- weex 是非常有潜力的一个开源项目，并且项目组在不断的积极跟新中，目前不少调研的公司都说非常好，准备投入使用，不知道使用多了会不会也被发现有很多坑，或者说只是适合阿里的业务不适合其他公司呢。
- 微信小程序已经目前还在内测中，刚开始非常火，不过现在也降温了不少，不知道公测的时候又会是怎样一番情况，比较适合于一些低频的应用，用于快速验证自身的业务模式将会是一个非常好的选择，毕竟微信的用户量在那。