uni-app 开发launcher

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 开发launcher 使用uniapp怎么开发一个桌面应用呢？

其实最主要的就是添加一下配置：

<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
<category android:name="android.intent.category.HOME"/>
<category android:name="android.intent.category.DEFAULT"/>

那么如何去配置呢？

首先使用uniapp云打包，拿到apk文件，在使用反编译工具编辑apk。

得到AndroidManifest.xml文件，在此文件第一个activity便签下添加以上的配置。

添加好之后，再次编译文件到apk。

这样一个launcher程序就写好了。

按照以下网址使用，编译apk，和回编apk

反编译apk：https://juejin.cn/post/6981734318791983135
回编译apk：https://blog.csdn.net/u013265344/article/details/85004002

反编译的时候有的时候xml文件不对，使用：

java -jar apktool.jar d -f .\app.apk -o serial --only-main-classes

附加：

launcher开发出来之后，有些用户场景需要去监听app添加、卸载。

在App.vue文件onLaunch下添加以下代码即可。

// 监听应用的添加
var receiver;
var mainActivity = plus.android.runtimeMainActivity();
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var filter = new IntentFilter();
var Intent = plus.android.importClass('android.content.Intent');
plus.android.importClass('android.content.BroadcastReceiver');
receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
    onReceive: function(context, intent) { // 实现onReceiver回调函数
        plus.android.importClass(intent);
        var packageName = intent.getDataString(); // 包名
        var action = intent.getAction();  // 监听的方法
        // mainActivity.unregisterReceiver(receiver); 关闭监听
    }
});
filter.addDataScheme("package");
// filter.addAction(Intent.ACTION_PACKAGE_ADDED);  // 监听app添加
// filter.addAction(Intent.ACTION_PACKAGE_REMOVED);  // 监听app卸载
filter.addAction(Intent.ACTION_PACKAGE_REPLACED); // 监听app升级安装
mainActivity.registerReceiver(receiver, filter); // 注册监听
// 监听应用的添加结束

Harmonyos Next教程
1 回复

在uni-app开发中，launcher 通常不是一个标准术语，但我假设你是指创建一个应用的启动画面（Splash Screen）或者某种启动逻辑的实现。在uni-app中，实现一个启动画面或者启动逻辑通常涉及页面的生命周期函数和一些配置。

以下是一个简单的例子，展示如何在uni-app中实现一个启动画面，并在加载完成后跳转到主页面。

1. 配置启动画面页面

首先，你需要在pages.json中配置你的启动画面页面，例如pages/splash/splash。

{
  "pages": [
    {
      "path": "pages/splash/splash",
      "style": {
        "navigationBarTitleText": "启动画面",
        "app-plus": {
          "titleNView": false,
          "autoBackButton": false,
          "popGesture": false
        }
      }
    },
    // 其他页面配置...
  ]
}

2. 创建启动画面页面

在pages/splash/splash.vue中，你可以编写如下代码：

<template>
  <view class="container">
    <image class="logo" src="/static/logo.png" />
    <text class="text">加载中...</text>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.startSplash();
  },
  methods: {
    startSplash() {
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/index/index' // 跳转到主页面
        });
      }, 3000); // 假设启动画面显示3秒
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.logo {
  width: 100px;
  height: 100px;
}
.text {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}
</style>

3. 注意事项

  • 确保你的图片资源（如/static/logo.png）已经正确放置在项目中。
  • setTimeout的延迟时间可以根据实际需求调整。
  • 如果你需要在启动画面中进行网络请求或者其他异步操作，可以在startSplash方法中进行，并根据操作结果决定是否跳转页面。

这个例子展示了如何在uni-app中实现一个简单的启动画面，并在一定时间后跳转到主页面。根据你的实际需求，你可以进一步扩展和优化这个逻辑。

回到顶部