百度小程序增强H5,更优雅地打开百度小程序

09月/06日/小程序/浏览 209

之前,曾讨论过 如何在H5页面打开百度智能小程序 ,使用官方提供的 scheme 生成工具,可以方便的生成 scheme ,在 H5 页面的链接,使用这种 scheme 就可以打开百度小程序。


如果开发者有自己的 H5 页面,在 H5 中想要打开小程序时,可以使用我们提供的 H5 通用调起 SDK——swanInvoke。


swanInvoke 功能:


1. 自动拼接 scheme


2. 判断浏览器和系统环境,选择最佳的方法调用 scheme,打开小程序。


3. 同时支持百度 APP 端内端外跳转


4. 如果跳转失败,引导用户以其他方式打开


使用方法:


1. 引用


像其他 javascript 库一样,在 html 中用 script 标签引入。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 引入 调起sdk 文件 -->
        <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swanInvoke.js"></script>
    </head>
</html>


2. 调起方法


在绑定事件中调用 swanInvoke 方法触发调起功能。


<body>
    <button id='btn'>调起</button>
    <script type="text/javascript">
        document.getElementById('btn').addEventListener('click', function () {
            window.swanInvoke({
                appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
                path: 'pages/view/view',
                query: {
                    id:1,
                    type: 'a'
                }
            });
          });
    </script>
</body>


由于原生能力限制,在某些环境下,scheme 调起必须由用户行为触发。请尽量绑定用户事件触发 swanInvoke 方法。


3. swanInvoke()方法参数说明



这里的 appKey、path、query,对应 scheme 中的同名参数(scheme 参数请参考URL Scheme)。


swanInvoke 方法的 query 可以填写 Object 类型,不需要拼接成类似“aa=1&bb=2“的字符串形式。具体形式参考代码示例。


4. 调起失败


如果用户没有安装百度 APP,或由于某些浏览器或 App 禁止跳转到其他 App,会出现调起失败的情况。调起失败默认跳转到我们提供的中间页,引导用户用其他方式跳转小程序。如果想要自己设置调起失败跳转页面,可以配置 failUrl 参数,代码示例如下:


window.swanInvoke({
    appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
    path: 'pages/view/view',
    // 调起失败跳转的页面
    failUrl: 'https://www.baidu.com'
});


注意:1. 暂不支持在宿主 App 中打开小程序。基础库 3.110.24 以下,百度 App 安卓不支持非百度域的 H5 页面打开小程序。

发表评论

暂无评论,抢个沙发...

客服 工单