uni-app网页中调起app并传递参数

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

uni-app网页中调起app并传递参数 最近因为项目需要 要在网页中调起app并传递参数 iOS请参考http://ask.dcloud.net.cn/article/64 Android官方并没有提示 但是我在本地打包的时候发现官方有配置 ：

<data android:scheme="hbuilder" />

所以在网页中通过：

<a class="button-download"  href="hbuilder://你的参数">启动app</a>

就可以启动app 在app中通过：

mui.alert(plus.runtime.arguments,"参数","确定",function(){});

Harmonyos Next教程
1 回复

在uni-app项目中，实现从网页调起App并传递参数通常涉及到几个步骤：在H5页面中触发调起逻辑、在App端监听URL Scheme或Universal Link等，并解析传递的参数。以下是一个简要的实现案例。

1. 在H5页面中触发调起App逻辑

首先，在H5页面中编写JavaScript代码，用于检测App是否已安装，并尝试调起App。如果App未安装，则引导用户下载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open App</title>
    <script>
        function openApp(appId, params) {
            const url = `yourappscheme://open?params=${encodeURIComponent(JSON.stringify(params))}`;
            const timeout = 2000; // 超时时间
            const iframe = document.createElement('iframe');
            iframe.src = url;
            iframe.style.display = 'none';
            const openTime = +new Date();
            iframe.onload = function () {
                if ((+new Date() - openTime) < timeout) {
                    // App调起成功
                    setTimeout(() => {
                        window.location.href = 'success_page_url'; // 可选：调起成功后跳转页面
                    }, 0);
                } else {
                    // 超时未响应，App未安装
                    window.location.href = `download_page_url?appId=${appId}`;
                }
            };
            document.body.appendChild(iframe);

            setTimeout(() => {
                document.body.removeChild(iframe);
                window.location.href = `download_page_url?appId=${appId}`; // 超时处理
            }, timeout);
        }

        // 调用函数，传递App ID和参数
        openApp('yourAppId', { userId: '12345', action: 'openProfile' });
    </script>
</head>
<body>
</body>
</html>

2. 在App端监听URL Scheme

在uni-app项目中，需要在manifest.json中配置URL Scheme，然后在App.vue或具体页面中监听并解析传递的参数。

配置URL Scheme (manifest.json):

{
    "mp-weixin": {},
    "app-plus": {
        "distribute": {
            "apple": {},
            "android": {},
            "sdkConfigs": {}
        },
        "urlCheck": false,
        "schemas": [
            "yourappscheme"
        ]
    }
}

在App.vue中监听URL参数:

<script>
export default {
    onLaunch: function (options) {
        if (options && options.query) {
            const params = JSON.parse(decodeURIComponent(options.query.params));
            console.log('Received params:', params);
            // 根据params执行相应操作
        }
    }
}
</script>

上述代码实现了从H5页面调起uni-app并传递参数的基本流程。注意，实际项目中可能需要根据具体需求调整URL Scheme、参数格式和超时时间等。

回到顶部