美文网首页ionic
ionic3学习安排

ionic3学习安排

作者: Gravel812 | 来源:发表于2019-08-29 11:03 被阅读0次

    一、环境准备

            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、<ion-header>:页面头部,页眉

            2.4.2、<ion-navbar>:页面导航条

            2.4.3、<ion-title>:标题

            2.4.4、<ion-content>:页面内容部分,除了页眉和页脚的内容都放在这个地方

            2.4.5、<ion-fab>

            2.4.6、<img>:引入一张图片

            2.4.7、<ion-list>:列表

            2.4.8、<ion-item>:项目

            2.4.9、<ion-label>:标签、标记

            2.4.10、<ion-input>:文本输入框

            2.4.11、<button ion-button>:按钮

            2.4.12、<ion-icon>:小图标,ionic包含许多小图标可以供我们使用

            2.4.13、<ion-slides pager>:里面可放多个滑动页

            2.4.14、<ion-slide>:其中的一个滑动页,包含在<ion-slides pager>中

    2.5、css样式标签和用法

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

                    <ion-label floating>密码</ion-label>

            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、<ion-card>:卡片

            4.1.3、<ion-card-header>:卡片头

            4.1.4、<ion-card-content>:卡片内容

            4.1.5、<ion-row>:Grid的一行

            4.1.6、<ion-col>:Grid的一列

            4.1.7、<ion-refresher>:下拉刷新

        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、<div [ngSwitch]="paragraphNumber">

                    <p *ngSwitchCase="1">Paragraph 1</p>

                    <p *ngSwitchCase="2">Paragraph 2</p>

                    <p *ngSwitchCase="3">Paragraph 3</p>

                    <p *ngSwitchDefault>Paragraph</p>

                  </div>

                :这个是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、下拉刷新

                <!-- 下拉刷新-->

                <ion-refresher (ionRefresh)="rootHomeRefresh($event)">

                    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="更新中..."></ion-refresher-content>

                </ion-refresher>

            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

    相关文章

      网友评论

        本文标题:ionic3学习安排

        本文链接:https://www.haomeiwen.com/subject/ghuwiqtx.html