使用cordova + ionic4 + angular使用步骤

柔光的暖阳◎ 2023-06-29 10:48 20阅读 0赞

**第一步安装**

$ npm install -g cordova ionic

**第二步利用官方提供的模板创建一个项目   **

myApp项目名    tabs blank sidemenu是3个模板   创建的时候内部script我们选择 angularJS

$ ionic start myApp tabs
    $ ionic start myApp blank
    $ ionic start myApp sidemenu

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70][]

**第三步 打包编译运行**

//安装部署到模拟器和设备的插件
    
    npm install -g ios-sim
    npm install -g ios-deploy
    
    
    //运行项目:
    
    $ cd myApp
    $ ionic serve
    
    //打包成单页面项目运行在微信/web浏览器:
    
    $ ionic build
    
    //打包成混合app项目:
    
    $ ionic build
    $ ionic cordova platform add ios
    $ ionic cordova run android

第四步 增加摄像头插件

//在index.html里边的head标签下手动追加
    <script src="cordova.js"></script>
    
    //安装插件
    
    ionic cordova plugin add cordova-plugin-camera
    npm install @ionic-native/camera
    
    
    //在config.xml下的<widget>标签最后增加
    
     <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
         <string>Used to take pictures</string>
     </edit-config>
    
    
    //在app.module.ts下增加
    
    import { Camera } from '@ionic-native/camera/ngx';
    providers: [
        StatusBar,
        SplashScreen,
        Camera,  //这里增加
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
      ],
    
    
    //在要使用的页面下引入
    
    import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
    
    constructor(private camera: Camera) { }
    
    
    export class Tab2Page {
      currentImage: any;
    
      constructor(private camera: Camera) { }
    
      takePicture() {
        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) => {
          this.currentImage = 'data:image/jpeg;base64,' + imageData;
        }, (err) => {
          // Handle error
          console.log("Camera issue:" + err);
        });
      }
    }

至此就可以使用这个插件了
    
    第五步 代码调试部分
      1.先运行项目. 
        $ cd myApp
        $ ionic serve   //找到启动服务的端口
      2.在VSCODE的DEBUG调试里添加chorm调试.配置文件如下.把端口改为上边服务的端口就可以了

**安卓和苹果的调试环境配置**

Did you remote debug the problem on the device already?  
Follow these instructions here to debug the problem in Safari dev tools:  
[https://ionic.zone/debug/remote-debug-your-app\#ios][https_ionic.zone_debug_remote-debug-your-app_ios]  
Follow these instructions here to debug the problem in Chrome dev tools:  
[https://ionic.zone/debug/remote-debug-your-app\#android][https_ionic.zone_debug_remote-debug-your-app_android]  
Look at the console and network tabs for errors.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200112111254902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu,size_16,color_FFFFFF,t_70
[https_ionic.zone_debug_remote-debug-your-app_ios]: https://ionic.zone/debug/remote-debug-your-app#ios
[https_ionic.zone_debug_remote-debug-your-app_android]: https://ionic.zone/debug/remote-debug-your-app#android