ionic4 Hybrid App开发（二）

一、angular2基本语法

    ionic使用了google公司的angular作为前端框架。需要注意的是，由于版本更新，目前angular专指angular2.x以后的版本，而angularJS则是指angular1.x版本。这两个版本属于完全不同的框架，angularJS使用的是javascript语言，而angular则是使用的微软开发的typescript语言。

    Angular2.x使用的是es6的标准，官方文档：[https://www.angular.cn/](https://www.angular.cn/)。

    如果使用VsCode作为开发编辑器，则需要安装以下几个扩展工具，否则不会出现代码自动补全提示：

image

** a、数据绑定**

    单向文本绑定：{{}}；

    双向数据绑定：[(ngModel)]=""；

image

    html绑定：[innerHTML]

image

** b、ng指令**

      **  NgClass**

    利用NgClass指令，可以同时添加或移除多个类。NgClass绑定一个有形如CSS类名:value的对象，其中value的值是一个布尔型的值，当value值为true时，添加对应类型的模板元素，反之则移除。

    ngClass支持三元运算。

        **NgIf**

       指定绑定一个布尔型的表达式，当表达式返回true时，可以在DOM树节点上添加一个元素及其子元素，反之被移除

        同样 ngIf也支持三元运算。

      **  NgFor**

    ngFor用于在页面上循环数据，其默认索引为index。

    
{{i}}

需要注意的是，ngFor只能用来循环数组，如果需要使用ngFor循环对象Object，则可以使用下面的方法：

    
{{v}} == {{item[v]}}



    getVal(item){

        return Object.keys(item)    

    }

**NgSwitch**

ngSwitch主要用于多选项判断。

    


        
beijing


        
shanghai

    

** ngStyle**

ngStyle用于输出css,通常与三元判断绑定。

其他非常用指令可参考官方文档或自行百度即可。

**c、事件绑定**

    根据官方文档（https://www.angular.cn/guide/template-syntax#event-binding），angular中的事件绑定机制可以响应任何DOM事件。（大雾）

`
点击
`

     **可以通过$event获取DOM事件对象：**

```    
    

    input(e:any){

        console.log(e.target.value)

    }

```

d、箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

    标准写法：a=>{x*x}  相当于：

            function(a){

                return x * x;

            }

    如果有多个参数：()=>{}  


>箭头函数的本质其实就是lambda表达式，主要作用是用于闭包，但与匿名函数不同：

    1、函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。

    2、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

    3、不可以使用arguments对象，该对象在函数体内不存在。

    **第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。**

e、var let const

    ES6中新增了 let 方法用于声明变量，具体使用方法与 var 类似，但let声明的变量尽在其所在的代码块内有效。

    const 声明一个只读的常量。一旦声明，常量的值就不能改变。与let一样，只在所属代码区块有效。

    与var不同，let 和 const 都不可重复声明，且都必须先声明才能使用

   ** 具体关于ES6的内容，可以参考阮一峰的文章：http://es6.ruanyifeng.com/#docs/function**

二、新建页面

使用命令行cd到根目录后，使用ionic g 命令即可自动生成页面（page）、组件（component）、服务（provider）和管道（pipe）等。

image

系统会自动生成相关文件：

image

**关于scss:**

    scss是对css的扩展，因此其本身可以完全兼容css。

   ** 1、scss变量**

    scss里可以申明变量然后调用变量，申明方式与php一致为“$”：

$width: 5em;

直接使用即调用变量：

    #main {

      width: $width;

    }

    2、scss嵌套

    Scss 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，避免了重复输入选择器：

#main {

  width: 97%;

  p, div {

    font-size: 2em;

    a { font-weight: bold; }

  }

  pre { font-size: 3em; }

}

编译后等于：

#main {width: 97%; }

#main p, #main div { font-size: 2em; }

#main p a, #main div a {font-weight: bold; }

#main pre {font-size: 3em; }

更多scss用法，可参考官方文档：https://www.sass.hk/docs/

TIP:

1、在ionic2.x以上项目中，有时会出现android端样式与ios端不统一，就可以在app.module.ts里统一强制使用ios端样式：

image

2、ionic会为每个页面都单独会生成一个scss文件，打开后会看到 page-你的页面名称{ }，表示这个样式文件只对该页面生效

image

如果你想全局定义css样式，可已在theme文件夹下的variables.scss里定义：

image

也可以将css写在page-market{}的花括号外，同样能全局定义：

image

3、有时当你更改代码并保存后发现无效或者报错，检查代码无误则需要重新运行 ionic serve，这是由于ionic的热更新功能出错导致的