Capacitor可以打包web应用至APP,兼容大部分Cordova插件。
安装方法(安卓):
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)
说明:
图标设置
首先,安装 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\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,用户当前设置的方向
隐藏顶部状态栏以全屏
<style name="AppTheme" 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();
Comments | NOTHING