欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ionic3学习之路(四)

程序员文章站 2024-03-23 13:20:40
...

ionic3学习之路(四)

learn-continue

1、ionic3-components-master
多组件项目部署步骤

1.1、新建一个项目 ionic start ionic3-components-copy blank

1.2、选择no

1.3、选择no

1.4、cd ionic3-components-copy

1.5、ionic serve正常运行

1.6、ionic cordova run android

1.7、删除新建项目的src目录

1.8、解压下载的项目

1.9、复制src目录到新建的项目中

1.10、ionic cordova plugin add phonegap-plugin-barcodescanner

1.11、npm install --save @ionic-native/barcode-scanner

1.12、ionic cordova plugin add card.io.cordova.mobilesdk

1.13、npm install --save @ionic-native/card-io

1.14、ionic cordova plugin add cordova.plugins.diagnostic

1.15、npm install --save @ionic-native/diagnostic

1.16、npm install angular2-swing --save

1.17、ionic cordova plugin add cordova-plugin-camera

1.18、npm install --save @ionic-native/camera

1.19、npm install @angular/material-moment-adapter

1.20、npm install moment

1.21、npm install @ionic-native/geolocation

1.22、npm install chart.js --save

1.23、删除src\providers目录下的native-google-maps文件夹

1.24、打开/src/pages/ionic-native/native-google-maps/native-google-maps.ts文件

1.25、删除16行的public mapsCtrl: NativeGoogleMapsProvider

1.26、执行25步骤后下面会有两行报错,把那两行直接删除即可

1.27、打开\src\app\app.imports.ts文件

1.28、第8、18、40、50行注释掉

    1.28.1、import { NativeGoogleMapsProvider } 
            from '../providers/native-google-maps/native-google-maps';

    1.28.2、import { GoogleMaps } from '@ionic-native/google-maps';

    1.28.3、NativeGoogleMapsProvider,

    1.28.4、GoogleMaps,

1.29、ionic serve正常运行

1.30、ionic cordova run android正常运行

1.31、GitHub地址:https://github.com/yannbf/ionic3-components.git

1.32、说明事项:
    通过上面的步骤,项目就能正常运行了,其中23步骤到28步骤是去掉谷歌地图小模块的,因为谷歌地图需要
    依赖Google Play Services,而且还依赖其它一些服务,还需要*,如果不去掉项目无法部署到手机上
    正常运行,去掉就能正常运行了。这30个步骤中有一部分是可以调换先后顺序来执行的,但是有些步骤是有
    先后依赖关系的,所以尽量按照步骤走,这样能保证项目跑起来。

2、TypeScript

2.1、函数(完整函数类型)
    2.1.1、let myAdd: (x: number, y?: number)=> number =
        function(x: number, y?: number): number 
        { 
            return x + y; 
        };
    2.1.2、或者
        let myAdd: (baseValue: number, increment?: number) => number =
        function(x: number, y?: number): number 
        { 
            return x + y; 
        };
    2.1.3、解释:函数名:(参数名:参数类型,参数名?:参数类型)=>返回值类型=执行的函数(参数名:参
    数类型,参数名?:参数类型):返回值类型{函数体};

    2.1.4、注意事项:
        前面部分相当于函数申明一样,定义函数是什么样子的,后面部分相当于具体函数的样子,以及{}中函数
        要执行的操作,完成一定的功能。前面部分的参数与后面部分参数是一一对应的,但参数名字可以定义成
        不一样,它只是为了增加可读性,只要能一一对应上都可以。:?符号表示参数是可选的,如果传入了这个
        参数就接收,如果没有传入,这个参数就不存在,它是非必须的,可有可无,如果不是可选参数,则一定
        要传入这个参数。

    2.1.5、上面的函数也可以更简单的申明为:
        let myAdd = function(x: number, y?: number): number {return x + y; };
        或者:
        function myAdd(x: number, y?: number){ return x + y; }

2.2、泛型

    2.2.1、泛型函数

        function identity<T>(arg: T): T {
            return arg;
        }

    2.2.2、泛型类

        class GenericNumber<T> {
            zeroValue: T;
            add: (x: T, y: T) => T;
        }

    2.2.3、泛型约束

        2.2.3.1、创建一个包含 .length属性的接口:

            interface Lengthwise {
                length: number;
            }

2.3、枚举

    2.3.1、枚举我们可以定义一些有名字的数字常量

        enum Direction {
            Up = 1,
            Down,
            Left,
            Right
        }

    2.3.2、外部枚举

        declare enum Enum {
            A = 1,
            B,
            C = 2
        }

2.4、类型推论:略