Ionic 开发之 Ionic Storage 详解

Ionic Storage 是一款基于 localForage 用于 Ionic 应用程序的简单 “键-值” 存储模块，支持 SQLite 开箱即用。 在实际开发中，如果你想执行任意 SQL 查询，你可以直接使用 Ionic Native SQLite 插件。 接下来，我们先来介绍一下 Ionic Storage 的安转与使用。 安装与使用 首先，如果你想使用 SQLite，请先安装 cordova-sqlite-storage 插件： $ ionic cordova plugin add cordova-sqlite-storage 接下来，安装 @Ionic/storage： $ npm install --save @ionic/storage 然后，导入 IonicStorageModule 并把它添加到根模块 NgModule '; import { Storage } from '@ionic/storage'; @Component({ selector: 'page-home', templateUrl: '

最新ionic-cli创建ionic3而非ionic4的项目

在ionic CLI v4.8.0版本创建项目时，会询问是创建ionic3还是ionic4项目，然而更新到 ionic CLI v4.10.2(latest)时，这个询问提示消失了，直接默认创建ionic3 项目，而且看参数是没有创建ionic3项目支持的，于是，我上Github发了个issue： How to create ionic3 project by ionic CLI v4.10.2(latest ) 结果ionic团队还是挺给力的，马上作出回复，并一天就解决并发布了新版本，详情进上面链接看。 所以我们想创建ionic3项目可以这样做，先升级ionic-cli到最新版本： npm i -g ionic 此时显示版本为ionic@4.10.3了，然后试着创建项目： ionic start tabTest --type=ionic-angular 命令完成后就发现是ionic3项目了。

ionic创建过程

1.创建ionic项目 在命令提示符下运行命令 ionic start appName tabs    注：blank  --空项目          tabs  --底部栏          sidemenu 侧滑栏 2.添加平台 创建成功后，cd 进入到项目的根目录下，运行命令 ionic cordova platform add android （ios版本的就是ionic cordova platform add ios） 3.编译 运行命令 ionic cordova build android  --release 编译成功后会在项目下的platforms/android/build/outputs /apk里面生成生成默认名字为android-release-unsigned.apk的release版本apk文件 （要使用jarsigner签名必须用release版本） 解决ionic3打包后启动慢的问题 ：ionic cordova build android --prod --release 4.生成keystore文件（签名的时候需要用到这个keystore文件） keytool是JDK自带的加密工具

Ionic4与Ionic3部分比较

有较长时间没有用Ionic了，见新的公众号需求比较简单，便决定使用Ionic4来实现。 其实，Ionic2和Ionic3的差别不大，而ionic4则变化比较大了，它支持angular、vue、react或其它任意js框架，甚至不使用js框架，它更像一个纯粹UI库。 一、项目差异 那现在来看看怎么用ionic4，首先，我们还是以传统的angular来使用之： ionic start <name> <template> [options] 而示例命令有： ionic 不带参数创建的是ionic3项目)： ionic start myApp tabs --type=angular 当然也可以用angular-cli创建普通Angular项目，然后npm添加@ionic 变化还是蛮大的，旧的ionic3项目不太适合升级为ionic4，至于还学不学得动，自己考量吧，我觉得用vue+ionic4也是挺好玩的。

Ionic3 Start

本文是Ionic3系列的第一排你文章，主要介绍开发环境的搭建过程，之后的文章将依赖此应用，不再涉及到环境搭建方面的内容(除非是添加特性)，Ionic官方文档： ionic官网 ionic官方文档 本项目 github地址： github 地址 ionic打包成Android应用的详细教程，请参考参考以下链接： ionic3 Android打包 环境准备 node：8.x npm：5.x ionic: command-line tools 利用npm包管理器安装 ionic command-line tools npm install -g ionic 这样会安装最新版本的ionic , - 同时，利用该工具创建ionic项目的时候可以选择不同的模板，也可以选择不适用模板，只需要命令后面的一个参数即可，例如，以下命令将创建一个 带有 tabs 模板的 ionic项目，通过ionic start 对应的，还可以使用创建没有模板的应用： ionic start inStart blank 该命令会创建一个基于ionic 最新版本的应用 高本版的ionic cli还有很多非常好用的功能，比如 ionic

linux 搭建ionic 环境

下载所需呀资源的序号，比如3 是 buildtoolsVersion 28.0.3,47是 platform 8.1.0

ionic-Modal 原

import {NavController,LoadingController,AlertController,ToastController,ModalController } from 'ionic-angular ion-toolbar> <ion-content padding></ion-content> ts页面 首先引入ViewController import {ViewController} from 'ionic-angular

左手Ionic，右手年华

虽然Ionic1基本摸透了，但是它还是有一定学习成本，为了团队建设考量，等Ionic2出来后，我们犹豫了一下是否沿用Ionic1，也比较了一下其它移动端js框架，最后还是敲定了升级使用Ionic2。 ---- 新欢与旧爱 随着Ionic4的推出，自己也较早时间去踩坑，从去年中创建第一个Ionic4项目开始到现在，指导开发了几个Ionic4项目，可以确切地说，Ionic4已经稳定了（仅限于Angular Ionic4替代Ionic3来开发。 其实如果Ionic3时，是采用Ionic4的技术线条，而Ionic4是下一个新的技术，那一定比现在更成功。 一些从Ionic3过渡到Ionic4的人仍旧以Ionic3的思维去做开发，抱怨这个Ionic3可以，怎么到Ionic4不行？

ionic入门之AngularJS扩展

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows ionic主要包括三个部分： CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。 由于ionic使用了HTML5和CSS3的一些新规范，所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。 ionic.js : 指令 ionic.js对AngularJS进行了扩展，它的主要贡献是将移动端开发中常见 的UI组件抽象成AngularJS的指令，便于我们可以在HTML开发中快速应用。 </ion-tab> </ion-tabs> ionic.js实现的指令基本覆盖了移动端开发所需，下面的图可以帮助我们快速简要地了解 ionic.js的能力： ?

开发hydride App 安装ionic

安装完cordova之后，其实这个时候就可以创建一个web app了，具体的做法我就不说了，网上很多，我们需要去使用ionic　开发hydride　ａｐｐ　所以我们这时候需要去安装ionic　　命令行也很简单的 　　　ｎｐｍ　ｉｎｓｔａｌｌ　－ｇ　ｉｏｎｉｃ 如果顺利也很快的，基本不会报什么错误 ? 安装完成之后你可以去看看：ionic　－ｖ　查看版本号，如果提示ｉｏｎｉｃ不是内部命令，那么你安装失败了，再重新来一次吧 ９.　 安装完成之后，就是开始做用ionic　命令来做一个项目了　命令行也很简单，就是第一次执行的时候千万别断网了，时间比较漫长，因为要下真多东西，反正他自己就在那里慢慢的运行，你看着就行 ? 照着这个来就行了，如果是浏览器运行　就键入命令：ionic　ｓｅｒｖｅ　　就行了 ? ? ? ? ? 就到此为止吧，不懂的留言　　成功安装一次之后就很简单了，

ionic-navigation 原

/ion-list> </ion-content> import {Component} from '@angular/core'; //import {NavController} from 'ionic-angular '; import {NavController} from 'ionic-angular'; import {NavigationDetailsPage} from '.. </ion-content> //详细页面的ts文件 import {Component} from '@angular/core'; //import {NavController} from 'ionic-angular '; import {NavController, NavParams} from 'ionic-angular'; @Component({ templateUrl: 'build/pages

ionic3 + 实用

var tabs = document.getElementsByClassName('tabbar').item(0); tabs['style'].display = 'flex'; } ionic 创建页面 ionic g page newPage ionic 跳转懒加载页面 原跳转方式 this.navCtrl.push(LoginPage) 懒加载跳转方式 this.navCtrl.push ('LoginPage') ionic 跳转页面loading加载 封装 编写插件，代码如下： import { Injectable } from "@angular/core" import { LoadingController } from "ionic-angular" @Injectable() export class LoadingProvider { constructor( public loadingCtrl

ionic 头部内容 尾部

引入  ionic 的css js 和angularJS 这三个文件 头部写法 <ion-header-bar align-title="center" class="bar-positive">

ionic中的$inoicModal

ionic中的模态窗口 在ionic中，除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】 其次在ionic中，还有一种新的弹窗，这样的弹窗，会占据整个页面，成为模态窗口 /div> </script> 在Angular的控制器中，就可以初始化这个模态窗口，并且定义函数来进行显示、隐藏、删除的控制 var app = angular.module("myApp", ["ionic button-clear" ng-click="openModal()">显示模态窗口</button>

页头标题

ionic中的$inoicPopover

ionic中的浮动框$ionicPopover 用ionic也有一段时间了，今天说一下它里面提供的一个小组件：浮动框 浮动框的使用在移动端的项目中已经很少了，只有在少数的一些特殊情况下才会出现。 在这里我们简单说一下浮动框的使用方式，仅供大家参考 浮动框的初始化 在控制器中注入$ionicPopover服务，通过如下的代码进行浮动框初始化 var app = angular.module("myApp", ["ionic

ionic cordova resources问题说明

ionic cordova resources是用于一键打包生成各分辨率icon和splash的命令，在使用过程中可能会遇到以下问题： 1. : 'No user found by that email', type: 'NotFound' } 原因说明及解决方法 是因为原来ionic legacy的账号转换到了ionic pro上，而使用旧的接口就会访问不到 : Note: The legacy Ionic Cloud dashboard was sunset on February 1, 2018. Bug），这时可以回滚回legacy后再切换到pro： ionic config set backend legacy -g ionic config set backend pro -g 备注说明 参考自下面链接 ，先前使用后没放在心上，使得另一部机子遇到同样问题找了半天，遂记录下来：https://stackoverflow.com/questions/45885432/ionic-cant-login-request-post-https-api-ionic-io-login-no-user-found-by-that

Ionic3 Android打包

所谓的Anrdoid打包，就是将ionic项目打包成一个可以安装在Android系统上的apk文件，打包的时候，使用的是cordova工具，不过在此之前，需要一些准备工作：配置JDK、Android SDk还有各个android版本包的下载，最重要的是需要成功的创建了一个Ionic项目，有关ionic项目创建的详细教程，请参考以下文章： Ionic3 Start 配置JDK 主要就是以下流程 添加IOS平台需要在MacOS上操作，本文也仅是介绍将ionic项目打包成Android应用，因此不涉及到打包IOS的内容。 添加平台通过cordova工具添加，新版本和老版本的命令会有一些区别，以新版本为准： ionic cordova platform add android 该命令用于向当前应用添加 android 有关于Android 模拟器调试和真机调试的具体教程，请参考以下文章： Ionic3 Android 调试

Ionic3 表单处理

在项目中，可以使用angular中的 @angular/forms模块处理表单，但是并不需要在app.module中引用@angular/forms模块，因为在app.module中已经引入了@angular/platform-browser模块，而在@angular/platform-browser模块中又导出了 @angular/forms 。也就是说，引入@angular/platform-browser模块之后就可以直接使用@angular/forms模块中提供的组件等内容。

Ionic编译过程的研究

[记录点滴]Ionic编译过程的研究 0x00 摘要 之前研究Ionic编译过程的笔记，发出来做个记录。当时是因为有些图片没有拷贝到应用中，所以需要调试编译过程。 version build check_reqs.bat defaults.xml log.bat run version.bat 对应的命令就是ionic 因为这里都是js文件，所以可以用console.log()等函数打印log， 然后把编译过程输入到文件中看，比如ionic build android > log.txt， 命令执行结束之后，看log.txt ==== cordova lib prepare =================destination： " + destination); .... } 第三步，执行看看log C:\>ionic English (UK)"], "values":["en-us","en-gb"]} android preferences file was successfully generated C:\>ionic

Ionic3 Android签名

image.png 以下是在命令行下，ionic 安卓app签名步骤 准备工作 keytool：该工具位于jdk安装路径的bin目录下； jarsigner：该工具位于jdk安装路径的bin目录下 在开发ionix项目是，使用默认命令(ionic cordova build android)打包出来的是debug apk文件。 要打包 release 版本的apk文件，只需要在后面加一个 --release 参数即可： ionic cordova build android --release 执行该命令后，会在 ionic