Capacitor 新一代混合應用“神器” 會代替Cordova嗎？？

来源:https://www.cnblogs.com/huangenai/archive/2018/11/01/9887448.html
-Advertisement-
Play Games

1.介紹or暢想 Capacitor是由ionic團隊最新開發維護的一個跨平臺的應用程式容器，可以輕鬆構建在iOS，Android，Electron 和 Web 上本機運行的Web應用程式。我們稱這些應用為“Native Progressive Web Apps”，而我一般喜歡叫做混合移動開發。 C ...


   

  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.構建

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/

5.配置

在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

 

6.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調用。

7.博主思考

 毫無疑問，由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 - 早期體驗比較

 

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

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2018-11-01
    這是我的隨筆<span>123333</span> ...
  • js-2018-11-01 關於break和continue語句
    語法：label: statement 加標簽語句一般都要與for語句等迴圈語句配合使用。 立即退出迴圈，強制執行迴圈後面的語句。 立即退出迴圈，退出迴圈後會從迴圈的頂部繼續執行。 如上圖，該程式自然執行下，num的值為100。第一個for迴圈執行，然後執行第二個for迴圈，當i == 5 且 j ...
  • js和css實現手機橫豎屏預覽思路整理
    實現效果，如上圖。 首先，實現手機頁面在PC端預覽， 則先在網上找到一個手機的背景圖片，算好大概內間距，用來放預覽的頁面，我這裡是給手機預覽頁面的尺寸按iphone5的尺寸來的； 一個手機頁面在這裡預覽，要通過<iframe>標簽，左邊選擇不同的select選項，通過監聽select選項的值，在js ...
  • Javascript 對象 - 日期對象
    日期對象 在JavaScript中提供了Data對象，用於處理和日期有關的內容。通過Data對象可以獲取系統時間、設置時間等。Data對象也具有prototype和constructor屬性。 1創建日期 創建日期的方法有多種，下麵介紹幾種常用的方法。 --可以使用下列語句，創建一個對象表示系統當前 ...
  • PoPo數據可視化周刊第6期
    PoPo數據可視化 聚焦於Web數據可視化與可視化交互領域，發現可視化領域有意思的內容。不想錯過可視化領域的精彩內容, 就快快關註我們吧 :) 本期可視化精彩視頻請關註公眾號瀏覽 全天智能獲Pre-A輪千萬融資 助力開啟全天候實時大數據可視化模式 騰訊AI加速器二期項目全天智能獲Pre-A輪千萬融資 ...
  • PoPo數據可視化周刊第5期
    PoPo數據可視化 聚焦於Web數據可視化與可視化交互領域，發現可視化領域有意思的內容。不想錯過可視化領域的精彩內容, 就快快關註我們吧 :) World Wire 數據可視化演示（視頻） IBM公司於2018年8月推出全球支付系統“World Wire” 珊瑚城市-全球10大最適宜居住的城市（視頻 ...
  • HTML+Javascript製作拼圖小游戲詳解（二）
    上一篇我們說了網頁的基本佈局。接下來將為大家帶來具體的實現方法。 拼圖通表格來實現，做一個方形的表格，改變其大小使之如圖所示。 試想一下如果我們將一張圖片剪成6張分別放入對應位置，然後再把它打亂，這樣就可以進行拼圖了。 可是，將圖片放入和打亂圖片倒是不難，可想要實現移動圖片，這就有一點麻煩了。 不知 ...
  • 如何把js的代碼寫的更加容易維護(一)--面向對象編程
    總是頭疼javascript的代碼寫起來不可維護，那麼看看下麵的代碼： 代碼其實很簡單，其基本思路就是，將數據、函數、事件監聽和回調都封裝在一個對象中，那麼我們可以簡單的把這個對象理解為一個組件。 封裝的難點：事件監聽和回調 封裝的難點其實在於事件的監聽和回調，先看一個簡單的實現： 就是以匿名函數的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類