追格，重新定义WordPress企业官网，颠覆传统设计，C位出道，惊艳全场

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

追格官方小助手/ 2022年09月06日/ 小程序/ 浏览 1810

之前，曾讨论过 如何在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 页面打开小程序。

百度小程序 scheme swanInvoke

发表评论

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

客服 工单