前端主要跨端技术方案对比

雾中人
382 阅读4分钟

Taro（react跨端方式）

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。、 一套代码，通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能，有效地提升了开发体验和开发效率。

Taro自研了一套打包机制将 AST 不断传递，因此代码分析的速度得到了很大的提高。一台 2015 年 的 15寸 RMBP 在编译上百个组件时仅需要大约 15 秒左右。

在 Taro 中，你不用像小程序一样区分什么是 App 组件，什么是 Page 组件，什么是 Component 组件，Taro 全都是 Component 组件，并且和 React 的生命周期完全一致。可以说，一旦你掌握了 React，那就几乎掌握了 Taro。同样使用声明式的 JSX 语法。相比起字符串的模板语法，JSX 在处理精细复杂需求的时候会更得心应手

举例

1.安装 npm install -g @tarojs/cli

2.初始化项目 taro init myApp  
3.编译

npm run dev:h5 --------- WEB

npm run dev:weapp --------- 微信小程序

npm run dev:alipay --------- 支付宝小程序

npm run dev:swan --------- 百度小程序

npm run dev:rn --------- ReactNative

4.安装taro-ui

5.通过vue react 搭建

6.react入口文件

import React, { Component } from 'react'  
import './app.css'

class App extends Component {  
render () {  
// this.props.children 是将要会渲染的页面  
return this.props.children  
}

}

// 每一个入口组件都必须导出一个 React 组件  
export default App

7.config配置

// app.config.js  
export default {  
// 页面路径列表  
pages: [  
'pages/index/index'  
],  
// 全局的默认窗口表现  
window: {  
backgroundTextStyle: 'light',  
navigationBarBackgroundColor: '#fff',  
navigationBarTitleText: 'WeChat',  
navigationBarTextStyle: 'black'  
},  
// 底部 tab 栏的表现  
tabBar: {}  
// 网络超时时间  
networkTimeout:{  
request: 6000,  
connectSocket: 6000,  
uploadFile: 6000,  
downloadFile: 6000  
}  
}

8.路由跳转

Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})

9.静态资源引入

import newbbd from '../../static/newbbd0001.jpg'

10.请求


Taro.request({
    url:'https://apiblog.aliyun01.com/default/getArticleList'
}).then(res=>{
    console.log(res.data)
})

等等

Weex（vue跨端方式）

Weex 是阿里巴巴开源的一套构建高性能，可扩展的原生应用跨平台开发方案。在 2016 年阿里双十一中，Weex 在阿里双十一会场中的覆盖率接近 99%，页面数量接近2000，覆盖了包括主会场、分会场、分分会场、人群会场在内几乎所有的阿里双十一会场业务。阿里双十一主会场秒开率97%，全部会场页面达到 93%。

特点：

  1. 页面的开发目前支持Rax和Vue
  2. 一次编写，三端（Android、iOS、前端）运行
  3. UI 的绘制通过 native 的组件，JavaScript 逻辑在 JS 引擎里运行，两者通过 JavaScriptCore 通信。
  4. 支持 Native 扩展
  5. 可以在chrome中调试JS代码，weex支持在chrome中预览页面dom节点
  6. 异步：weex只支持callback

自己对照文档开发

Flutter

Flutter 要解决的问题和上面的方案不同，完全不打算继续在 Web 生态上借力，从设计之初也并没有把 Web 生态考虑进去。相比于 RN 依赖 Native View 渲染，Flutter 则是自绘的组件，直接通过 Skia 绘制到屏幕上。
由于可以完全发挥 GPU 的能力，也不需要去 Native 绕一圈。Flutter 理论上能做到更好的性能和两端一致性，这一意味着理论上未来可能基于 Flutter 的 JS 动态化方案能够在样式上支持的比 WEEX 更好。
从前端的视角看仍然更像是一个 Native 开发方案而非跨端方案（虽然其实是跨 Android/iOS 的）。目前最主要的问题是 Flutter for Web 从技术原理上来说离生产可用可能还非常遥远。除此之外动态化能力的确实也会让部分场景不适用。

要花时间去学习dart语言

UniApp

  • 使用语言：js+vue+微信小程序组件

  • 优势：

    • 使用js+vue，能让前端无需学习，就能快速开发
    • 一套代码，能同时支持APP/H5/小程序，是较为全面的跨平台框架
    • 兼任小程序，能同时发布到多个小程序平台

  • 劣势：

    • 使用js+小程序多进程架构，在ui和逻辑通信过程中，性能大打折扣，对实现复杂界面及极致效果时会有点力不从心
    • App实现部分不开源（最新部分开源），遇到问题只能等官方解决
    • 兼容性较差，大部分时间不是在开发，而是在优化性能及调试各端兼容性问题

  • 社区：DCloud

移动端会存在比较多的坑，社区有点会有解决办法，有的没有，看个人选择

avatar
文章
阅读
粉丝