Ionic5+Angular9+Cordova混合开发

记录下自己的学习路线,仅供参考

环境搭建

有很多大佬介绍了如何安装环境,可以看这里

ionic5+angular8混合移动开发(一)——环境搭建
基于ionic4、cordova搭建android开发环境
ionic+angular+cordova 安卓环境搭建

理解 ionic 、 angular 和cordova之间的关系

理解Ionic、Angular、Cordova及插件之间的关系
Angular、ionic、Cordova的关系介绍与打包

看官方文档的介绍

ionic4.x中文官网
Angular中文网
Cordova中文网
Typescript中文手册
Typescript

进一步了解Ionic5

Ionic4基础–目录结构以及核心文件分析
简单说说 angular.json 文件
tsconfig.json配置项详解
如果有过小程序开发经验就很容易理解

进一步了解Angular

Angular 6.x 快速入门
Angular 4 快速入门
这篇修仙之路非常详细!基本上看完就集大成了hhh!
Angular 4.x 修仙之路
辅助学习依赖注入规则
Angular 4 依赖注入教程之一 依赖注入简介
Angular依赖注入(6)
angular依赖注入的理解及实现原理

可能会用到的插件

ionic5+如何调用cordova插件中的方法

cordova调用本地SQLite数据库的方法
Ionic2 调用本地SQlite
ionic2 sqlite Service,兼容浏览器和真机
Ionic3学习笔记(六)存储之使用 SQLite
ionic3-使用SQLite数据库
Web开发学习笔记:Ionic4使用SQLite数据库,将查询结果动态转为数组
Web开发学习笔记:Ionic4与SQLite数据库交互
SQLite Porter
Ionic3–数据存储
cordova sqlite
cordova-sqlite-plugin常用数据库操作
Ionic学习日记6:使用SQLite保存用户数据

cordova_sqlite_storage的使用
ionic sqlite 存取数据封装(兼容真机与浏览器)

cordova-plugin-serialport-rw
这个插件要注意,安装时应使用 cordova plugin add cordova-plugin-serialport-rw 命令,才能安装到安卓平台

基于WiFi模块的Android WiFi通信
sockets-for-cordova

可能会遇到的问题

cannot-find-module-ionic-native
Can’t resolve all parameters for SQLiteObject: (?).
不要在app.module.ts文件中的providers 加入SQLiteObject

cordova-plugin-sqlite-2, 在WebSQL之后,为 Cordova/PhoneGap/Ionic, 建模的本地SQLite数据库 API

解决通过ionic build --prod编译项目时出现“Could not find plugin "proposal-numeric-separator"问题

npm Error: EPERM: operation not permitted

Codova Android 使用原生模拟器调试
sqlite遇到database is locked问题的完美解决
添加链接描述

android studio 查看设备文件管理

android studio 运行按钮为灰色的解决办法之一

Codova Android 使用原生模拟器调试

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Angular是一个流行的JavaScript框架,用于构建Web应用程序。Ionic是基于Angular的开源移动应用开发框架,它提供了一套UI组件和具,帮助开发者构建跨平台的移动应用程序。 Swiper是一个流行的移动端滑动组件库,它提供了丰富的滑动效果和交互功能,可以用于创建漂亮的轮播图、图片浏览器等。 结合AngularIonic,你可以轻松地集成Swiper组件到你的移动应用中。首先,你需要在你的Angular项目中安装Swiper组件库。可以使用npm命令来安装: ``` npm install swiper --save``` 安装完成后,你可以在你的Ionic组件中引入Swiper组件,并在模板中使用它。以下是一个简单的示例: ```typescriptimport { Component } from '@angular/core'; import SwiperCore, { Navigation, Pagination } from 'swiper/core'; SwiperCore.use([Navigation, Pagination]); @Component({ selector: 'app-swiper', template: ` <swiper [navigation]="true" [pagination]="true"> <ng-template swiperSlide>Slide1</ng-template> <ng-template swiperSlide>Slide2</ng-template> <ng-template swiperSlide>Slide3</ng-template> </swiper> `, }) export class SwiperComponent {} ``` 在上面的示例中,我们首先引入了Swiper组件库,并注册了所需的Swiper模块(例如Navigation和Pagination)。然后,在组件的模板中,我们使用`<swiper>`标签创建了一个Swiper实例,并在内部添加了三个滑动的内容块。 你可以根据你的需求自定义Swiper的配置和样式。更多关于Swiper的用法和配置,你可以参考Swiper官方文档。 希望这可以帮助到你!如果你还有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独忘机

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值