Capacitor打包APP应用

由 夕空 撰写于  2021年1月22日

Capacitor可以打包web应用至APP,兼容大部分Cordova插件。

官网:https://capacitorjs.com/

安装方法(安卓):

1.安装Android Studio

软件里安装需要的
Android-> SDK及模拟器,若无法运行模拟器,需要到bios 找到“Intel Virtualization Technology”设置
Enable。
(安装完后最好配置下SDK及模拟器路径,在C盘太占空间了)

2.在指定目录cmd运行

直接构建基础框架(会提示输出APP名及包名)

npx @capacitor/cli create

重要说明:由于官方3.0版本更新,2.0方法需要版本号(有时候项目需要兼容低版本安卓且不能用新JS方法)

npx @capacitor/cli@2.4.7 create

填写完信息,在package.json内:

"dependencies": {
"@capacitor/android": "^2.4.7",
"@capacitor/cli": "^2.4.7",
"@capacitor/core": "^2.4.7"
}

npm install


CD至创建的项目目录,转Android Studio工程文件

npx cap add android
npx cap sync
npx cap copy

Android Studio打开

npx cap open android

打包APK方法:

Build——Generate Signed Bundle / APK

使用Android9以上的SDK打包,将无法远程get post,提示配置安全域No Network Security Config specified(猜测需要https链接,目前我无解),还是老老实实用Android9以下打包吧(API 28)

说明:

www目录内就是web项目文件,项目有修改,需要 npx cap copy 来更新至安卓工程文件里。
如果npm了插件,则需要 npx cap sync 同步一下。

图标设置

首先,安装 cordova-res

$ npm install -g cordova-res

将一个图标和一个初始屏幕文件放在项目顶级 resources 文件夹中,如下所示:

resources/
├── icon.png
└── splash.png

注意:
resources/icon.(png|jpg)必须至少为1024×1024px
resources/splash.(png|jpg)
必须至少为2732×2732px

接下来,运行以下命令生成所有图像,随后将复制到本机项目中:

$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy
----

AndroidManifest.xml 配置:

application 设置图标节点属性:

android:icon="@drawable/ic_launcher"
android:roundIcon="@drawable/ic_launcher"

图标路径 android\app\src\main\res\drawable\ic_launcher.png

xml设置图标可忽略,推荐使用上面的

application 硬件加速及http网络请求信任:

android:hardwareAccelerated="true"
android:usesCleartextTraffic="true"
(此处解决video视频标签无法播放问题)

如果使用目录Directory. Android 10前的老机型

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

activity 竖屏节点属性:

android:screenOrientation="landscape"

  • unspecified,默认值,由系统决定,不同手机可能不一致
  • landscape,强制横屏显示
  • portrait,强制竖屏显
  • behind,与前一个activity方向相同
  • sensor,根据物理传感器方向转动,用户90度、180度、270度旋转手机方向,activity都更着变化
  • sensorLandscape,横屏旋转,一般横屏游戏会这样设置
  • sensorPortrait,竖屏旋转
  • nosensor,旋转设备时候,界面不会跟着旋转。初始化界面方向由系统控制
  • user,用户当前设置的方向

隐藏顶部状态栏以全屏

在AndroidManifest.xml里点击@style/AppTheme跳转至【styles.xml】
style AppTheme节点修改为:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

<style name="AppTheme.NoActionBar"parent="Theme.AppCompat.NoActionBar">内新增:

<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>

鸿蒙系统不支持沉浸式全屏,需要按上面修改styles.xml

非框架使用官方插件方法

由于官方教程import引用的方式是在框架基础上,如果您不想使用捆绑器/框架,则可以进行设置 "bundledWebRuntime": true在 capacitor.config.json
可直接全局变量调用(Capacitor.Plugins)隐藏状态栏举例:

Capacitor.Plugins.StatusBar.hide();

声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Capacitor打包APP应用


欢迎光顾我的小站!