Ionic4 cordova混合开发的开发调试环境搭建

Ionic4混合开发首选应该是capacitor,但capacitor刚推出不久还不够成熟,所以选择使用传统的cordova方式开发。基本上,Ionic native5和之前版本使用方式上变化不大,但cli有些选项上有些区别。1.创建platform添加android平台ionic cordova platform add android删除android平台ionic cordova platform remove android2.编译ionic项目源文件到www目录只有在Android studio中运行调试ionic项目才需要执行cordova的prepare命令,用于ionic源代码被修改之后,更新Android studio中相应的原生项目。ionic cordova prepare android如果要编译release版本,可以添加参数:ionic cordova prepare android –release –prod3.ionic模拟器或者真机调试以下命令在模拟器上运行app,最好在运行命令之前启动模拟器。ionic cordova emulate android -l注意,原先3.x版本的–consolelogs参数在4.x版本已经不支持,至少在4.1版本不支持,也不知道以后是否会支持。因此,调用console.log等方法输出到浏览器控制台的信息,无法通过ionic输出到命令行。要查看console.log等方法输出到浏览器控制台的信息,目前只能进入模拟器的Extended controls窗口的Bug report选项卡,然后在Bug report data下方窗口复制日志信息到记事本中,然后查找"SystemWebChromeClient"或者"I chromium"定位console信息。这个方法比较麻烦,所以建议采用第4步的方法,使用Android studio调试app。连接真机运行调试app的cli:ionic cordova run android -l4.在Android studio中运行调试ionic项目(真机或者模拟器调试)如果项目之前曾经使用ionic在模拟器和真机上调试运行,Android studio导入项目可能会失败,此时需要用ionic cordova platform remove android删除android平台,然后再次使用ionic cordova platform add android添加。运行Android studio,导入项目platformsandroid,可能会提示配置gradle.wrapper,点击确定。配置过程中,可能会发生build失败,提示gradle版本过高,可以点击自动修改配置。然后还可能出现android sdk版本缺失,可以按照提示下载安装android sdk。点击 Run/Edit configurations菜单,点击+号,添加一个android app配置;在Gerenal选项卡的Module下拉框中选择app,点击确定创建配置。然后可以运行或者调试配置。之后修改ionic源代码,只需要重新执行第2步的ionic cordova prepare命令,就可以同步到android studio项目。调试之前,最好先把模拟器运行起来,运行模拟器之前最好wipe data。在下方的Logcat窗口中,筛选框中输入 I/chromium,可以查看ionic项目中调用console.info/debug等方法输出到浏览器console中的消息。真机调试时比较有用。

March 27, 2019 · 1 min · jiezi

Angular/Ionic安装配置汇总

一、NodeJSAngular和Cordova/Ionic都使用cli工具开发,因此必须先安装最新版本的NodeJS。NodeJS里面包含npm包管理器,而Angular/Ionic本身和程序依赖的库和框架都是npm包,要进行Angular/Ionic开发首先需要安装npm包管理器。NodeJS的官网下载页:https://nodejs.org/en/download/安装NodeJS的时候把npm一起安装就可以。也可以安装yarn,下载依赖包的速度和稳定性会提升很多。可以参考 https://yarn.bootcss.com/二、使用npm的淘宝镜像直接下载npm库会很慢,很多时候会不成功。国内用户可以使用淘宝的npmjs.org镜像,加快下载速度。淘宝镜像的官方使用说明在:https://npm.taobao.org/官方的建议是安装cnpm代替npm,或者添加一个叫cnpm的别名。另一个方法是不使用cnpm,而是修改npm的默认镜像:npm config set registry http://registry.npm.taobao.org/如果想修改回默认的版本,可以这样:npm config set registry https://registry.npmjs.org/用 npm get registry 可以查看现在使用的是哪个镜像。如果安装了yarn,可以这样设置镜像:yarn config set registry http://registry.npm.taobao.org/三、Angular安装npm install -g @angular/cli可参考官网:https://angular.cn/guide/quic…cli命令可以参考:https://angular.cn/cli四、Ionic4安装安装cli: npm install -g ionicIonic cli的文档:https://ionicframework.com/do…Ionic Native提供使用Angular风格调用原生组件的方法。Ionic native的文档:https://ionicframework.com/do…五、Ionic3安装1.安装Ionic和Cordova的CLInpm install -g ionic cordovanpm可以先安装或者配置淘宝镜像。2.新建项目在命令行中,进入项目目录的上级目录,然后执行 以下命令:ionic start TestIonic tabs其中,TestIonic是项目名,也是目录名,命令执行成功后,会自动在当前目录下创建一个名叫TestIonic的子目录,就是新建项目的目录。后面的tabs表示新建项目的模板,tabs模板3个tab的布局,也可以使用其他官方模板:tabs : a simple 3 tab layoutsidemenu: a layout with a swipable menu on the sideblank: a bare starter with a single pagesuper: starter project with over 14 ready to use page designstutorial: a guided starter project此命令可能会出现网络连接错误:[ERROR] Network connectivity error occurred, are you offline? If you are behind a firewall and need to configure proxy settings, see: https://ionicframework.com/docs/cli/configuring.html#using-a-proxy解决方案,执行以下命令配置npm代理:npm config set proxy= https://registry.npm.taobao.orgnpm config set https_proxy=https://registry.npm.taobao.org然后设置ionic的代理:npm install -g @ionic/cli-plugin-proxy添加环境变量 IONIC_HTTP_PROXY 值为代理服务器地址,比如https://registry.npm.taobao.org3.运行项目ionic serve复制地址到谷歌浏览器,然后按下F12,按左上角第二个按钮切换到手机模式,可以调试项目。4.打包打包android app,需要先安装gradle(网上说法如此,但实际编译过程中没有看到ionic使用了安装的gradle,反而自己下载了一个gradle)和android sdk,可参考https://blog.csdn.net/qq_2026…。ionic cordova build android –release –prod上面命令可以打包成为android apk,并且在输出提示中显示apk文件的位置。ionic cordova run android上面命令生成apk文件并且直接安装到安卓手机上,但安卓手机必须用usb连接PC,而且进入开发者模式,启用usb调试,并且安装的时候一般需要在手机上做确认,否则安装失败。ionic cordova emulate android上面命令生成apk文件并且安装到安卓模拟器上运行,最好先启动安卓模拟器,如果没有启动安卓模拟器,ionic会自动启动缺省的安卓模拟器。另外,上面两个命令也可以用cordova版本例如:cordova run androidcordova emulate android效率更高,不过事先必须先调用过ionic cordova build。另外,以上ionic命令都可以加上选项-lc:ionic cordova emulate android -lc选项-lc有两个作用,一个是把console.info等输出信息输出到命令行上;另一个是可以使配置文件ionic.config.json中的proxies生效。注意,-lc选项虽然可以让proxies生效,但只能用于调试,正式安装运行是无效的,需要用环境变量来控制。5.android签名运行ionic cordova build android –release –prod之后,在命令行输入以下命令:keytool -genkey -v -keystore testionic.keystore -alias testionic.keystore -keyalg RSA -validity 36500jarsigner -verbose -keystore testionic.keystore -signedjar tionic.apk app-release-unsigned.apk testionic.keystorezipalign -v 4 txx.apk txx_aligned.apk其中keytool和jarsigner是jdk的工具,需要配置jdk的path。zipalign是android sdk的工具,需要在android sdk下搜索其具体路径,但这个命令不一定需要执行,只是优化。也可以直接在cordova build中直接签名ionic cordova build android –release –prod – – –minSdkVersion=22 –keystore=testionic.keystore –alias=testionic.keystore –storePassword=123456 –password=123456 ...

March 18, 2019 · 1 min · jiezi

Ionic 环境搭建和安装教程

Ionic 环境搭建和安装教程本篇教程基于 Ionic 官方文档编写,希望对初次安装 Ionic 的你们有所帮助。环境搭建在使用 Ionic 框架之前,唯一的前提条件是 Node 和 npm 环境。当然,你同样需要一个代码编辑器。这里推荐使用 VS Code。Node & npm安装 Node.js 和 npm下载(推荐下载 LTS 版本):Node.js安装:双击下载的文件直接安装即可(npm 是和 Node 捆绑安装的,无需单独安装)验证是否安装成功:打开新的cmd窗口,输入:$ node –version$ npm –version出现版本号说明安装成功安装 Ionic CLI直接在 cmd 中输入下方命令安装:$ npm install -g ionic验证是否安装成功:$ ionic -v出现版本号等信息说明安装成功。安装 Cordova直接在 cmd 中输入下方命令安装:$ npm install -g cordova验证是否安装成功:$ cordova -v出现版本号信息说明安装成功。创建项目这里有三种最常见的启动器可供选择,分别是blank启动器,tabs启动器和sidemenu启动器。需要在指定路径中创建项目的话,使用cd进入指定路径即可,默认为当前路径。直接在cmd中输入下方命令安装:$ ionic start myApp tabs耐心等待创建完成,进入对应的文件夹即可看到创建的项目。运行项目在cmd中cd进入到刚才创建的项目文件夹(myApp)$ cd myApp使用ionic serve命令来启动项目$ ionic serve项目启动成功之后会自动在浏览器中打开

January 25, 2019 · 1 min · jiezi