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

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(目前我无解),还是老老实实用Android9以下打包吧(API 28)

说明:

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

----

AndroidManifest.xml 配置:

application 设置图标节点属性:

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

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

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

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

activity 竖屏节点属性:

android:screenOrientation="portrait"

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

隐藏导航栏以全屏

在AndroidManifest.xml里点击@style/AppTheme跳转至【styles.xml】
<stylename="AppTheme.NoActionBar"parent="Theme.AppCompat.NoActionBar">内新增:

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

非框架使用官方插件方法

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

Capacitor.Plugins.StatusBar.hide();

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

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


欢迎光顾我的小站!