ionic3_ionic3 监听数据变化 - CSDN
精华内容
参与话题
  • ionic3 实现高德地图(1)

    千次阅读 2018-04-03 09:44:01
    ionic3 使用高德地图 首先注册高德开发者 http://lbs.amap.com/dev/index 在app上添加地图 1、复制如下代码到appindex.html页面的标签中,如下 type="text/javascript" src=...

    ionic3 使用高德地图

    首先注册高德开发者 http://lbs.amap.com/dev/index


    在app上添加地图

    1、复制如下代码到appindex.html页面的<head>标签中,如下

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的高德地图webkey"></script>

    注意,该js必须放在以下代码的前面:

    <script src="build/main.js"></script>


    2、在xxx.html创建一个div

    <ion-content>
      <div #map_container class="map_container"></div>
    </ion-content>
    在xxx.scss

    page-home {
      .map_container {
        width: 100%;
        height: 100%;
      }
    }

    在xxx.ts

    import { Component, ViewChild, ElementRef } from '@angular/core';
    
    declare var AMap;
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      @ViewChild('map_container') map_container: ElementRef;
      map: any;//地图对象
    
      constructor(public navCtrl: NavController) {
      }
    
      ionViewDidEnter() {
        this.map = new AMap.Map(this.map_container.nativeElement, {
          view: new AMap.View2D({//创建地图二维视口
            zoom: 11, //设置地图缩放级别
            rotateEnable: true,
            showBuildingBlock: true
          })
        });
      }
    
    }

    启动ionic就可以显示高德地图了

    展开全文
  • Ionic 调用硬件的能力。 Ionic 调用原生 api 的能力是基于 cordova 的 ,cordova 是 Adobe 公司的一个开源的框架, 诞生于2008年, 可以让我们用javascript调用手机原生的几乎所有的api,比如:摄像头、 麦克风等、...
    Ionic 调用硬件的能力。
       Ionic 调用原生 api 的能力是基于 cordova 的 ,cordova 是 Adobe 公司的一个开源的框架, 诞生于2008年,
       可以让我们用javascript调用手机原生的几乎所有的api,比如:摄像头、 麦克风等、重力感应、加速器、声音、震动、
       网络、视频、音频、地理定位等,原生能实现 的所有功能。
    
    
    Ionic 调用 Device 设备 Api 获取手机的设备信息。
      https://wenku.baidu.com/view/91a10d55ba68a98271fe910ef12d2af90242a8ec
      1. 找到对应的Api: https://ionicframework.com/docs/native/device/
      2. 安装相关的设备插件
         ionic cordova plugin add cordova-plugin-device
         npm install --save @ionic-native/device
      3. 在app.module.ts中引入注册相应模块
         import { Device } from '@ionic-native/device';
         providers: [
             StatusBar,
             SplashScreen,
             Device,
             {provide: ErrorHandler, useClass: IonicErrorHandler}
         ]
    
      4,在用到的页面引入看文档使用
        ionic cordova plugin add cordova-plugin-device
        npm install --save @ionic-native/device
    
    
        import { Device } from '@ionic-native/device';
        constructor(private device: Device) { }
        ...
        console.log('Device UUID is: ' + this.device.uuid);
    
    
     Ionic 调用照相机拍照功能
       1、找到对应的 Api: https://ionicframework.com/docs/native/camera/
       2、安装相关的插件
          ionic cordova plugin add cordova-plugin-camera
          npm install --save @ionic-native/camera
       3、在 app.module.ts 中引入注册相应模块
          import { Camera } from '@ionic-native/camera';
          ...
          @NgModule({ ...
            providers: [ ...
             Camera
            ... ]
            ...
           })
          export class AppModule { }
       4、在用到的页面引入看文档使用
         import { Camera, CameraOptions } from '@ionic-native/camera';
    
         constructor(private camera: Camera) { }
           ...
          const options: CameraOptions = {
              quality: 100,
              destinationType: this.camera.DestinationType.DATA_URL,
              encodingType: this.camera.EncodingType.JPEG,
              mediaType: this.camera.MediaType.PICTURE
           }
    
          this.camera.getPicture(options).then((imageData) => {
           // imageData is either a base64 encoded string or a file URI // If it's base64:
           let base64Image = 'data:image/jpeg;base64,' + imageData;
           }, (err) => {
          });
    
    
    
    Ionic ZBar 扫描二维码 条形码插件的使用
       https://wenku.baidu.com/view/872cd948876fb84ae45c3b3567ec102de2bddfe8
       1. 下载安装插件
           ionic cordova plugin add cordova-plugin-cszbar
           npm install --save @ionic-native/zbar
       2. app.module.ts 引入依赖注入
           import { ZBar } from '@ionic-native/zbar';
           providers: [
               Camera,
               StatusBar,
               SplashScreen,
               ZBar,
              {provide: ErrorHandler, useClass: IonicErrorHandler}
           ]
       3. 用到的地方引入,注入使用,注意:如果返回的是对象,用JSON.stringify转换后打印
          import { ZBar, ZBarOptions } from '@ionic-native/zbar';
          doScanner(){
            let options: ZBarOptions = {
            text_title: "扫码", // Android only
            text_instructions: "请把相机对准二维码", // Android only camera: "back", // defaults to "back"
             flash: "auto", // defaults to "auto". See Quirks drawSight: true
           };
           this.zbar.scan(options)
            .then(result => {
                alert(JSON.stringify(result)); // Scanned code
            })
            .catch(error => {
               console.log(error); // Error message
            });
          }
    
    
    
    Ionic图片上传(使用cordova-plugin-file-transfer 实现 图片上传)
       1. 下载安装插件
         ionic cordova plugin add cordova-plugin-file
         npm install --save @ionic-native/file
         ionic cordova plugin add cordova-plugin-file-transfer
         npm install --save @ionic-native/file-transfer
         或者通过直接安装
          ionic cordova plugin add cordova-plugin-file-transfer
          npm install --save @ionic-native/file-transfer
       2. app.module.ts 引入依赖注入
          import { File } from '@ionic-native/file';
          import { FileTransfer} from '@ionic-native/file-transfer';
    
          providers: [
             StatusBar,
             SplashScreen,
             File,
             FileTransfer,
             Device,
             Camera,
             {provide: ErrorHandler, useClass: IonicErrorHandler}
          ]
       3. 用到的地方引入 实例化
          import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
          import { File } from '@ionic-native/file';
    
          constructor(public navCtrl: NavController,private device: Device, private camera: Camera,private transfer: FileTransfer, private file: File)
          {
    
          }
       4,拍照上传图片功能
          doCameraUpload(){
            const options: CameraOptions = {
              quality: 100, //图片质量
              destinationType: this.camera.DestinationType.FILE_URI, /*返回的类型*/
              encodingType: this.camera.EncodingType.JPEG, sourceType:this.camera.PictureSourceType.CAMERA, // mediaType: this.camera.MediaType.PICTURE, allowEdit:true,
              targetWidth:300, /*宽度高度要设置*/
              targetHeight:300
            }
            this.camera.getPicture(options).then((imageData) => { // 返回拍照的地址
              this.doUpload(imageData); }, (err) => {
              // Handle error
            });
          }
          doUpload(src){
            const fileTransfer: FileTransferObject = this.transfer.create();
            let options: FileUploadOptions = { fileKey: 'file',
              fileName: 'name.jpg', mimeType:'image/jpeg', httpMethod:"POST",
              params:{
                username : "张三", age : "20", height : "190"
              } /*附带的一些信息*/
              // headers: {}
            }
            // error
            alert('err');
            alert(JSON.stringify(err)); })
          }
    
    
       ionic3实现APP的自动升级:
       https://wenku.baidu.com/view/d7824b53bb1aa8114431b90d6c85ec3a87c28be6
    
    展开全文
  • Ionic3 瀑布流布局

    千次阅读 2017-05-19 14:35:50
    瀑布流布局是比较流行的一种...下面就介绍一下如何在ionic3中使用瀑布流布局。 首先创建一个项目,这里不多做介绍。我们用about这个模块来进行瀑布流的开发。 这里先介绍一下实现的流程: 我们先要定义一个contain

    瀑布流布局是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
    瀑布流布局一般使用在网页中,在移动端用的比较少但是也不可缺。下面就介绍一下如何在ionic3中使用瀑布流布局。
    首先创建一个项目,这里不多做介绍。我们用about这个模块来进行瀑布流的开发。
    这里先介绍一下实现的流程:
    这里写图片描述
    我们先要定义一个container,在container中存在有多个box,box里面放置图片。
    1、首先获取container中的所有box。
    2、获取box的宽度和屏幕的宽度。
    3、获取在当前屏幕宽度下一行可以放置多少个box。
    4、将所有的box的高度放到一个数组当中。
    5、遍历数组,获取到第一行中最高度最小的box。
    6、遍历数组的下标到达第二行的时候将第二排的首元素放在第一行的高度最低的元素下面。(比如一行放了三个box,其中第三个高度最低,那么第四个就放在第三个box的下面。)
    7、将元素放在最低元素下面后,则将第三个元素和第四个元素高度相加成为一个新的第三个元素,同样重复即可实现。

    下面是详细代码
    about.html

    <ion-content>
        <div id="container">
            <div class="box" *ngFor="let image of img_data">
                <div class="box_img">
                    <img src="{{image.src}}" alt="">
                </div>
            </div>
        </div>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content loadingSpinner="circles" loadingText="正在加载...">
            </ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </ion-content>

    about.scss

    page-about {
        ion-content {
            #container {
                position: relative;
                .box {
                    padding: 5px;
                    float: left;
                    .box_img {
                        padding: 5px;
                        border: 1px solid #cccccc;
                        box-shadow: 0 0 5px #ccc;
                        border-radius: 5px;
                        img {
                            width: 150px!important;
                            height: auto;
                        }
                    }
                }
            }
        }
    }

    about.ts

    import { Component } from '@angular/core';
    import { NavController, IonicPage } from 'ionic-angular';
    @IonicPage({
      name: 'about'
    })
    @Component({
      selector: 'page-about',
      templateUrl: 'about.html'
    })
    export class AboutPage {
      img_data = [{
        src: "assets/images/a.jpg"
      }, {
        src: "assets/images/b.jpg"
      }, {
        src: "assets/images/c.jpg"
      }, {
        src: "assets/images/d.jpg"
      }, {
        src: "assets/images/e.jpg"
      }, {
        src: "assets/images/f.jpg"
      }, {
        src: "assets/images/g.jpg"
      }, {
        src: "assets/images/h.jpg"
      }, {
        src: "assets/images/i.jpg"
      }, {
        src: "assets/images/j.jpg"
      }, {
        src: "assets/images/k.jpg"
      }, {
        src: "assets/images/l.jpg"
      }, {
        src: "assets/images/m.jpg"
      }, {
        src: "assets/images/n.jpg"
      }, {
        src: "assets/images/o.jpg"
      }]
      constructor(public navCtrl: NavController) {
    
      }
    
      ngAfterViewInit() {
    
      }
      ionViewWillEnter() {
        this.getNode();
      }
      getNode() {
        let parentNode = document.getElementById("container");
        let childNodeArray: any = parentNode.getElementsByClassName("box");
        let screenWidth = document.documentElement.clientWidth;
        let childWidth = childNodeArray[0].offsetWidth;
        let num = Math.floor(screenWidth / childWidth); //获得一排摆的个数 用Math.floor()转换为整数
        parentNode.style.cssText = "width:" + childWidth * num + "px; margin:0 auto"; //固定container的宽并设置居中
        this.setImagePosition(num, childNodeArray);
      }
    
      setImagePosition(num, childArray) {
        var imgHeightArray = [];//定义数组用于存放所有图片的高度
        for (var i = 0; i < childArray.length; i++) { //遍历所有图片
          if (i < num) {
            imgHeightArray[i] = childArray[i].offsetHeight; //取得第一排图片的高度
          } else {
            var minHeight = Math.min.apply(null, imgHeightArray); //获取第一排图片中高度最小的图片
            var minIndex = this.getMinHeight(imgHeightArray, minHeight); //函数获得高度最小的图片的位置
            childArray[i].style.position = "absolute"; //绝对定位图片
            childArray[i].style.top = minHeight + "px"; //图片距顶部像素
            childArray[i].style.left = childArray[minIndex].offsetLeft + "px"; //图片距左的像素
            imgHeightArray[minIndex] = imgHeightArray[minIndex] + childArray[i].offsetHeight; //将最低高度的box的高度加上它下方的box高度
          }
        }
      }
    
      getMinHeight(imgHeightArray, minHeight) {
        for (var i in imgHeightArray) {
          if (imgHeightArray[i] == minHeight) { //循环所有数组的高度 让它等于最小图片的高度 返回i值
            return i;
          }
        }
      }
    //这里是借助ionic的上拉加载代替网页的滚动监听实现加载更多
      doInfinite(infiniteScroll) {
        let parentNode = document.getElementById("container");
        for (var i = 0; i < this.img_data.length; i++) {
          let divNode = document.createElement("div"); //创建div节点
          divNode.className = "box";//为节点添加box类名
          parentNode.appendChild(divNode);//添加根元素
          let subDivNode = document.createElement("div");//创建节点
          subDivNode.className = "box_img";//为节点添加类名
          divNode.appendChild(subDivNode);//添加根元素
          var img = document.createElement("img");//创建节点
          img.src = this.img_data[i].src;//图片加载路径
          subDivNode.appendChild(img);//添加根元素
        }
        this.getNode();
        setTimeout(() => { infiniteScroll.complete() }, 1000);
      }
    }
    

    最终效果:
    这里写图片描述

    展开全文
  • ionic3中的calendar的使用

    千次阅读 2018-12-28 11:22:35
    第一张是直接放在ion-calendar标签展示在页面上任何地方的界面;第二张是通过ts弹出来的,html中不需要... ... 1、通过ionic start xxx tabs创建ionic3项目,然后通过npm安装两个包:   npm install ion2-calend...

           

    第一张是直接放在ion-calendar标签展示在页面上任何地方的界面;第二张是通过ts弹出来的,html中不需要标签

    具体的详情:https://www.npmjs.com/package/ion2-calendar

    1、通过ionic start xxx tabs创建ionic3项目,然后通过npm安装两个包: 

         npm install ion2-calendar moment --save

    2、(1)、通过ion-calendar标签展示:

    安装完成后,在app.module.ts中(即根模块中)顶部引入import { CalendarModule } from "ion2-calendar";并且在下面imports中加入CalendarModule,app.module.ts如下所示

    import { NgModule } from '@angular/core';
    import { IonicApp, IonicModule } from 'ionic-angular';
    import { MyApp } from './app.component';
    ...
    import { CalendarModule } from "ion2-calendar";
     
    @NgModule({
      declarations: [
        MyApp,
        ...
      ],
      imports: [
        IonicModule.forRoot(MyApp),
        CalendarModule
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        ...
      ]
    })
    export class AppModule {}

    3、在需要使用calendar日历的组件中顶部引入:import { CalendarComponentOptions } from 'ion2-calendar'

       需要使用calendar的页面的xxx.ts文件:

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { CalendarComponentOptions } from 'ion2-calendar'
    
    @IonicPage()
    @Component({
        selector: 'page-record-weight',
        templateUrl: 'record-weight.html',
    })
    export class RecordWeightPage {
        dateRange: { from: string; to: string; };
        type: 'string';
        optionsRange: CalendarComponentOptions = {
            // from: new Date(2011, 1, 7),
            monthFormat: 'YYYY 年 MM 月 ',
            weekdays: ['日', '一', '二', '三', '四', '五', '六'],
        };
        constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
        }
    }

    xxx.html文件:

    <ion-header>
    
        <ion-navbar>
            <ion-title>日历</ion-title>
        </ion-navbar>
    </ion-header>
    
    
    <ion-content>
        <ion-calendar [(ngModel)]="date"
                    [options]="optionsRange"
                    (onChange)="onChange($event)"
                    [type]="type"
                    [format]="'YYYY-MM-DD'">
                </ion-calendar>
    </ion-content>

    因为业务需要我在xxx.scss中设置了.title: display!important;所以最上面的年份和月份的标题就不显示了,这个直接展示在界面的需要ion-calendar标签,而标签中的[options]="optionsRange"是用来设置一些参数如下:

    (2)、通过弹框弹出来:

    xxx.ts中如下:

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { ModalController } from 'ionic-angular';
    import { CalendarModal, CalendarModalOptions, DayConfig, CalendarResult } from "ion2-calendar";
    
    @IonicPage()
    @Component({
        selector: 'page-record-weight',
        templateUrl: 'record-weight.html',
    })
    export class RecordWeightPage {
        dateRange: { from: string; to: string; };
        type: 'string';
        constructor(public navCtrl: NavController, public navParams: NavParams) {
           this.openCalendar();
        }
         openCalendar() {
           const options: CalendarModalOptions = {
             title: 'BASIC',
           };
           let myCalendar =  this.modalCtrl.create(CalendarModal, {
             options: options
           });
       
           myCalendar.present();
       
           myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
             console.log(date);
           })
         }
    }

    主要是通过openCalendar()函数调用来弹出calendar的日历弹框

    展开全文
  • ionic3学习之总结

    2018-06-14 14:06:00
    ionic3 学习了有段时间了。然后也在 github 上面找了好多相关的代码作为参考。最后自己也做了一个小的例子。这个也是在业余的时间学习的。最近需要去学新的东西了,这个就先记录一个里程碑。 例子图示 因为录制的...
  • Ionic 3 实战开发指南

    千次阅读 2018-04-12 10:41:42
    课程简介 在移动开发领域,各种不同的框架和工具可谓是百花齐放。从 Android 和 iOS 的原生应用,到...此达人课将介绍移动开发中的一个重要框架——基于 Apache Cordova 的混合移动应用开发方案 IonicIonic 的优势...
  • ionic3的安装、使用

    千次阅读 2018-03-31 10:38:06
    现在我已经大三了,为了秋招的时候有拿得出手的作品,我们就组了一个小团队写一个社交方面的APP,在这个APP开发中我们的前端是使用了一个前端的框架ionic写的,但是在使用ionic的时候,需要对TypeScript,Angularjs...
  • ionic3封装http服务

    千次阅读 2018-07-04 10:49:03
    1、使用命令行创建服务ionic g provider httpSer 报错信息: 1)报错一Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HttpSerProvider -&gt; HttpClient]: StaticInjectorError...
  • Ionic3安装和项目创建

    万次阅读 2017-11-27 23:30:57
    Ionic3安装和项目创建
  • ionic3学习之路(一)

    千次阅读 2018-02-05 15:35:17
    1、第一、二天 环境准备 1.1、安装Node.js(Windows下安装) 1.1.1、下载地址:... 1.1.2、安装后命令行下执行:node --version出现版本号表示安装成功 1.2、npm安装:执行:npm install npm
  • Ionic3各种问题汇总

    千次阅读 2018-03-12 11:10:32
    1、如果在64位系统出现如下错误请安装64位jdkUnable to start the daemon process.2、如果在fat32格式的磁盘上面执行cnpm install会报错,必须在ntfs格式的磁盘上执行3、如果出现如下错误:You have not accepted ...
  • ionic3

    2018-08-08 15:13:54
    app 采用Ionic+Cordova模式进行开发。 Ionic+Cordova的组合是一个跨平台的移动开发框架,属于HybirdApp开发模式。其中Ionic是一个前端框架,集成了AngularJs。Cordova本身就是一个跨平台的移动开发框架,可以将应用...
  • 最近用ionic2和ionic3中,组件Action Sheets和Alerts给出的基本样式满足不了项目中的设计图的要求,需要修改,在此记录一下方法。 Action Sheets组件 在官网上的例子的样式是如下图所示的: 而需要的样式如下: ...
  • ionic3微信公众号开发

    千次阅读 2018-03-10 10:31:22
    一、前言 之前项目需要,正好使用ionic3开发app,只使用到页面级别,还没到请求数据层面。想着比较熟,就用ionic3直接开发微信公众号应用,看中的是ionic3有一些样式组件现成符合项目,进行项目的时候还是有许多麻烦...
  • ionic3仿京东商城源码

    2018-03-29 10:04:06
    ionic3仿京东商城源码,非常好用的ionic3学习参考资料。
  • Ionic 3 升级 Ionic 4 迁移指南 前言 Ionic 4 包含现代 Web API,如Custom Elements,CSS Variables和Shadow DOM。它完全与开发框架无关,作为 Web 开发人员的UI库,无论他们决定使用什么前端工具或代码框架。 在Vue...
  • Ionic3 Demo

    2018-05-22 11:15:18
    最近又开源了一个小 Demo,基于 Ionic 3.9.2。注册登录功能使用的是 WildDog 野狗通信云,大家可以放心的注册登录玩。电影相关数据来源自“某眼”,莫张扬…2333… 主要功能嘛,直接看 README 就行了,那我就直接甩...
  • ionic3 手势事件

    千次阅读 2018-06-25 14:26:28
    ionic3中的gestures 手势事件- ioni3c长按事件官方地址:... ionic3中的gestures 手势事件如下:ionic3中的gestures 手势事件包括: tap, press, pan, swipe, ionic3rotate, and pinch events等事件,tap i...
  • 最近用ionic3和angular4做APP,其中有个需求:用户无论在哪个页面只要超时了就弹界面要求用户输入PIN码。这时候必须是覆盖整个页面,除非PIN码正确否则其他内容都是disable的。(jq的方法在本文讨论之外) 写好了...
  • 如题,将记录ionic3升级到ionic4写法上的所有变化 持续更新,欢迎大家补充 无分类,发现一个就写一个 迁移时千万不要把所有代码都复制过来再修改错误,那会让你怀疑人生。正确的顺序是,新建空ionic4工程,然后用...
1 2 3 4 5 ... 20
收藏数 27,969
精华内容 11,187
关键字:

ionic3