---

Ionic 介绍

Ionic 是移动端开发框架，以下罗列几个官方链接助力开发：
一键创建项目
官方文档
Ionic 图标库

---

创建项目

进入 https://ionicframework.com/start#basics 进行创建项目。
它支持React、Angular、Vue三大框架，大家可以根据需要进行个性化选择。

点击 Create App进行创建项目.

创建完成后选择存放项目的位置

我这边选择Github，登录后点击Choose，等待创建即可...

最后将项目拉到本地，用编辑器打开，输入npm install && ionic serve 将项目跑起来

项目运行成功

---

移动端适配的方式

第一步：在app文件夹下创建app.scss文件

/*app.scss*/
$vm_design: 375;

@function rem($px) {
    @return (100vw / $vm_design) * $px;
}
1
2
3
4
5
6

第二步：在tab1.page.html 的ion-content中写入Dai
第三步：在tab1.page.scss引入并使用

@import "../app.scss";
.font{
    font-size: rem(120);
}
1
2
3
4

手机屏幕不论是宽还是窄，都会进行类似于同比例的放大或缩小

---

Ionicons 的使用方法

进入官网 https://ionic.io/ionicons ，点击相应图标，复制相应代码粘贴到项目中即可。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    ion-title>
  ion-toolbar>
ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1ion-title>
    ion-toolbar>
  ion-header>

  <app-explore-container name="Tab 1 page">app-explore-container>
  <span class="font">Dai<ion-icon name="airplane-outline">ion-icon>span>
ion-content>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

打包项目

网页

使用命令：ionic build

注意点：根据项目的需求，打包路径需要修改的话，请在 angular.json 文件中设置 baseHref，然后再进行ionic build。

最终打包生成了 www 的打包文件，这个就可以用来部署到网页上。

---

Android

【需要先安装Android Studio 以及JAVA和sdk】
打包命令（注意删除打包网页时设置的baseHref）：
ionic capacitor add android （生成Android包）
ionic capacitor build android（生成Android包并且用模拟器打开）

在Android中运行成功！

生成apk

第一步

第二步：选择APK，NEXT

第三步:Create new...

第四步：选择jks文件路径，也可以新建jks文件

第五步：设置密码，注意：Certificate内必填一项

第六步：NEXT

第七步：选择debug或者release进行导出，FINISH

最后导出完毕后，会在app/release中会生成app-release.apk，这个文件发送到手机即可安装app

---

其他知识点

设置apk名称

//build.gradle
android.applicationVariants.all(variant ->{
      variant.outputs.all{
        outputFileName = "IonicAppAPK.apk"
      }
    })
1
2
3
4
5
6

这样子每次导出的包名称都是IonicAppAPK.apk!

设置网络权限

如果不进行网络权限的设置，该项目是不能进行网络请求的。

第一步：新建network_security_config.xml文件

//network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>

<network-security-config>

  <base-config cleartextTrafficPermitted="true" />

</network-security-config>

1
2
3
4
5
6
7
8
9

在AndroidMainifest.xml中设置

android:networkSecurityConfig="@xml/network_security_config"
1

这样子就可以进行网络请求了！！！