Capacitor 新一代混合应用“神器” 会代替Cordova吗？？

1.介绍or畅想

Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在iOS，Android，Electron 和 Web 上本机运行的Web应用程序。我们称这些应用为“Native Progressive Web Apps”，而我一般喜欢叫做混合移动开发。

Capacitor是Apache Cordova和Adobe PhoneGap的精神继承者，Capacitor将自己描述为“a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins that your app might need”➡️一个跨平台的API和代码执行层，可以轻松地从Web代码调用Native SDK并编写您的应用可能需要的自定义Native插件。同时在支持它们的平台上访问本机设备功能，适用于iOS上的Swift，Android上的Java和适用于Web的JavaScript的插件API，使开发者可以轻松添加本机功能。

Capacitor同时还具有出色的易于使用的工具，用于管理构建和部署平台。从理念上，它与Weex很相近：Write once，run anywhere，这与cordova 形成鲜明的对比。后者旨在替代（或者说是进化）。Capacitor 对许多现有的cordova plugin具有向后兼容的支持，其意图非常明显。Ionic作为最流行的混合移动框架，在ionic 123版本中都是运行在Cordova之上，但在4版本中，Capacitor已经成为Ionic应用程序的默认选项，你可以继续选择使用cordova或者尝试使用Capacitor。同时Capacitor还提供兼容层，允许在Capacitor项目中使用现有的Cordova插件。Capacitor具有许多功能，下面将介绍。将来很有可能成为Cordova等或者其他解决方案的良好替代品。除了在Ionic应用程序中使用Capacitor之外，还可以在没有Ionic的情况下使用Capacitor与你选择的前端框架或UI库，例如Angular，Vue，React with Material。。。等等等

2.安装+环境配置+项目维护

最基本要求是Node+，以及NPM 5.6.0+，一般情况下下载node包安装后自带安装了npm的了。

ios开发

构建iOS应用程序，首先你要有一台mac电脑，并且安装Xcode 9+，官方表示他们很快将你在windows上也可以用ionic pro为ios构建，我猜应该是ionic提供于云打包的功能吧。

首先你要安装CocoaPods，安装CocoaPods后，需要更新本地的储存库，确保本季具有最新版本的CocoaPods依赖项，所以应该定期运行此命令，更新本机的库版本。

##安装cocoapods
sudo gem install cocoapods

##更新本地的储存库
pod repo update

如果你在更新本地储存库出现以下问题

fatal: 有歧义的参数 'HEAD'：未知的版本或路径不存在于工作区中。
使用 '--' 来分隔版本和路径，例如：
'git <命令> [<版本>...] -- [<文件>...]'
Updating spec repo `master`
fatal: 有歧义的参数 'HEAD'：未知的版本或路径不存在于工作区中。
使用 '--' 来分隔版本和路径，例如：
'git <命令> [<版本>...] -- [<文件>...]'
fatal: 有歧义的参数 'HEAD'：未知的版本或路径不存在于工作区中。
使用 '--' 来分隔版本和路径，例如：
'git <命令> [<版本>...] -- [<文件>...]'
  $ /usr/local/bin/git -C /Users/huangenai/.cocoapods/repos/master fetch origin
  --progress
  remote: Enumerating objects: 127, done.        
  remote: Counting objects: 100% (127/127), done.        
  remote: Compressing objects: 100% (91/91), done.        
  remote: Total 2561792 (delta 55), reused 35 (delta 35), pack-reused 2561665        
  接收对象中: 100% (2561792/2561792), 585.57 MiB | 2.17 MiB/s, 完成.
  处理 delta 中: 100% (1501235/1501235), 完成.
  来自 https://github.com/CocoaPods/Specs
   * [新分支]          backz                 -> origin/backz
   * [新分支]          master                -> origin/master
   * [新分支]          predates_sharding_branch -> origin/predates_sharding_branch
   * [新分支]          swift_version_support -> origin/swift_version_support
   * [新标签]          v0.32.1               -> v0.32.1
   * [新标签]                  20161019              -> 20161019
  $ /usr/local/bin/git -C /Users/huangenai/.cocoapods/repos/master rev-parse
  --abbrev-ref HEAD
  fatal: 有歧义的参数 'HEAD'：未知的版本或路径不存在于工作区中。
  HEAD
  使用 '--' 来分隔版本和路径，例如：
  'git <命令> [<版本>...] -- [<文件>...]'
[!] CocoaPods was not able to update the `master` repo. If this is an unexpected issue and persists you can inspect it running `pod repo update --verbose`

请将源地址改为国内的镜像地址

ps：网上介绍的都是用淘宝的源，一开始我也是设置淘宝的源，一直报错，Error fetching https://ruby.taobao.org/: bad response Not Found 404

。原因是中国的ruby镜像交由社区来维护了，一开始是重定向到http://gems.ruby-china.org/，后来社区域名改了，所以最终ruby的镜像地址是这个https://gems.ruby-china.com

//去掉默认更新源
$ gem sources --remove https://rubygems.org/  
//使用国内社区维护的源
$ gem sources -a https://gems.ruby-china.com

安装xcode 命令行工具

终端运行下面的命令

如果你出现问题无法通过命令安装请看这个文章➡️ Xcode 命令行工具 Command Line Tools

xcode-select --install

最新版本的Capacitor始终支持最后两个iOS版本。例如，iOS 11和iOS 10.要支持旧版本的iOS，如果你要支持ios9 可能就要使用旧版本的Capacitor了（如果可用）。

android开发

官方要求必须安装java8 jdk

首先，如果安装了其他版本的JDK ，则必须安装Java 8 JDK，Java 9目前无法运行。

Android开发需要安装Android Studio的Android SDK。Android Studio不是必需的，可以仅使用Android CLI工具构建和运行应用程序，官方觉得android studio使构建和运行应用程序变得容易，所以安装吧，毕竟有时候调试的时候还是要用的。目前支持的API等级21+，即Android 5.0+，所以如果要求支持android 4.4的那Capacitor就不适用了。还需要安装Chrome50+版本的Android WebView。

安装使用 Capacitor（多种选择）

1.将Capacitor添加到现有的前端项目

cd my-app
npm install --save @capacitor/core @capacitor/cli
npx cap init //会要你输入应用程序ID，即android 的程序包名或ios的appid 还要输入项目路径

2.创建一个项目

npx @capacitor/cli create

//会要你输入应用程序ID，即android 的程序包名或ios的appid 还要输入项目路径

3.在ionic中使用Capacitor

//新建项目
//适用于1-4版本
ionic start ionicCapatitor tabs

cd ionicCapatitor

npm run build

//安装capacitor
npm install --save @capacitor/cli @capacitor/core

//capacitor与Cordova的Splashscreen插件冲突，所以要删掉。
npm uninstall --save cordova-plugin-splashscreen

//Init 应用程序信息
npx cap init [appName] [appId]

//添加平台
npx cap add ios
npx cap add android

//命令打开对应平台的IDE进行构建 ios 将会打开xcode android 打开android studio 前提是你已经安装了。
npx cap open ios
npx cap open android

当项目代码修改了，要重新构建发布新的版本呢。

//如果在ionic 则 ionic build
npm run build

//复制
npx cap copy

//打开对应平台的IDE进行构建
npx cap open [ios or android or order]

项目维护

定期更新依赖

npx cap update

3.使用cordova插件

npm install cool-cordova-plugin //插件名称

npx cap sync //同步

重要提示：

Capacitor不支持Cordova安装变量，不支持自动配置或。所以如果插件需要设置变量，则需要手动添加。

比如说极光推送需要添加APP_KEY的，你需要通过编辑要平台的本机项目来配置。这意味着你需要去编辑Info.plistiOS AndroidManifest.xml文件和Android文件

4.使用Capacitor Plugins

Capacitor提供了一个运行时，使开发人员能够使用Web的三大支柱 - HTML，CSS和JavaScript - 来构建在Web上以及主要桌面和移动平台上本机运行的应用程序。但它还提供了一组插件来访问设备的本机功能，例如相机，而无需为每个平台使用特定的低级代码; 该插件为您完成，并为此提供规范化的高级API。Capacitor还提供了一个API，您可以使用该API为Ionic团队提供的官方插件集未涵盖的本机功能构建自定义插件。你可以学习如何在文档中创建插件，还可以在文档中找到有关可用API和核心插件的更多详细信息。

Capacitor APIs： https://capacitor.ionicframework.com/docs/apis/

示例：

home.ts

import { Plugins } from '@capacitor/core';

export class HomePage {
  async showDialogAlert() {
    await Plugins.Modals.alert({
      title: 'Alert',
      message: '弹框测试'
    });
  }
}

home.page

<ion-header>

<ion-toolbar>

<ion-title>Home</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-button (click)="showDialogAlert()" full>Show Alert Box</ion-button>

</ion-content>

效果

5.构建

ios

npx cap add ios 
//在ionic中则
ionic capacitor copy ios

npx cap copy

npx cap open ios

自定义原生iOS代码

如果现有的无法满足你的业务需求，没有适合的Capacitor插件。

优秀的你可以使用Swift 或者Objective-C来构建插件，造福人类。

我之前写过cordova的插件，原理都差不多都。

android

npx cap add android

//在ionic中则
ionic capacitor copy android

npx cap copy

npx cap open android

同样你也可以自定义原生的java代码写个插件

比如说你要一个功能调用摄像头，

new 一个 camera.java 继承 Plugin，

camera.java写好调用摄像头的功能，返回结果。

然后在MainActivity中注册插件即可，跟cordova 差不多的。

我初略看了下原理其实都差不多的

详细请看这个https://capacitor.ionicframework.com/docs/plugins/

6.配置

在npx cap init [appName] [appId]的时候会创建一个capacitor.config.json文件，因为我们只输入了 appname跟appid，内容大概如下

{
  "appId": "com.xxx.xxx",
  "appName": "ionic-angular",
  "bundledWebRuntime": false,
  "webDir": "www"
}

更多配置上的请看官网的配置规范。https://capacitor.ionicframework.com/docs/basics/configuring-your-app

7.Capacitor特点

1.开源和免费

它一个开源项目，根据许可的MIT许可证授权，由Ionic和社区维护

2.跨平台

构建在iOS，Android，Electron和Progressive Web Apps上运行良好的Web应用程序。

3.对平台SDK的本机访问

在每个平台上可以访问完整的原生SDK，并轻松地部署到应用程序商店（和网站！）。

4.标准Web和浏览器技术

使用Capacitor构建的应用程序使用标准Web API，因此您的应用程序也将是跨浏览器的，并且将在遵循该标准的所有现代浏览器中良好运行。
5.可扩展
可以通过添加插件来访问底层平台的本机功能，或者，如果找不到符合您需求的插件，则可以通过简单的API创建自定义插件，或使用现有的Cordova插件。

6.简单
专注于你想做什么，而不是如何做。Capacitor将复杂的专有原生API变成简单的JS调用。

8.博主思考

毫无疑问，由ionic tream 开发维护的Capacitor，来势汹汹，意在要替换掉cordova了。Cordova的团队已经付出了巨大的工程努力，允许使用它的开发者在每个支持的平台上管理配置和构建流程，而Capacitor则专注于管理应用程序的Web资产以及它们与目标平台之间的集成，同时保留了实际上，将应用程序构建和打包到平台自己的专用工具链，无疑更甚一筹。cordova你需要花很多的时间去管理Cordova的config.xml文件，在写法上如果你用过cordova可能会编写很多平台检查代码，如下所示：

if（platform.is（'cordova'））{ 
  cordovaPlugin.doSomething（...）
} else { 
  web.doSomething（...）
}

在Capacitor中，这种类型的代码将简化为一行

capacitorPlugin.doSomething（...）

Capacitor提供一致的API，而cordova 可能在不同平台使用 api是不一样的。还有可能是因为Cordova对其当前插件的不可靠支持，开发者通常不得不依赖这些第三方开发人员来保持他们的插件是最新的。而且经常这些第三方插件存在着许多bug，需要要花费大量的时间去调试发现bug，和不得不去自己修改插件。ionic trean 自己说了觉得将本机插件和功能的责任推迟到社区已经不够了。如果想提供客户期望的服务水平，以及在移动市场中引领的开发者体验，他们必须承担这一部分的责任。所以他们在设计capacitor的时候，以支持大多数现有的Cordova插件。ionic tream可以说得上是相当了不起了，感觉他们并不是仅仅说开发一套ui组件。希望看到Capacitor在未来发展，以及ionic4正式发布。Capacitor+ionic4 我认为它有可能大大改善混合应用开发体验。随着这项技术的发展，让开发者专注于开发，而不是项目的构建和部署平台。期待····

本文纯属个人观点，如有不妥的，请多多包含。

参考连接

github capacitor

capacttor 官网

https://bendyworks.com/blog/capacitor-elm

https://blog.csdn.net/langyuewu/article/details/79579237

https://www.joshmorony.com/using-cordova-plugins-that-require-install-variables-with-capacitor/

Cordova vs Capacitor（视频）需要fan qiang - 早期体验比较

此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

posted @ 2018-11-01 19:01 huangenai 阅读(19223) 评论(2) 编辑收藏举报

刷新页面返回顶部

huangenai

代码改变世界