官网链接:angular typescript ionic3
Ionic项目
- 创建项目: ionic start Demo blank --type=ionic-angular (如果要创建旧版本ionic的项目:参考路径http://www.ionic.wang/article-index-id-139.html
- 删除node_modules,然后npm install
如果出现报错网络连接失败,则设置淘宝镜像地址:npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist
yarn config set registry https://registry.npm.taobao.org yarn config set disturl https://npm.taobao.org/dist
- ionic serve (如出现node版本对应问题,请参照对应版本修改,可使用nvm install 版本,nvm use 版本。重新下载cordova和ionic. 然后ionic serve启动
使用VSCode时,执行命令出错: 解决办法,让VSCode里从powershell变为cmd,参考链接 外部访问本地浏览器:ionic serve --external - 配合cordova使用
- 添加(移除)Android/IOS平台
ionic cordova platform add android/ios
ionic cordova platform rm android/ios - 添加(移除)插件
ionic cordova plugin add ……
ionic cordova plugin rm ……
查看插件列表 cordova plugin ls - 打包
ionic cordova build android/ios --release(不输入release默认是debug包)
ionic cordova build android/ios --prod(–prod指打压缩包,此命令为打debug压缩包)
附加:通过ADB命令实现App的安装、卸载、覆盖 ,我在覆盖安装的的时候发现了我覆盖安装的包签名不同,所以不能覆盖安装,报错信息很nice.
cordova-android@9.1.0的9.1.0是Android版本。Android target后边android-29是指Android SDK版本,注意版本匹配。
- 其他命令可以执行ionic cordova –help参看
- 新建页面 ionic g page 页面名称(新建不带.module.js文件的命令: ionic g page 页面名称 --no-module)
- ionic 6 实现SQLite增删改查功能,官方链接
[1] ionic cordova plugin add cordova-sqlite-storage
[2] npm install @awesome-cordova-plugins/sqlite
[3] 然后ionic serve,在这里我出现了问题
typescript:
…/Demo/node_modules/@awesome-cordova-plugins/sqlite/ngx/index.d.ts,
line: 1 Cannot find module ‘@awesome-cordova-plugins/core’. import {
AwesomeCordovaNativePlugin } from ‘@awesome-cordova-plugins/core’
然后运行npm install @awesome-cordova-plugins/core然后报错
typescript:
…workspace/Demo/node_modules/@awesome-cordova-plugins/core/decorators/common.d.ts,
line: 18 Cannot find name ‘unknown’. L18: ction
wrapPromise(pluginObj: any, methodName: string, args: any[], opts?:
CordovaOptions): Promise;
然后找到对应位置 把unknown改掉成any,然后运行ionic serve 这个时候浏览器控制台输出.then undefined(参考链接:https://stackoverflow.com/questions/54857845/ionic-4-sqlite-cannot-read-property-then-of-undefined-error), 然后运行ionic cordova run browser -l提示npm i -g native-run,然后按照要求npm i -g native-run,然后运行ionic cordova run browser -l成功创建数据库+表
Angular ionic项目生命周期
constructor,ionViewCanEnter,[ngDoCheck,ngAfterContentInit,ngAfterContentChecked,]ngAfterViewInit,[ngAfterViewChecked],ionViewDidLoad,[ngDoCheck,ngAfterContentChecked,[ngAfterViewChecked],]ionViewWillEnter,ionViewDidEnter,ionViewWillLeave,ionViewDidLeave,ionViewWillUnload,ngOnDestroy
注意问题及解决办法:
[1]. 误操作导致:Cannot load Cordova config 问题
解决办法: ionic integrations enable cordova --add
[2]. ionic打包报错Execution failed for task ‘:compileDebugJavaWithJavac’
解决方案:
ionic cordova platform remove android (卸载)
ionic cordova platform add android@6.3.0 (安装)
[3]. cordova-plugin-telerik-imagepicker 插件无法安装。
Error: cordova-plugin-telerik-imagepicker cannot be added. <edit-config> changes in this plugin conflicts with <edit-config> changes in config.xml. Conflicts must be resolved before plugin can be added
解决方案:安装低版本的
ionic cordova plugin remove cordova-plugin-telerik-imagepicker(卸载)
ionic cordova plugin add cordova-plugin-telerik-imagepicker@2.3.3。(安装)
[4]. ionic cordova打包报错FileTransfer.java:49: 错误: 程序包org.apache.cordova.file不存在
.warning: string 'discard' has no default translation.
warning: string 'done' has no default translation. Execution failed for task ':compileDebugJavaWithJavac'.
error: package org.apache.cordova.file does not exist
解决方案 :
cordova plugin remove cordova-plugin-file-transfer(卸载)
cordova plugin add cordova-plugin-file-transfer@1.6.3(安装)
安装完成重新build成功
(@呵粑粑牛 提供的遇到的异常及解决方案)ionic cordova打包报错FileTransfer.java:49: 错误: 程序包org.apache.cordova.file不存在
解决方案:
cordova plugin remove cordova-plugin-file-transfer --force //卸载
cordova plugin add cordova-plugin-file-transfer@1.6.3 --force //安装
[5] ImagePicker浏览器报错cordova is not available,打包以后模拟器运行以后连接Android Studio报错Not allowed to load local resource
新的插件:cordova-plugin-ionic-webview @ 2.x似乎不稳定
解决方案 :
uninstall webview: ionic cordova plugins rm cordova-plugin-ionic-webview
install old version: ionic cordova plugins add cordova-plugin-ionic-webview@1.2.1
clean cordova cache: cordova clean android
[6] (android@9.0平台下的)Task :app:processDebugManifest FAILED错误,然后仔细看下边如果有
Element uses-feature#android.hardware.location.gps at AndroidManifest.xml:49:5-90 duplicated with element declared at AndroidManifest.xml:44:5-66元素重复错误
删除AndroidManifest.xml文件的 <uses-feature android:name="android.hardware.location.gps" />
[7] ionic打包的时候报错Build-tool 34.0.0 is missing DX at xxx\Android\Sdk\build-tools\34.0.0\dx.bat, Installed Build Tools revision 34.0.0 is corrupted
解决方案链接