Ionic4测试版发布，带来多项重大改进！Android

写作文章的当下，已经是Ionic4和5的时代，但近期有个Ionic3的项目需要优化，而之前对Ionic和Angular都没有接触，入门过程中遇到一些概念上的疑惑，这里做些总结。

往文件写数据等功能下载插件//添加file插件ioniccordovapluginaddcordova-plugin-filenpminstall--save@ionic-native/file@4//注意ionic4

效果图：1.jpg代码实现过程：一、在高德官网注册一个开发账号：高德开放平台二、创建一个WEB端应用：gaode.png三、在src目录下的index.html引入高德js:四、HTML:五、SCSS：.map_container{width:100%;height:100%;}六、TS：import{Component,OnInit,ElementRef,ViewChild}from'@angu

幸好Angular6提供了ErrorHandler来处理异常（Ionic4为IonicErrorHandler），默认的ErrorHandler处理异常是将其输出在console上，这显然不能满足需求，

ionic4还是蛮让人心动的，但是android兼容性问题还是有待观望。

解决ionic4使用手势时影响正常滑动功能1.添加HammerConfigimport{HammerGestureConfig}from'@angular/platform-browser';declarevarHammer

"@ionic/angular":"^4.5.0",此版本下监听安卓返回键时会失效更换成4.6.0就可用

一：页面报错RuntimeErrorUncaught(inpromise):invalidlink:ipserach说明页面引用出错解决办法1查看页面module.ts里面是否有export2查看在app.component.ts里是否已经引入该页面3尝试重启服务RuntimeErrorUncaught(inpromise):invalidlink:ipserachError:Uncaught(i

最近在做ionic4的app项目，遇到上传图片和拍照已经处理，上传本地文件还碰到了一些小问题。

1.可以直接运行，打包apk2.组件UI中Properties对应@Input；Events对应@output；Method对象@ViewChild(IonTabs)tab,tab.select()调用组件内部的方法也可以设置组件内部的属性；还有一些元素属性slot（位置）；3.iconname内置一些svg4.css内部为Sass主要通过定义css变量改变组件样式定义Theme样式

步骤条是个很常用的组件，最开始是我自己写，插件没写成倒写了一坨x，后来在群里有位大佬看见了我的需求，他开始写了一个ionic2+的插件（HsuanXyz/ionic-stepper）对我帮助很大，非常感谢；后来出现了NG-ZORRO的steps，我试过之后发现每一步嵌入form表单提交很不好处理；再后来又发现AngularMaterial的进步器，每一步都是单独的按钮，对表单提交互不影响；将来NG

组件经常使用，一直不觉得有多难，直到昨天给一个做ionic4开发的人怎么也说不明白，干脆总结一下，拿去直接用。新建组件share，使用命令nggxxx，怎么知道的？

因为业务需要,需要用到tts播报中文语音,但是目前插件库能搜到的tts插件几乎全是英文的(因为谷歌安卓系统本身的问题),所以只能自己借助中文tts语音包编写插件.目前插件已经更新到插件库,本人在ionic4

使用Ionic和Angular构建iOS、Android和Web应用程序使用Angular、Capacitor和Ionic框架（Ionic4+）构建原生iOS和Android以及渐进式Web应用程序使用

我们知道,在ionic的日常开发中,绝大部分调试我们都可以在浏览器上实现,但是部分功能则是浏览器无法支持的,比如一些不同版本手机上的样式兼容性,js兼容性,以及一些原生插件的调试等等问题,尤其是使用了ionic,因为在编译后,ts文件已经全部被编译成js,可读性极差,也不方便我们去调试自己的代码,那这个时候,我们就好考虑做真机调试了,那么我们要怎么去做这个事呢?下面我们就来简单讲下怎么去做调试.一

---写在前面：最近要搞一个app的商城，准备用ionic，之前用过apicloud感觉开发体验不是太好，我是用vue写的写完之后借助apicloud进行打包签名发布还用到里面的一些原生的功能。然后去了ionic的官网发现升级到4.x了路由用的ng的，感觉更像写ng了废话到此为止上代码1在app.module.ts先引入BrowserAnimationsModule，注入到importsimpor

ionic4官网https://beta.ionicframework.com/docs/ionic3钩子函数ionViewDidLoad第一次调用返回voidionViewWillEnter每次调用返回

ionic4不配置代码的时候android自带的返回键是没有效果的。

在ionicandroid平台出现以下错误可能是版本导致的问题降低版本[email protected]

一、angular2基本语法ionic使用了google公司的angular作为前端框架。需要注意的是，由于版本更新，目前angular专指angular2.x以后的版本，而angularJS则是指angular1.x版本。这两个版本属于完全不同的框架，angularJS使用的是javascript语言，而angular则是使用的微软开发的typescript语言。Angular2.x使用的是es

但是发现，ionic已经升级到了ionic4版本，但ionic4跟ionic3差别还挺大的，所以我还是选择用熟悉的ionic3来接着做项目。

接到个新的需求,需要与其他app之间实现单点登陆,需要用到应用跳转,Google了下找到了ionic可以使用的urlscheme插件https://github.com/EddyVerbruggen/Custom-URL-scheme.git一、在使用前先简单了解下什么是urlcheme:简单的说，URLScheme就是一个可以让app相互之间可以跳转的协议。列如：微信的URLScheme就是we

在学习Ionic4的时候，我给自己找了个项目：一个简单的数独游戏。

一：在跳转前页面//html中添加事件跳转今目标页面//ts中click(){this.router.navigate(['jingoal'],{queryParams:{page:'today'}});}二：在接收参数页面ts中//导包import{ActivatedRoute,Params}from'@angular/router';//定义变量接收参数publicpage:string;//

ionic4中没有提供这个配置，这里提供一个解决办法：通过监听路由，判断当前页面层级，从而实现隐藏tabs。

首页的制作因为项目从简，所以，整体内容也不多，这里首页只放如下几个内容：标题数独游戏按钮设置按钮关于按钮同时，把相应的页面先创建好。创建页面由于home页面已经有了，就不再生成了，生成数独页面：ionicgeneratepagesudoku上方是完整写法，也可以简写，分别创建设置和关于页面：ionicgpagesettingionicgpageabout如果直接输入ionicg，Ionic提供了一

一、知识讲解本文基于ionic4+cordova构建android应用，首先做一下以下的知识梳理。1ionic是一套用于开发混合手机应用的开源h5框

这是我写的第一篇文章，算是笔记吧，主要也是官网上的内容，如果有人官网上没看很明白那么可以往下看看参考参考，有不对不理解的地方欢迎批评指正：1、首先最基本的准备一台苹果笔记本吧，因为在mac以外的系统是不能做苹果app开发的，当然你可以在window上安装个虚拟机配上mac系统，我这么干过，可能是我电脑配置比较低，不过也有4核8线程16g内存了，还是啥的其它原因，总之很卡，很难受，最后狠下心买了苹果

最近看了看ionic4的相关文档，初步总结一下。

刚开始打算一周至少更新两次吧，结果半个月过去了还没写第二篇，哎，废话不多说……前面环境都搭建好之后，就开始创建项目了，在ionic4里面跟ionic3创建项目的时候还是有点不一样的1、ionicstartmyApptabs

使用ionic4+angular8框架开发app在ios端使用如下代码获取时间毫秒数,控制台打印显示NANnewDate("2021-02-0300:00:00").getTime()android端显示正常

操作系统：win10一、卸载之前的ionic、npm、NodeJS等因为之前版本是ionic3npm出问题了，用命令卸载不掉，所以暴力卸载1.删除npm文件夹和npm-cache2.卸载NodeJS二、安装NodeJS、npm、ionic、Cordova下载安装：地址安装NodeJS后，命令升级npm，命令安装ionic、Cordova安装命令参考地址npminstsllnpmnpminstall

1.创建AppionicstartmyApptabs2.添加平台给App添加目标平台，我们将会添加'ios'和'android'平台，并确保他们保存在了config.xml中ioniccordovaplatformaddios--saveioniccordovaplatformaddandroid--save检查你当前平台设置状况：ioniccordovaplatformls3.打开手机开发者模式

ionic-angularionicstartionic1blank--type=ionic1(安装ionic1项目)ionicstartionic3blank--type=ionic-angular(安装ionic3项目)ionicstartionic4blank

ionicbuild--prod--enginebrowser这个是打web包的命令，在打移动端的包之前，最好先运行一下这句，可以减小包的大小，避免出现的进入页面加载巨慢的情况安卓debug:ioniccordovabuildandroid--prod安卓release:ioniccordovabuildandroid--prod--releaseiOS:ioniccordovabuildios-

一、安装ionic及[email protected]更新命令npmupdate-gcordovaionic安装特定版本[email protected]@1.6.5删除命令npmuninstallcordova-gnpmuninstallionic-g

在我们用ionic4进行app的开发需要使用类似以下的功能：我们在点击事件时加载的是页面在ts文件的presentPopover()的内容如下：需要导入PopoverController模块import

在ionic4的页面上写弹框时需要引用，但是写了以下代码却报错了，错误为，找不到模块‘angular-ionic’import{AlertController}from'ionic-angular';这是因为

最近项目有个需求是需要做一个工作日历，官方的calender控件不太满足需求，HTML，css和typescript写了一个，修改样式比较简单，效果如下：html：日一二三四五六{{day.day}}css：.app-common-bg{position:relative;width:100%;}.calendar-table-item{padding:5px;width:14.28%;float

ionic4-传递参数环境node10.15.0ionic4.12.0cordova9.0#platformscordova-android：8.0.0cordova-ios:5.0.0欢迎访问我的专栏

cordova-plugin-statusbar-状态栏node10.15.0ionic4.12.0cordova9.0#platformscordova-android：8.0.0cordova-ios

ionic4简介欢迎访问我的专栏：ionic4混合开发实战-csdnionic4混合开发实战-简书IonicFramework是一个开源的UI工具包，用Web技术（HTML，CSS和JavaScript

cordova-plugin-ionic-webviewnode10.15.0ionic4.12.0cordova9.0#platformscordova-android：8.0.0cordova-ios

cordova-plugin-splashscreen-启动页node10.15.0ionic4.12.0cordova9.0#platformscordova-android：8.0.0cordova-ios

ionic4-Plugin(插件)开篇欢迎访问我的专栏：ionic4混合开发实战-csdnionic4混合开发实战-简书前言说到插件，不得不提到ionic框架实现app的方式，在Capacitor未出现之前

cordova-plugin-devicenode10.15.0ionic4.12.0cordova9.0#platformscordova-android：8.0.0cordova-ios:5.0.0

react体系、loadash、zepto库3、可视化canvas、echart、地图、webgl、d3.js、three.js4、跨平台flutter、react-native、weex、electron、ionic45

目录一、概述二、ngOnInit三、constructor四、总结一、概述Angular中根据不同场景定义了很多生命周期函数，本质是事件的响应函数，其中最常用的就是ngOnInit。而constructor是TS和ES6中定义的构造函数。二者含义有重复部分，所以开发中经常将它们混淆。二、ngOnInitngOnInit是Angular生命周期的一部分，用于初始化指令/组件。ng

https://github.com/nuonuoge/ionic4_angular6_elm欢迎star效果如图：