ionic7 使用Capacitor打包 apk 之后，设置网络权限

news2024/11/26 10:16:26

报错处理

在打包的时候遇到过几个问题，这里记录下来两个
Visual Studio Code运行ionic build出错显示ionic : 无法加载文件
ionic 项目通过 android studio 打开报错 capacitor.settings.gradle 文件不存在

ionic7 项目初始化以及打包 apk

这篇文章讲到了如果安装 ionic 以及通过 capacitor 最后打包为 apk : ionic7 从安装到项目启动最后打包成 apk

设置网络权限

如果不设置网络权限，我们打包的项目是无法进行网络请求的。那么我们现在看下怎么设置网络权限吧。

新增网络权限文件

新建 network_security_config.xml 文件，具体路径如下：
新建文件

内容：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <base-config cleartextTrafficPermitted="true" />
</network-security-config>

AndroidMainifest.xml 中设置

新增完了 network_security_config.xml 文件之后，需要在 AndroidMainifest.xml 中增加配置：

内容如下：

android:networkSecurityConfig="@xml/network_security_config"

测试

这里我提供一个用于测试使用的 http 请求地址，方便与测试

https://jsonplaceholder.typicode.com/photos/5

测试调用

test() {
    this.apiService.testData().subscribe((body) => {
      this.msg.infoToast('获取testData的返回值：' + body);
      console.log(body);
      this.msg.infoToast(JSON.stringify(body));
    });
  }

用于的 http 请求代码

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

export enum RequestMethod {
  GET = 'GET',
  HEAD = 'HEAD',
  Post = 'POST',
  PUT = 'PUT',
  DELETE = 'DELETE',
  OPTIONS = 'OPTIONS',
  PATCH = 'PATCH',
}

@Injectable()
export class ApiService {

  headers = new HttpHeaders({
    accept: 'application/json',
    'Content-type': 'application/json;charset=UTF-8',
  });

  constructor(
    private http: HttpClient,
  ) {}

  testData(): Observable<Object> {
    return this.http.get('https://jsonplaceholder.typicode.com/photos/5');
  }

  /**
   * get 方法
   * @param path 调用地址
   * @param args 传入参数
   */
  get(path: string, args?: any): Observable<any> {
    const options = { headers: this.headers, withCredentials: true };
    if (args) {
      options['params'] = this.serialize(args);
    }
    return this.http
      .get(path, options)
      .pipe(catchError(this.checkError.bind(this)));
  }

  /**
   * 报错检查
   * @param error
   * @returns {any}
   */
  private checkError(error: any): any {
    if (error && error.status === 401) {
      console.log(`401${error}`);
    } else {
      console.log(error);
    }
    throw error;
  }

  // 将数据转换为 httpParams
  private serialize(obj: any): HttpParams {
    let params = new HttpParams();

    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        params = params.set(key, obj[key]);
      }
    }
    return params;
  }

}