flutter h5网页端唤起app

编程知识更新时间:2023-05-02 19:58:07

callapp-lib属性参考

flutter 网页端唤起app

场景需求：通过微信链接唤醒app，引导用户下载注册，如果用户安装了app则打开app，如果未安装则引导到下载地址。
以下方案：可以做到iPhone 和 Android 浏览器中打开app和引导下载。
微信中会屏蔽，后续补充

网页端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
// 这里通过引入js方式使用callapp-lib
<script src="https://unpkg/callapp-lib@3.1.2/dist/index.umd.js"></script>
<body>
<h1>功能场景之“一键拉起”</h1>
<button onclick="awakenFun()">立即下载</button>
<script>
    function awakenFun() {
        let getMobelType = getMobelType();
        console.log(getMobelType);
        if (getMobelType.weixin) {
            alert("Please copy the link and open the web address in your browser")
        } else {
            const options = {
                // scheme://host:port/path?qureyParameter=queryString
                scheme: {
                    // APP 协议，URL Scheme 的 scheme 字段，就是你要打开的 APP 的标识。
                    protocol: 'com.wlny.appscheme://wlny'
                },
                intent: {
                    package: 'wlny',
                    scheme: 'com.wlny.appscheme://wlny'
                },
                // universal: "https://www.wlny/app/",
                // 填写appstore的下载地址
                appstore: '',
                // 填写应用宝的下载地址
                yingyongbao: '',
                fallback: 'http://www.baidu'
            };
            const callLib = new CallApp(options);
            callLib.open({

                // param: url.param,
                param: '',
                // 需要打开的页面对应的值，URL Scheme 中的 path 部分
                // 只想要直接打开 app ，不需要打开特定页面，path 传空字符串 '' 就可以
                path: '',
                // callback:'https://flutterchina.club/get-started/install/'
            });
        }
    }
    // 首先可能需要判断当前浏览器的来源
    // Android和iOS在微信都是不可以唤起的
    function  getMobelType()  {
        var  browser  =   {
            versions:   function()  {
                var  u  =  window.navigator.userAgent;
                return  {
                    trident:  u.indexOf('Trident')  >  -1, //IE内核
                    presto:  u.indexOf('Presto')  >  -1, //opera内核
                    Alipay:  u.indexOf('Alipay')  >  -1, //支付宝
                    webKit:  u.indexOf('AppleWebKit')  >  -1, //苹果、谷歌内核
                    gecko:  u.indexOf('Gecko')  >  -1  &&  u.indexOf('KHTML')  ==  -1, //火狐内核
                    mobile:  !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios:  !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android:  u.indexOf('Android')  >  -1  ||  u.indexOf('Linux')  >  -1, //android终端或者uc浏览器
                    iPhone:  u.indexOf('iPhone')  >  -1  ||  u.indexOf('Mac')  >  -1, //是否为iPhone或者安卓QQ浏览器
                    //iPhone: u.match(/iphone|ipod|ipad/),//
                    iPad:  u.indexOf('iPad')  >  -1, //是否为iPad
                    webApp:  u.indexOf('Safari')  ==  -1, //是否为web应用程序，没有头部与底部
                    weixin:  u.indexOf('MicroMessenger')  >  -1, //是否为微信浏览器
                    qq: u.match(/\sQQ/i) !== null, //是否QQ
                    Safari:  u.indexOf('Safari')  >  -1,
                    ///Safari浏览器,
                };
            }()
        };
        return  browser.versions;
    }
</script>
</body>
</html>

安卓端 AndroidManifest.xml

<intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="com.wlny.appscheme" android:host="wlny"/>
            </intent-filter>