uni-app 希望能够开发一款能够在移动端一键添加快捷桌面入口的插件 提高h5用户留存

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

uni-app 希望能够开发一款能够在移动端一键添加快捷桌面入口的插件 提高h5用户留存

希望能够开发一款能够在移动端一键添加快捷桌面入口的插件，提高h5用户留存

  • 在选择客户端类型时，使用H5可以极大的降低开发成本，但是用户一般很难记住h5的网址，这会导致用户留存很低。
  • 而使用系统浏览器自带的功能添加到主屏幕的方式，对用户来说操作链路又有点长。
  • 希望能支持用户一键将h5添加到主屏幕(提前预设icon和名称)。
  • 社区找到的方案行不通。求现成的插件。
信息 描述
开发环境 H5
版本号 未提及
项目创建方式 未提及

Harmonyos Next教程
3 回复

manifest.json试过吗


请问最后怎么解决的 求教

在uni-app中实现一个能够在移动端一键添加快捷桌面入口的功能，可以利用一些原生插件或自定义组件来实现。由于uni-app支持使用原生插件，我们可以编写一个原生插件来完成这个功能。以下是一个基于Android平台的实现示例，iOS平台的实现类似，但需要使用Objective-C或Swift。

Android原生插件实现

  1. 创建原生插件

首先，在uni-app项目根目录下创建一个native-plugins目录，并在其中创建一个Android原生插件，比如命名为AddShortcut。

  1. 编写插件代码

在AddShortcut插件中，创建一个AddShortcutModule.java文件，并编写如下代码：

package com.example.addshortcut;

import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.graphics.drawable.Icon;
import android.os.Build;
import android.widget.Toast;

import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

public class AddShortcutModule extends UniModule {
    @JavaScriptInterface
    public void addShortcut(String shortcutName, String shortcutIcon, String shortcutUri, UniJSCallback callback) {
        Context context = getContext();
        Intent shortcutIntent = new Intent(context, context.getClass());
        shortcutIntent.setAction(Intent.ACTION_MAIN);
        shortcutIntent.addCategory(Intent.CATEGORY_LAUNCHER);

        Intent addIntent = new Intent();
        addIntent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
        addIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, shortcutName);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE, Intent.ShortcutIconResource.fromContext(context, R.mipmap.ic_launcher)); // 使用应用图标，或自定义图标资源ID
        } else {
            addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON, Icon.createWithResource(context, R.mipmap.ic_launcher)); // 低于O版本使用此方式
        }

        addIntent.putExtra("duplicate", false);
        addIntent.setAction("com.android.launcher.action.INSTALL_SHORTCUT");
        context.sendBroadcast(addIntent);

        Toast.makeText(context, "Shortcut added", Toast.LENGTH_SHORT).show();
        callback.invokeAndKeepAlive(true);
    }
}

注意：shortcutIcon参数在上述代码中未使用，因为Android O及以上版本需要使用资源ID来设置图标。

  1. 在uni-app中调用插件

在uni-app的页面中，可以通过plus.android.importClass和plus.android.runtimeMainActivity()来调用这个原生插件的方法。例如：

const AddShortcut = plus.android.importClass('com.example.addshortcut.AddShortcutModule');
const main = plus.android.runtimeMainActivity();
const addShortcut = new AddShortcut(main);

addShortcut.addShortcut('My App', '', 'your-app-uri', (res) => {
    console.log('Shortcut added:', res);
});

请注意，这段代码需要在manifest.json中配置好对应的原生插件，并且在实际项目中，你可能需要处理更多的边缘情况和权限问题。

回到顶部