ionic4中ionic native的基本使用

谁践踏了优雅 2021-12-12 03:05 378阅读 0赞

#### ionic官网 ####

[https://ionicframework.com/][https_ionicframework.com]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

#### 进入native页面的左侧社区版 ####

步骤一：  
[https://ionicframework.com/docs/native][https_ionicframework.com_docs_native]  
步骤二：  
[https://ionicframework.com/docs/native/device][https_ionicframework.com_docs_native_device]

#### 以Device为例 ####

1.  在ionic项目目录下安装对应插件，根据官方文档实例
    
        ionic cordova plugin add cordova-plugin-device
        npm install @ionic-native/device

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

1.  首先在使用页面对应的模块中导入并提供
    
    tab1.module.ts
    
        import { Device } from '@ionic-native/device/ngx';
        
        @NgModule({
            imports: [
                IonicModule,
                CommonModule,
                FormsModule,
                RouterModule.forChild([{ path: '', component: Tab1Page }])
            ],
            declarations: [Tab1Page],
            providers: [Device] // 在模块中声明插件
        })
        export class Tab1PageModule {}
    
    在模块中不引入会报如下错误：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]
2.  在对应的页面ts文件中引入并注入：
    
    以tab1.page.ts为例
    
        import { Component } from '@angular/core';
        import { Device } from '@ionic-native/device/ngx';
        
        @Component({
          selector: 'app-tab1',
          templateUrl: 'tab1.page.html',
          styleUrls: ['tab1.page.scss']
        })
        export class Tab1Page {
        
            constructor(private device: Device) {
                alert(JSON.stringify(this.device));
            }
        
        }

#### 效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]

[https_ionicframework.com]: https://ionicframework.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211211/5ad71facfac745c8ab6d994a6b5d4ed6.png
[https_ionicframework.com_docs_native]: https://ionicframework.com/docs/native
[https_ionicframework.com_docs_native_device]: https://ionicframework.com/docs/native/device
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20211211/49f1d511d0aa424a8f5a134f2e3cc268.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]: /images/20211211/8000340dddee4622bc59ae9843c536a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]: /images/20211211/46b6e847766943e8ab263b4f5a03cfa7.png