ionic3学习安排

一、环境准备

        1.1、安装Node.js（Windows下安装）

            1.1.1、下载地址：https://nodejs.org/en/download/

            1.1.2、安装后命令行下执行：node --version出现版本号表示安装成功

        1.2、npm安装:执行：npm install npm -g 命令

        1.3、ionic 安装

            1.3.1、资源包下载地址：http://ionicframework.com/docs/overview/#download

            1.3.2、命令行下执行：npm install -g cordova ionic 命令进行安装

            1.3.3、更新：npm update -g cordova ionic

            1.3.4、创建应用实例：ionic start 应用名称 初始类型（如：ionic start myApp tabs）

            1.3.5、试运行看是否安装成功（需要进入到myApp目录）：ionic serve

        1.4、安装android SDK：

            下载android SDK并安装，然后环境变量添加ANDROID_SDK_HOME，路径为SDK的安装目录，然后在

            path中添加%ANDROID_SDK_HOME%\tools和%ANDROID_SDK_HOME%\platform-tools

       1.5、测试是否安装成功

            1.5.1、ionic start myproject tabs：创建一个带tabs栏和bottom栏的名字叫做myproject的

                工程

            1.5.2、cd myproject：进入项目路径

            1.5.3、ionic serve：浏览器调试，在浏览器中预览

            1.5.4、ionic cordova platform add android：添加android平台

            1.5.5、ionic cordova build android：编译安卓项目

            1.5.6、ionic cordova run android：真机运行，运行在安卓手机上，需要数据线连接到电脑，

                    并且手机打开开发者模式，允许调试。

2、第三、四、五天

    2.1、ionic g page 要创建的页面名称：创建空白页面，需要在命令窗口中执行，创建的页面在pages目录

        下，一个页面相当于一个文件夹，叫做组件，一个页面包括html、scss、ts文件一个，

    2.2、创建的项目的文件目录结构

        2.2.1、.sourcemaps

        2.2.2、node_modules：所有项目依赖库的存放点，包括ionic框架本身

        2.2.3、platforms：平台

        2.2.4、plugins：插件存放的目录

        2.2.5、resources：用来防止你编译应用的时候用到的闪屏和图标

        2.2.6、src：源代码资源目录，编码基本都在这里完成

        2.2.7、www：编译文件夹

        2.2.8、.editorconfig

        2.2.9、.gitignore

        2.2.10、config.xml：一些配置信息

        2.2.11、ionic.config.json

        2.2.12、package-lock.json

        2.2.13、package.json：版本配置信息之类的，可以用来更新版本

        2.2.14、tsconfig.json

        2.2.15、tslint.json

2.3、src目录建构

        2.3.1、app

            2.3.1.1、app.component.ts

            2.3.1.2、app.html

            2.3.1.3、app.module.ts：应用的根组件，每创建一个页面都要在这里注册申明才可以使用

            2.3.1.4、app.scss：用于声明在应用中全局使用的样式

            2.3.1.5、main.ts

        2.3.2、assets：一些静态资源存放的地方

        2.3.3、pages：创建的页面组件都在此目录之下

        2.3.4、theme：全局样式定义

        2.3.5、index.html：引入资源的地方

        2.3.6、manifest.json

        2.3.7、service-worker.js

    2.4、ionic标签和用法

        2.4.1、：页面头部，页眉

        2.4.2、：页面导航条

        2.4.3、：标题

        2.4.4、：页面内容部分，除了页眉和页脚的内容都放在这个地方

        2.4.5、

        2.4.6、：引入一张图片

        2.4.7、：列表

        2.4.8、：项目

        2.4.9、：标签、标记

        2.4.10、：文本输入框

        2.4.11、：按钮

        2.4.12、：小图标，ionic包含许多小图标可以供我们使用

        2.4.13、：里面可放多个滑动页

        2.4.14、：其中的一个滑动页，包含在中

2.5、css样式标签和用法

        2.5.1、floating：文字上浮，一般在文本框前的提示中用：

                密码

        2.5.2、clearInput="true"：文本框输入内容后，后面有个叉叉，点击可以清除文字

        2.5.3、clearOnEdit="true"：文本输入的内容焦点离开文本框后，再次获取焦点时会清空文本内容，

            一般用在密码框中

        2.5.4、small：尺寸偏小的，一般用在按钮中，指定按钮类型为小按钮

        2.5.5、large：尺寸偏大的，一般用于按钮

        2.5.6、clear：清除样式

        2.5.7、block：设为块元素

        2.5.8、full：充满整个横向页面

        2.5.9、bottom：在页面底部显示

        2.5.10、padding：使用ionic定义的内边距

        2.5.11、color="danger"：使用ionic定义的颜色，除此之外还有light、secondary、dark等颜色

        2.5.12、outline：大纲样式

        2.5.13、round：圆角，用在按钮可以使按钮变成圆角矩形

    2.6、js标签和用法

        2.6.1、(click)="函数名"：点击时间调用函数

        2.6.2、this.navCtrl.setRoot(页面); ：设置root页面

        2.6.3、this.navCtrl.push(某页面); ：堆栈，跳到某页面

        2.6.4、this.navCtrl.pop(某页面); ：出栈，弹出某页面，前提是这个页面之前已经进栈

3、第6、7天：周末休息

4、第8、9、10、11、12天

    4.1、ionic标签和用法

        4.1.1、#你取的一个标识名：

                给某个元素一个标识，之后可以通过这个标识对这个元素做更改处理，如#userName，在js里

                就能够有办法获取到。

        4.1.2、：卡片

        4.1.3、：卡片头

        4.1.4、：卡片内容

        4.1.5、：Grid的一行

        4.1.6、：Grid的一列

        4.1.7、：下拉刷新

    4.2、css样式标签和用法

        4.2.1、{{变量名}}：把变量的内容直接显示出来

        4.2.2、width-xx：Grid的宽度设置，例如width-10

    4.3、js标签和用法

        4.3.1、(input)="函数名" ：输入框里面文本内容改变会实时调用函数

        4.3.2、public alertCtrl: AlertController：

                定义一个变量用于代表一个类，alertCtrl只是一个自定义的名字

        4.3.3、this.alertCtrl.create({

                title: ' ',

                message: ' ',

                buttons: [' '],

              })

                ：创建一个弹窗，把窗口弹出还需要调用.present()

        4.3.4、*ngFor="let xxx of xxx"：在ionic标签中使用，用于循环创建元素，相当于加强for循环

        4.3.5、*ngIf="Boolean"：在ionic标签中使用，if条件判断，true的时候会执行

        4.3.6、

               

Paragraph 1

               

Paragraph 2

               

Paragraph 3

               

Paragraph

             

            ：这个是switch case语句

    4.4、命令

        4.4.1、ionic plugin add plugin-name：安装插件

        4.4.2、ionic plugin add cordova-plugin-geolocation：安装Ionic Native插件

        4.4.3、ionic g provider Data：生成数据提供者

    4.5、SQLite数据库连接与操作

        4.5.1、ionic cordova plugin add cordova-sqlite-storage：添加SQLite插件

        4.5.2、npm install --save @ionic-native/sqlite：安装

        4.5.3、在app.module.ts中添加 import { SQLite } from '@ionic-native/sqlite';

        4.5.4、在app.module.ts的providers:[]中加入SQLite

        4.5.5、在需要用到SQLite的ts文件中加入：

                import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

        4.5.6、在需要用到SQLite的ts文件的constructor中加入:

                constructor(private sqlite: SQLite,) {}

    4.6、SQLite数据库DRUD核心代码（所有代码需要添加到TypeScript类中）

        4.6.1、连接，初始化

            database: SQLiteObject;

            ngOnInit() {

                this.initDB();

            }

            initDB(){

                this.sqlite.create({name: 'data.db',location: 'default'})

                .then((db: SQLiteObject) => {

                    db.executeSql('create table if not exists saveQuestion(id INTEGER PRIMARY KEY AUTOINCREMENT, questionName text NOT NULL)', {})//建表

                        .then(() => console.log('Executed SQL'))

                        .catch(e => console.log(e));

                this.database = db;

            });

        4.6.2、插入数据

            //插入数据

            insert(params){

                //console.log(params);

                //获取当前时间

                var date: string = new Date().toLocaleDateString();

                var time: string = new Date().toTimeString().substring(0,5);

                var datetime: string = date + " " + time;

                console.log(datetime);

                this.database.executeSql("INSERT INTO saveQuestion (questionName,important) VALUES (?,?);",[params.questionName,params.important])

                    .then(() => alert('暂存成功'))

                    .catch(e => console.log(e));//插入数据

            }

        4.6.3、修改数据

            //修改数据

            update(params){

                //console.log(params);

                var date: string = new Date().toLocaleDateString();

                var time: string = new Date().toTimeString().substring(0,5);

                var datetime: string = date + " " + time;

                console.log(datetime);

                this.database.executeSql("UPDATE saveQuestion set questionName=?,important=? WHERE id=?;",[params.questionName,params.important])

                    .then(() => alert('修改成功'))

                    .catch(e => console.log(e));

            }

        4.6.4、删除

            //删除

            buttonDelete(){

                this.database.executeSql("DELETE FROM saveQuestion WHERE id=?;",[放id])

                    .then(() => alert('删除成功'))

                    .catch(e => console.log(e));//删除数据

            }

        4.6.5、查询数据

            //查询

            query() {

                this.database.executeSql("select * from saveQuestion",{}).then((data)=>{

                    if ((uName == data.rows.item(0).userName) && (userPwd == data.rows.item(0).userPassword)) {

                        this.navCtrl.setRoot(RootHomePage);

                    }

                },(error)=>{

                    console.log('查询错误');

                });

            }

        4.6.6、一些注意事项

            4.6.6.1、数据库操作的结果都会返回到data变量接收，我们只需要把拿到的数据做处理就好了

            4.6.6.2、对数据操作只要把alert()替换成{}就好了，并且操作在{}内部完成

            4.6.6.3、取数据操作后的结果的方法：data.rows.item(n).字段名，n代表第几条记录，可能数

                    据库操作有多条数据，如data.rows.item(5).userPassword

    4.7、弹出警告窗

        4.7.1、在需要用到的ts文件中：

                import { AlertController } from 'ionic-angular/components';

        4.7.2、构造器中加入public alertCtrl: AlertController

        4.7.3、使用

            let alert = this.alertCtrl.create({

                title: '恭喜',

                message: '注册成功！',

                buttons: ['确定'],

            })

            alert.present();

    4.8、其它

        4.8.1、在类中定义的全局变量可以直接在页面中通过{{变量名}}取到变量的值

        4.8.2、下拉刷新

           

           

               

           

        4.8.3、密码框通过点击小图标显示或隐藏密码，在文本框中添加这个：

                type="{{eyeshow?'text':'password'}}"，

              在小图标中添加这个：

                (click)="eyeshow= !eyeshow"

              就能实现点击显示，再点击隐藏的功能

4.8.4、一些重要资料链接

4.8.4.1、http://www.jianshu.com/p/ca2f87cd3280

4.8.4.2、http://www.cnblogs.com/greyzeng/p/5557947.html

4.8.4.3、http://ionicframework.com/docs/storage/#set

4.8.4.4、http://blog.csdn.net/zuoyiran520081/article/details/56017320?locationNum=4&fps=1

4.8.4.5、http://blog.csdn.net/h254532699/article/details/54382123

4.8.4.6、https://www.cnblogs.com/huihuihui/p/6930412.html

4.8.4.7、http://blog.csdn.net/u012379815/article/details/51775956

4.8.4.8、http://blog.csdn.net/qq993284758/article/details/77679283

4.8.4.9、http://blog.csdn.net/u011537073/article/details/61004203

4.8.4.10、http://blog.csdn.net/li00828/article/details/78318255

4.8.4.11、http://ionicframework.com/docs/api/platform/Keyboard/

4.8.4.12、http://ionicframework.com/docs/native/keyboard/

作者：li_zean

来源：CSDN

原文：https://blog.csdn.net/li_zean/article/details/79260715