Web 态开发建议

Web 态开发建议

在 Web 态概述中，我们介绍了 Web 态的使用场景及调试方式。本文档给出了一些开发建议，以保障在搜索场景的自然流量和端外分享的用户体验。
除了阅读以下基本建议以外，还可通过 Web 态功能差异一览表的索引，查看 Web 态与百度 APP 端内组件及 API 级别的功能差异点。

1. 页面基础信息

页面基础信息通过 swan.setPageInfo 设置。在 Web 态环境下，页面基础信息会通过 meta 标签插入页面 head 中。
恰当的页面基础信息可以帮助爬虫更精准的理解页面内容。

页面基础信息的设置应与页面本身的内容相关。比如：贴吧的一篇贴子详情页，应该以贴子的标题作为页面标题而不是使用“百度贴吧”这样的标题。

这里的页面标题与小程序页面 json 配置中设置的navigationBarTitleText不同，navigationBarTitleText仅用于页面顶部展示；页面基础信息中的 title 不会在页面中展示，而是在 Web 态的 title 标签中。

2. 页面跳转

小程序提供了两种页面跳转的方式

navigator 组件
导航 API，包括 navigateTo、redirectTo、switchTab、navigateBack、reLaunch
如果两种方式都能满足使用场景，建议使用 navigator 组件实现相应的导航功能，以便更好的被搜索引擎理解。

3. 保证任何小程序页面都能独立访问

通常开发者会有个误解，认为小程序只有首页才有访问入口，但其实小程序的任何一个页面都可能被作为入口访问，比如搜索结果页可能会分发二级页面，用户也可能通过收藏、分享等操作直接访问二级页面，等。
因此开发者应该保证任何页面都可以不依赖之前的页面数据，独立被访问。

举例说明：
某个小程序有两种页面：文章页和作者介绍页。
用户可从文章页跳转至作者页阅读作者详情。

错误的实现方式如下：
代码示例

/* Bad Code */
// article.js 在文章页的实现片段：
function goToAuthorPage() {
    // 从server请求作者信息
    const authorInfo = requestAuthorInfo(authorID);
    // 存入全局变量
    getApp().globalData.authorInfo = authorInfo;
    // 跳转到作者页
    swan.navigateTo('/page/author/author');
}
// author.js 在作者页的实现片段：
Page({
    onLoad() {
        // 从全局读取存入的作者信息
        const {authorInfo}  = getApp().globalData;
        // 用作者信息数据渲染页面
        this.setData({authorInfo});
    }
})

上述示例代码存在的问题是，当用户直接访问作者页 ‘page/author/author’ 时，全局数据中没有存入 authorInfo 数据，导致页面渲染异常。

推荐的实现方式是：
代码示例

/* Good Code */
// article.js 在文章页的实现片段：
function goToAuthorPage() {
    // 跳转到作者页
    swan.navigateTo(`/page/author/author?id=${authorID}`);
}
// author.js 在作者页的实现片段：
Page({
    onLoad(query) {
        // 从页面路由参数中获取作者 id
        const authorID = query.id;
        // 根据作者 id 获取作者信息
        const authorInfo = requestAuthorInfo(authorID);
        // 用作者信息数据渲染页面
        this.setData({authorInfo});
    }
})

4. 如何在运行时识别 Web 态环境

在代码中，可以通过 API getSystemInfo 判断是否为 Web 态环境。Web 态环境下，调用 swan.getSystemInfo()得到的系统信息中，platform 值为"web"。

通常情况下，为保证抓取内容相关性和用户体验一致性，不建议开发者区分 Web 态环境做差异化实现。
Web 态环境标识主要服务于诸如区分环境统计等需求场景。

代码示例

getSystemInfo(e) {
    swan.getSystemInfo({
        success: res => {
            // web
            console.log('res', res.platform);
        },
        fail: err => {
        }
    });
}

5. 布局设计时注意视图差异

对于需要将 Web 态页面展现给用户的场景，视觉设计师需要注意，浏览器视图和客户端内的样式布局会存在一些差异。
如下图，可以看到浏览器由于有顶部浏览器地址栏、底部导航栏，所以 Web 态内视图的高度会略小于端内的视图高度，因此展现的内容也会少一点。

6. 请勿操作框架样式

请勿选取或操作 body、html 及 Web 态小程序框架的样式，否则会导致页面整体显示异常。

/* Bad Code */
body {
  background: yellow;
}

7. 在部分浏览器下，滚动页面时固定定位的元素抖动的解决方案

在 iOS 12 及以下的浏览器、iOS 13 的 UC 浏览器，固定定位（position 属性为 fixed）的元素会存在跟随滚动抖动的问题。具体表现是在页面滚动时，fixed 定位元素从页面消失，滚动结束时 fixed 定位元素恢复到其被设置的位置。

针对该问题，需要开发者进行适配。目前在上述浏览器和系统中的 Web 态内使用量较小，并且在逐渐收敛，请根据实际业务诉求决定是否适配。

适配方式区分以下两种场景：

场景 1：静态 Fixed 元素，即从初始状态就固定在页面某位置的元素。针对该元素，需要在元素上新增 class 属性值 swan-web-fixed，同时注意，fixed 的元素要保持 CSS 样式的独立性，不能与父容器有样式依赖关系。Web 态的运行时会根据该标识将对应的 DOM 提取到小程序页面容器之外，避免元素抖动。

代码示例

<view class="page-wrapper">
    <view class="header swan-web-fixed">
        <view>button 1</view>
        <view>button 2</view>
    </view>
    <view class="content"></view>
</view>

.page-wrapper{
    font-size: 12px;
}
.page-wrapper .content{
    color: red;
}
.header{
    /* 注意：此处的 header 样式需要独立，不能和父容器有继承关系，且不要依赖父容器的继承样式 */
    font-size: 12px;
    color: blue;
}

被 Web 态运行时转化后的实际 DOM 结构（带有swan-web-fixed标记的 DOM 已经移出容器之外，这也是为什么需要保持样式独立性的原因）：

<template class='web-container'>
    <view class="page-wrapper">
        <view class="content"></view>
    </view>
</template>
<view class="header swan-web-fixed">
    <view>button 1</view>
    <view>button 2</view>
</view>

场景 2： 动态 Fixed 元素，即在初始状态时位于页面的文档正常流内，而在页面滚动过程中，动态修改 CSS 属性 position 的值为 fixed 的元素。针对这类元素，Web 态没有合适的兼容方式，业务方只能根据实际业务情况从产品或交互设计层面权衡是否规避此种样式。

8. 增加保存图片、视频等方法的失败回调兼容处理

由于 Web 态环境的限制，对于涉及到系统相册、通讯录存储的相关 API，如保存图片、保存视频、添加到联系人等功能方法，均无法在 Web 态环境下实现，会执行失败回调。详细列表见 Web 态功能差异一览表。

针对该问题，需要开发者进行适配。对于该类方法调用，设计了相关 UI 界面按钮的，需要考虑在 Web 态环境下隐藏显示；调用没有明确 UI 界面相关连的，则需要考虑在失败回调中增加提示，对用户进行说明与引导。

9. 关于爬虫抓取

生成的 Web 态页面会提供给搜索爬虫抓取，从而建立小程序页面索引。爬虫的抓取方式不仅针对静态的 html 文本，页面中的动态数据渲染和样式布局等也会对爬虫识别有效信息起到至关重要的作用。

爬虫的 UserAgent 信息为：
Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 (compatible; Baiduspider-render/2.0; Smartapp; +http://www.baidu.com/search/spider.html)

10. 资源访问限制

1. Referer 校验

如果开发者的服务端存在 referer 检验，开发者需要将 Web 态域名添加到 referer 校验白名单中。Web 态域名获取方式见 Web 态预览。

<你的小程序域名前缀>.smartapps.cn

对于 CSS 层叠样式表中 background 背景图像的资源请求还需要将以下 CDN 域名地址都添加到图片资源服务的 referer 校验白名单中。

https://spwebbj.cdn.bcebos.com/
https://spwebsz.cdn.bcebos.com/
https://sp-webpkg.cdn.bcebos.com/

2. HTTPS 安全限制

小程序内只支持 HTTPS 协议和 wss 协议，不允许访问 HTTP 协议的资源。请确保小程序内的请求均是基于 HTTPS 协议的请求。

注意：部分开发者会使用 web-view 组件嵌入第三方页面，第三方页面请求了 HTTP 的资源，从而导致展现异常。此类问题较隐蔽，需要注意避免。
部分开发者使用了 HTTP 协议的图片资源或字体资源等，同样会被浏览器拦截，需要注意避免。

3. web-view 白名单限制

小程序内调用 web-view 组件打开的网页有域名限制，使用 web-view 之前，需要确保已经在小程序开发者平台配置了业务域名白名单，参考 web-view 组件说明。

4. request 白名单限制

小程序内发起 request 请求有域名限制，使用 request 时，需要确保已经在小程序开发者平台配置了服务器域名白名单，参考 request 使用注意事项。

注意：部分开发者 web-view 组件或 request 请求的 URL 为服务端动态下发，下发了未在白名单的 URL。此类问题较隐蔽，需要注意避免。

11. Web 态小程序调起百度 App 小程序流程

在移动端访问 Web 态小程序时，如遇一些无法支持的能力，或点击顶部回流栏的”打开”按钮，会触发打开百度 App 功能，将会打开百度 App 对应的小程序页面。会触发该功能的能力，请参考组件和 API 文档。
由于设备系统、浏览器不同，不同环境下访问 Web 态小程序时，打开百度 App 的过程有所不同。下面对不同系统、不同浏览器下打开百度 App 小程序的过程做详细说明。

iOS 微信
触发打开百度 App 功能时，点击微信弹窗继续，打开百度 App 小程序。
iOS QQ
触发打开百度 App 功能时，进入 App Store 。点击打开按钮，打开百度 App 小程序。
iOS UC 浏览器
触发打开百度 App 功能时，展示 UC 浏览器引导页。根据引导，长按按钮后在新窗口中打开，进入 App Store 点击打开按钮，打开百度 App 小程序。
Android 微信或 QQ

触发打开百度 App 功能时，跳转第三方应用宝页面，调起百度 App 流程由第三方应用宝控制，不同机型调起流程可能不同。
Android 系统浏览器
不同厂商安卓设备的系统浏览器能力不同，暂时无法概括地说明情况。部分浏览器不支持打开百度 App。

随系统和浏览器更新，以上流程可能会有变化。