Capacitor 新一代混合應用「神器」會代替Cordova嗎？？

時間 2019-11-06

標籤 capacitor 新一代混合應用神器代替 cordova 欄目 Cordova 简体版

原文原文鏈接

1.介紹or暢想

Capacitor是由ionic團隊最新開發維護的一個跨平臺的應用程序容器，能夠輕鬆構建在iOS，Android，Electron 和 Web 上本機運行的Web應用程序。咱們稱這些應用爲「Native Progressive Web Apps」，而我通常喜歡叫作混合移動開發。html

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。。。等等等java

2.安裝+環境配置+項目維護

最基本要求是Node+，以及NPM 5.6.0+，通常狀況下下載node包安裝後自帶安裝了npm的了。node

ios開發

構建iOS應用程序，首先你要有一臺mac電腦，而且安裝Xcode 9+，官方表示他們很快將你在windows上也能夠用ionic pro爲ios構建，我猜應該是ionic提供於雲打包的功能吧。android

首先你要安裝CocoaPods，安裝CocoaPods後，須要更新本地的儲存庫，確保本季具備最新版本的CocoaPods依賴項，因此應該按期運行此命令，更新本機的庫版本。ios

##安裝cocoapods
sudo gem install cocoapods

##更新本地的儲存庫
pod repo update

若是你在更新本地儲存庫出現如下問題git

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`

請將源地址改成國內的鏡像地址github

ps：網上介紹的都是用淘寶的源，一開始我也是設置淘寶的源，一直報錯，Error fetching https://ruby.taobao.org/: bad response Not Found 404 web

。緣由是中國的ruby鏡像交由社區來維護了，一開始是重定向到http://gems.ruby-china.org/，後來社區域名改了，因此最終ruby的鏡像地址是這個https://gems.ruby-china.comapache

//去掉默認更新源
$ 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 - 早期體驗比較

此隨筆乃本人學習工做記錄，若有疑問歡迎在下面評論，轉載請標明出處。

若是對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。