前端应用的领域之跨端 | 青训营笔记

90 阅读3分钟

这是我参加"第四届青训营"笔记创作活动的第4天

跨端

桌面跨端

  1. electron
    electron 其实就是个壳子,一个可以展示网页内容的壳子,相当于一个独立的浏览器,而这个浏览器可以提供给你一些接口,去调用系统的资源。 一般在浏览器中网页是没有权限去调用系统资源的,本地文件都无法自主获取,只能通过用户操作给浏览器才行。 有了 electron 就自由了,可以调用 electron 提供的一些系统功能,所有 nodejs 中可以使用的功能都可以。 你看到的 electron 程序内的界面全是 html + css 搭建的,并不是原生系统的界面方法。 electron 的一个很大的优势是可以做到一套代码通吃各平台,因为它的核心逻辑是 js 写的,只需要给不同平台的应用套上一个对应的外壳即可。
  2. NW.js
    NW.js是基于Chromium和Node.js的。它允许我们直接从浏览器调用Node.js代码和模块,并在我们的应用程序中使用Web技术。此外,我们可以轻松地将Web应用程序打包到本机应用程序。

NW.js提供了一个用于与操作系统交互的JavaScript API,以便我们可以执行以下操作:

● 控制应用程序窗口的大小和行为

● 使用菜单项在应用程序窗口中显示本机工具栏

● 右键单击应用程序窗口区域中的上下文菜单

● 在操作系统的托盘菜单中添加托盘应用程序项

● 访问操作系统剪贴板; 阅读内容甚至设置内容

● 使用默认应用程序打开计算机上的文件,文件夹和URL

● 通过操作系统的通知系统插入通知。

使用NW.js的好处:

1)以网络最流行的技术编写原生应用程序的新方法

2)基于HTML5, CSS3, JS and WebGL而编写

3)完全支持nodejs所有api及第三方模块

4)可以使用DOM直接调用nodejs模块

5)容易打包和分发

6)支持运行环境包括32位和64位的Window、Linux和Mac OS

移动跨端

  1. React Native
    React Native 是一套 UI 框架,默认情况下 React Native 会在 Activity 下加载 JS 文件,然后运行在 JavaScriptCore 中解析 Bundle 文件布局,最终堆叠出一系列的原生控件进行渲染。
    简单来说就是 通过写 JS 代码配置页面布局,然后 React Native 最终会解析渲染成原生控件,如 <View> 标签对应 ViewGroup/UIView ,<ScrollView> 标签对应 ScrollView/UIScrollView ,<Image> 标签对应 ImageView/UIImageView 等。

2.Flutter
Flutter是一个优秀的跨 IOS/Android 开发平台。 Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真、表现一致的应用程序。 Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。