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 - 早期体验比较

 

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程