ionic4+angular6 混合移动开发 capacitor cordova

最新推荐文章于 2024-07-27 23:08:37 发布
最新推荐文章于 2024-07-27 23:08:37 发布
阅读量511 收藏
点赞数
文章标签： 移动开发 javascript xcode ViewUI
原文链接：http://www.cnblogs.com/huangenai/p/9886721.html
版权

首先要更新或者安装 ionic cli

npm install -g ionic

创建项目

ionic start ionic-angular tabs --type=angular

  –type=angular 是需要多加的参数，现在官方只集成好了angualr 或许以后就会有 --type=vue  or --type=react 呢

新建好项目后你会发现，与ionic2 ionic3项目 它的目录结构变了。在ionic4 ，已更改为遵循每个受支持框架的建议设置。例如，如果某个应用程序正在使用Angular，那么该项目结构将与Angular CLI应用程序完全相同。

这是新建好后的目录结构，有angular项目经验的开发人员来说，这应该非常熟悉。

命令跑起来

npm run start

打开 http://localhost:4200

 

图一项目结构

图二跑起来在浏览器的效果图

                

 

本文不会详细介绍如何配置android java 环境，

不会详细介绍如何配置ios appid以及签名等，

你要先有android，java环境或者一台mac 以及 cordova 相关知识请翻我的以前等文章，这里就不详细说明了。

 

使用 cordova 构建移动应用程序

这里只展示打包ios ipa

首先打开config.xml文件并修改id，id即为你ios开发者中心中的 appid

ionic build
ionic cordova prepare ios

 

xcode打开MyApp.xcodeproj， 

选择开发团队自动签名后，手机连接电脑，xcode直接运行安装完成，打开app 看效果。

 

 

使用 Capacitor 构建移动应用程序

新建的项目确保能够跑起来后，比如说我项目已经添加了 cordova 就不能再使用Capacitor构建了。

有必要先了解capacitor 才能更好的使用capatitor构建移动应用程序，建议先看看这篇博客对capacitor有些了解

https://www.cnblogs.com/huangenai/p/9887448.html

这里展示的是如何打包android apk

首先，你必须安装Java 8 JDK并将其设置为默认 ，切记Java 9目前无法运行。

Android开发需要安装Android Studio的Android SDK。Android Studio不是必需的，可以仅使用Android CLI工具构建和运行应用程序，但用android studio 它将使构建和运行应用程序变得更加容，所以官方是强烈建议安装的。当前Capacitor团队的目标是API21或更高，即Android 5.0（Lollipop）或更高版本。所以捏，意思是不支持4的咯，所以使用Capacitor的，要注意了。此外，Capacitor还需要安装Chrome版本50或更高版本的Android WebView。 

终端执行命令

ionic build 

ionic capacitor add android

然后打开android studio，你要等待一会，android studio 会同步并更新Gradle。。 更新后，变可以编译或者跑在模拟器或者手机上。

 

这里是展示如何打包ios ipa

ionic build 
 
ionic capacitor add ios

在使用capacitor打包ios ipa的时候出现了很多问题。

可能出现的问题：

问题一

cocoapods is not installed

在capacitor官网有介绍到需要Node v8.6.0或更高版本，以及NPM 5.6.0+版本。

而且在对于构建iOS应用程序，Capacitor需要具有Xcode 9或更高版本的Mac。

解决方案：

安装cocoapods，并且要更新本地存储库

sudo gem install cocoapods
pod repo update

问题二

✔ Installing iOS dependencies in 15.36s
✔ Adding native xcode project in: /Users/huangenai/Desktop/test/ionic-angular/ios in 221.25ms
✔ add in 15.58s
✔ Copying web assets from www to ios/App/public in 830.41ms
✔ Copying native bridge in 1.47ms
✔ Copying capacitor.config.json in 4.50ms
✔ copy in 849.44ms
✔ Updating iOS plugins in 5.48ms
  Found 0 Capacitor plugins for ios:
✖ Updating iOS native dependencies: 
✖ update ios: 
[error] Analyzing dependencies
Fetching podspec for `Capacitor` from `../../node_modules/@capacitor/ios`
Fetching podspec for `CapacitorCordova` from `../../node_modules/@capacitor/ios`
[!] Unable to find a specification for `GCDWebServer (~> 3.0)` depended upon by `Capacitor`

[ERROR] An error occurred while running subprocess capacitor.
        
        capacitor add ios exited with exit code 1.

 问题原因：我一开始没看清楚需要更新本地库

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：网上介绍的都是用淘宝的源，一开始我也是设置淘宝的源，一直报错。原因是中国的ruby镜像交由社区来维护了，一开始是重定向到http://gems.ruby-china.org/，后来社区域名改了 最终ruby的镜像地址是 这个https://gems.ruby-china.com

Error fetching https://ruby.taobao.org/: bad response Not Found 404

所以先去掉默认的源设置为国内社区维护的源。

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

再更新本地库

pod repo update

更新完本地库后， Unable to find a specification for `GCDWebServer (~> 3.0)` depended upon by `Capacitor` 这个问题算是解决了 。

 

问题三

✖ update ios:
[error] Analyzing dependencies
Fetching podspec for `Capacitor` from `../../node_modules/@capacitor/ios`
Fetching podspec for `CapacitorCordova` from `../../node_modules/@capacitor/ios`
Downloading dependencies
Installing Capacitor 1.0.0-beta.7 (was 0.0.99)
Installing CapacitorCordova 1.0.0-beta.7 (was 0.0.99)
Using GCDWebServer (3.4.2)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 2 dependencies from the Podfile and 3 total pods installed.
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

[ERROR] An error occurred while running subprocess capacitor.

        capacitor add ios exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

解决方案： 安装xcode 命令行工具

详细请看 Xcode 命令行工具 Command Line Tools

 

问题四

[error] "ios" platform already exists.
    To add a new "ios" platform, please remove "/Users/huangenai/Desktop/test/ionic-angular/ios" and run this command again.
    WARNING! your native IDE project will be completely removed.
[ERROR] An error occurred while running subprocess capacitor.

        capacitor add ios exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

解决方案：

移除项目下的ios即可，再从新执行ionic capacitor add ios。

 

漂亮终于终于解决了层层问题后可以了，接下来就简单了。

//打开xcode
ionic capacitor run ios

连接上手机，选择开发团队，自动签名后，run便直接运行在手机上了。

切记找到文件capacitor.config.json，appId 要改成你自己在开发者中心添加的的appid。

 

下图为android 模拟器跑起来效果图

 

 

使用Capacitor构建移动应用，出现以上问题，很大原因是我没有完完全全的去了解并安装好Capacitor。

你需要了解Capacitor。详细请看官方文档 https://capacitor.ionicframework.com

 

2018年11月2号更新

后面我对Capacitor去全面对学习了一番，写下这篇博客介绍关于Capacitor

 https://www.cnblogs.com/huangenai/p/9887448.html

 

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

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

转载于:https://www.cnblogs.com/huangenai/p/9886721.html

ionic5+capacitor+angular
学无止境! 无休无止!
03-25 3327
ionic更新到5之后。创建项目会默认使用capacitor容器。是ionic自己开发的一套类似cordova的东西。使用起来也比较简单。慢慢的会替代cordova，变成自己的东西吧。 之前使用的是ioniccordova来操作 现在使用npx cap来操作 安装ionic npm install -g ionic 创建项目 ionic start capApp ta...
解决ionic5+angular启动页后白屏
baidu_37332423的博客
09-14 1201
效果 修改前 修改后 原因分析 ionic5+Angular在启动页后出现一段时间的白屏，是因为MainActivity继承自BridgeActivity 而BridgeActivity.java的bridge_layout_main.xml使用了webview，在加载App页面的过程中，显示背景色白色，导致白屏显示。 所以修改webview的背景色为透明，即可解决白屏现象。 ...
ionic4-angular6-crud-example：使用Ionic 4，Angular 6和Cordova构建CRUD移动应用
02-03
使用Ionic 4，Angular 6和Cordova构建CRUD移动应用 此源代码是教程一部分。 要在本地运行： 克隆此仓库 确保API服务器正在运行 编辑src/app/rest-api.service.ts然后更改API URL以匹配您的API 运行npm install 运行ionic serve -l
Cordova在左，Capacitor在右
IT晴天
04-01 4028
自本人简书文章迁移https://www.jianshu.com/p/33c21660f50e Cordova（Webview）是第一代的混合式应用技术代表，ReactNative/Weex/NativeScript等是第二代，而第三代是以Flutter为先驱，Flutter是将来的趋势，这一两年的热度不断攀升也印证了这一点，然而当前它仍有一些不足，还未到大规模使用的时候，同时前两代技术的优点也是比较明显，故一段时期内混合式应用技术仍将处于三分天下的态势。 所以，“扔掉你的Cordova”，并不是要.
vue3+quasar+capacitor开发多平台项目,使用cordova和capacitor插件(支持所有前端框架）
tangdou369098655的博客
05-25 5689
先看文档 框架文档地址：https://quasar.dev/start/quasar-cli 创建项目 npm init quasar 运行与打包命令 npx quasar dev npx quasar build 接入capacitor的两种方式 方式一：官方接入方式 文档地址：https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation quasar mode add capacitor 这个命令会生成
极光推送Cordova插件适配Capacitor
僵小蛋的博客
11-02 4832
极光推送官方提供的Cordova插件目前无法适配Capacitor电容器平台进行开发，之前问了官方什么时候会考虑适配，官方的回答是暂不做开发安排，需要调研，这对于想使用Capacitor进行开发的同学来说不太友好，Google了一番，发现有一个GitHub已经对此做了适配，于是Fork了一份整理了下，附上使用文档。原GitHub传送门：https://github.com/netsesame2/cordova-plugin-jpush Capacitor 使用 npm 安装： npm i cordova-p
ionic+angular的PDF
11-28
将 Ionic 与 Angular 结合使用，我们可以创建功能强大的混合移动应用。在 "Learning Ionic" 这份文档中，你可能学习到如何设置开发环境，安装并初始化一个新的 Ionic 项目，以及如何使用 Angular 的特性，如组件、...
iStudyForTea:istudy的教师端 用的是ionic + angular js来搭建
05-12
一、Ionic框架：混合移动应用开发的首选 Ionic是一款开源的HTML5移动应用框架，它主要基于Angular JS构建，致力于提供一套完整的移动应用UI组件和工具，帮助开发者快速构建跨平台的原生感观的混合移动应用。其核心...
ionic3蓝牙程序（typescript+html语言）
03-04
Ionic 3是Angular框架的一个版本，它为构建跨平台的原生移动应用提供了便利。它利用Web技术如HTML、CSS和JavaScript，通过Cordova或Capacitor插件来访问设备的硬件功能，如蓝牙。 首先，让我们讨论Ionic 3的核心...
ionic angular capacitor项目展示控件使用，页面跳转，网络请求封装
03-16
ionic+angular+capacitor项目功能点包括一下几点： 1.ionic基本控件使用； 2.添加新页面； 3.页面跳转； 4.网络请求封装，有loading显示；
Capacitor 新一代混合应用“神器” 会代替Cordova吗？？
weixin_34066347的博客
11-01 776
      1.介绍or畅想   Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在iOS，Android，Electron 和 Web 上本机运行的Web应用程序。我们称这些应用为“Native Progressive Web Apps”，而我一般喜欢叫做混合移动开发。    Capacitor是Apache Cordova和Adobe PhoneGap的...
ionic+angular4中设置使安卓也统一使用iOS的样式风格和icon
涂涂
08-12 1396
在ionic+angular4中很多时候设置了iOS下的样式和icon发现在安卓下面并没有用，icon出不来的情况。除了可以针对没有样式部分的安卓样式进行样式定义和icon定义以外可以设置使安卓强制使用iOS的样式。 设置方法如下： 在app.component.ts下面 imports: [ BrowserModule, IonicModule.forRoot(MyApp,{
Android中集成前端页面探索（Capacitor 或 Cordova 插件）待完善......
最新发布
sinat_30491515的博客
07-27 574
探索目标：Android中使用capacitor插件集成前端页面。
git检查文件是否存在
qq_41024657的博客
11-30 1845
fatal: 有歧义的参数 ‘test.md’：未知的版本或路径不存在于工作区中。使用 ‘–’ 来分隔版本和路径，例如：‘git […] – […]’
使用ionic生成apk时遇到的错误：[ERROR] An error occurred while running subprocess cordova
热门推荐
神奇海螺
04-26 1万+
刚开始，一直盯着这句红色的错误看，没注意看上面的报错，网络上的方法都试过了，没有一个管用的，后来发现报错的具体内容。 * What went wrong: A problem occurred configuring project ':app'. > Failed to install the following Android SDK packages as some licence...
Eclipse用法和技巧十八：减少不必要的输入
xuela-net
07-01 166
写代码的时候，很多人都有一个原则，尽量上输入。依靠IDE自动生成的代码，一般可读性，排版什么的都还是不错的，最主要的一般不会有什么低级错误。今天介绍几个在eclipse环境中，常用的依靠eclipse完成的操作。第一个，在实现方法的时候，经常会用到局部变量，这些局部变量的初始化值来自于某些对象的某些方法，由于方法中局部变量的高优先级，同样的名称可以覆盖作用域等。你可以直接输入方法名称，自动匹配生...
对Git的一些理解
博客
07-25 4297
使用Git都快2年了，能够说熟练使用git，遇到不会的也可以自己查询git帮助手册。平时可以根据shell的管道命令，组合一些命令比如git show commitID | grep “diff”来看看某次提交修改了哪些文件，还经常帮助同事解决git上面的问题。但是自己心里明白，还是有很多地方不是很懂。这几天抽空温故了下proGit，基于平日的思考，感觉有了不少的进步，准备总结下。这里事先说
A problem occurred configuring project ':CordovaLib'. An error occurred while running subprocess
pan_xi_yi的博客
10-19 1万+
H:\IonicSpace\MyApp&gt;"I:\Program Files\Java\jdk1.8.0_73/bin/java.exe" "-Dorg.gradle.appname=gradlew" -classpath "H:\IonicSpace\MyApp\platforms\android\\gradle\wrapper\gradle-wrapper.jar" org.grad...
Angular+Ionic实现数独游戏项目教程
资源摘要信息:"本资源为一个已经完成的项目搭建，其中涉及到了Angular和Ionic框架，用于开发数独游戏。数独是一种经典的益智游戏，玩家需要在9x9的网格中填入数字1到9，每行每列以及九个3x3的宫格内的数字均不重复。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值