ionic3学习笔记

一、钩子函数

ionViewDidLoad 第一次调用返回void

ionViewWillEnter 每次调用返回void

ionViewDidEnter 每次调用返回void

ionViewWillLeave 每次调用返回void

ionViewDidLeave 每次调用返回void

ionViewWillUnload 每次调用返回void

ionViewCanEnter 每次调用返回boolean

ionViewCanLeave 每次调用返回boolean

二、创建

ionic g page YourPageName //创建新页面
ionic g directive YourPageName //创建指令
ionic g component YourComponentName //创建组件
ionic g provider YourProviderName //创建服务
ionic g pipe YourPipeName //创建过滤器

自定义组件
1.ionic g component yourComponetName
2.在app.module.ts里的imports声明
3.在使用自定义组件的module.ts中引入compenentsModule文件并在imports添加compenentsModule

自定义过滤器
1.ionic g pipe yourPipeName
2.在使用过滤器的module.ts中引入pipes.module.ts文件，并在import添加pipes.module.ts的名字
3.不能在app.module.ts中引入pipe文件否则会重复报错

三、禁止横屏

1.安装插件
ionic cordova plugin add cordova-plugin-screen-orientation
2.在config.xml文件中添加
<preference name="Orientation" value="portrait" />

四、创建项目和打包

1、创建项目

1）npm install -g ionic@latest

2）npm start projectName tabs(blank tabs sidemenu super tutorial)//blank:空白 tabs:简单的三个选项页 sidemenu:有侧边栏布局 super:有超过14个开发页面 tutorial引导式启动项目

3）cd projectName

4） ionic serve

2、打包

1）安装corodva

npm install -g cordova

2）添加平台

cordova platform add android/ios

3）在真机上运行

ionic cordova run android/ios --prod --release

五、ionic3生成二维码

1.npm install angular2-qrcode --save

2.在使用页面的module中添加 import { QRCodeModule } from 'angular2-qrcode'，以及在imports添加QRCodeModule

3.在html中添加 <qr-code [value]="'All QR Code data goes here!'" [size]="150"></qr-code>

六、cordova build android 报错

错误1:processDebugResourcesC:\Users\suyun\.gradle\caches\transforms-1\files-1.1\appcompat-v7-23.4.0.aar\5ae564cae42bc9893a31775808c42e8a\res\values\values.xml:102:5-69: AAPT: error: resource android:attr/fo

ntVariationSettings not found.

C:\Users\suyun\.gradle\caches\transforms-1\files-1.1\appcompat-v7-23.4.0.aar\5ae564cae42bc9893a31775808c42e8a\res\values\values.xml:102:5-69: AAPT: error: resource android:attr/ttcIndex not found.

解决方案：

在platform 下的 build.gradle 中找到 dependencies对象，在后面添加：

configurations.all {

resolutionStrategy.force 'com.android.support:support-v4:26+'

}

错误2：
* What went wrong:
Execution failed for task ':transformDexArchiveWithDexMergerForDebug'.
> com.android.build.api.transform.TransformException: com.android.dex.DexException: Multiple dex files define Lorg/apache/cordova/BuildHelper;
错误由于文件有冲突引起，解决方法：
找到platforms/android/CordovaLib/src/org/apache/cordova下的BuildHelper.java文件删除掉即可

错误3：
* What went wrong:
Execution failed for task ':transformDexArchiveWithDexMergerForDebug'.
> com.android.build.api.transform.TransformException: com.android.dex.DexException: Multiple dex files define Lorg/apache/cordova/PermissionHelper;
错误由于文件有冲突引起，解决方法：
找到platforms/android/CordovaLib/src/org/apache/cordova下的PermissionHelper.java文件删除掉即可

七、websock推送

1）安装sockjs-client

npm install sockjs-client --save

2）安装stompjs

npm install stompjs --save

3）示例代码

import { Injectable } from '@angular/core';
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import { Util } from '../util/utils';

@Injectable()
export class Sock {

  web_sock:any = {};

  constructor(private util: Util){}

  subscribe (url, $id, callback) {
    let options = {},
        socket = new SockJS(this.util.wsUrl + "/ws"),
        stompClient = Stomp.over(socket);

    stompClient.connect(options, (frame)=> {
      this.web_sock[$id] = stompClient.subscribe(url, callback);
    });

  };

  //取消订阅
  unSubscribe ($id) {
    if(!this.web_sock[$id]) return;
    this.web_sock[$id].unsubscribe();
    delete this.web_sock[$id];
  };
}

八、常用Cordova插件

1.图片选择器："cordova-plugin-telerik-imagepicker": "^2.1.8"

2.相机："cordova-plugin-camera": "^2.4.1"

3.禁止横屏："cordova-plugin-screen-orientation": "^3.0.1"

4.app最小化："cordova-plugin-appminimize": "^1.0.0"

5.微信："cordova-plugin-wechat": "^2.1.0" // wechatId：wx23af94efcfef7261

　　安装方法：cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID

6.支付宝：cordova-plugin-alipay // alipayId：2017111309912008

　　安装方法：cordova plugin add https://github.com/ejiyuan/cordova-plugin-alipay.git --variable APP_ID=[your AppId] --variable SANDBOX_MODE=[true]

7.当前位置："cordova-plugin-geolocation": "^2.4.3"

8.地图导航："cordova-plugin-mapnavigator": "^1.0.5"

9.极光推送："jpush-phonegap-plugin": "^3.1.0"

10.app版本：cordova-plugin-app-version

11.检测网络："cordova-plugin-network-information": "^1.3.4"

12.复制粘贴："cordova-clipboard": "^1.1.1"

13.扫二维码：cordova plugin add gizscanqrcode

14.修改app名字：cordova-plugin-app-name //ionic1上需要安装, 安装方法：cordova plugin add cordova-plugin-app-name --variable APP_NAME= XXX

九、其他

1.解决点击延迟问题：添加tappable属性

2.Xcode 调用百度地图的设置

在LSApplicationQueriesSchemes中添加两个item： baidumap 和 iosamap

3.添加popover

1）添加新页面可用ionic g page name，去掉module.ts

2）在app.module中定义popover

3）在ts中引用

4.关于Android中键盘弹起顶起页面的问题

1.在config.xml中添加
<preference name="android-windowSoftInputMode" value="adjustPan" />
2.在platforms的AndroidManifest.xml中找到windowSoftInputMode，将其值改为adjustPan

5.常用指令

1）*ngIf=‘true or false’

2）*ngFor='let a of arr'

3）(click)='todo()'

4）(input)='watch_input()'

5）(ngStyle)='{'background':true}'

6）(ngClass)='{'className':true}'

7）[(ngModel)]='username'

8）[innerHtml]='html'

6.ios11版本调用相机闪退
Privacy - Photo Library Additions Usage Description value：应用需要保存图片

posted @ 2018-03-04 22:16 码农1213 阅读(314) 评论(0) 编辑收藏举报

刷新页面返回顶部

码农1213

ionic3学习笔记

公告