百度智能小程序 web态开发建议

页面基础信息

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

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

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

页面跳转

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

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

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

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

举例说明：

某个小程序有两种页面：文章页和作者介绍页。

用户可从文章页跳转至作者页阅读作者详情。

错误的实现方式如下：

代码示例

// 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 数据，导致页面渲染异常。

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

// 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});
    }
})

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

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

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

代码示例

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

        }
    });
}

布局设计时注意视图差异

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

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

在 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 态没有合适的兼容方式，业务方只能根据实际业务情况从产品或交互设计层面权衡是否规避此种样式。

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

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

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