方案选型

候选框架

react-native / flutter / weex / uni-app

目前技术方面，从成本和人员情况上看，不考虑原生开发，以上都是跨平台的解决方案，即写一份代码可以同时在ios、android上运行

各框架优劣

uni-app:

一套代码编译到7个平台，难以置信吗？依次扫描7个二维码，亲自体验最全面的跨平台效果！

github:

总结: 后台不硬，社区不是很活跃，也没有大公司在用，尚不成熟。并且多端兼容必然带来更多的差异化处理。

weex：

A framework for building Mobile cross-platform UI https://weex.apache.org/

github上已经归档:

写法：

<template>
  <div><text>Toast</text></div>
</template>
<script>
  const modal = weex.requireModule('modal')
  modal.toast({
    message: 'I am a toast.',
    duration: 3
  })
</script>

总结：比较贴近js + html写法，类似于vue,目前主要阿里在用，但是自建社区不够活跃，插件也不够丰富

react-native / flutter

flutter语法：

Future<void> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

react-native语法：

import React, { Component } from 'react'
import {
  ActivityIndicator,
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native'
export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})
AppRegistry.registerComponent('App', () => App)