xinsuihexu/app-templete

hybrid app templete

混合app模板

一套代码,可编译为h5 + android + ios

技术栈

vue3 + ts + ionic + cordova + vant3

安装

npm install

h5运行

npm serve

h5构建打包

npm build

android 构建打包 android环境安装指南

ios 构建打包 ios环境安装指南

帮助文档

• 《开发规范》
• 《Git使用规范》

生态文档

• vue3
• vue-cli
• cordova
• ionic
• pinia
• Vue Router
• axios
• vant
• less

vscode拓展

• eslint
• csscomb
• volar

注意

• 启动白屏以及启动屏全屏展示处理

在 android/app/src/main/res/values/styles.xml 文件中 更改以下内容：

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item>
</style>

至

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item>
    <item name="android:windowNoTitle">false</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

• 开启定位

在 android/app/src/main/res/AndroidManifest.xml 文件中添加如下权限

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-feature android:name="android.hardware.location.gps" />

• android-studio 生成签名命令： keytool -list -v -keystore xb-benenet-app.jks (本地目录下生成的jks)

• cordova-plugin-alipay-v2 支付宝app支付

// 若android gradle 的版本过高,比如7.3.3,则修改如下
// 将 /node_modules/cordova-plugin-alipay-v2/src/android/lib/alipay.gradle 中的 compile 改为 implementation