百度智能小程序 web態(tài)開發(fā)建議

頁面基礎信息

頁面基礎信息 通過 swan.setPageInfo()設置。在 Web 態(tài)環(huán)境下，頁面基礎信息會通過 meta 標簽插入頁面 head 中。恰當?shù)捻撁婊A信息可以幫助爬蟲更精準的理解頁面內(nèi)容。

頁面基礎信息的設置應與頁面本身的內(nèi)容相關。比如：貼吧的一篇貼子詳情頁，應該以貼子的標題作為頁面標題而不是使用“百度貼吧”這樣的標題。

這里的頁面標題與小程序頁面 json 配置中設置的 navigationBarTitleText 不同，navigationBarTitleText 僅用于頁面頂部展示；頁面基礎信息中的 title 不會在頁面中展示，而是在 Web 態(tài)的 title 標簽中。

頁面跳轉

小程序提供了兩種頁面跳轉的方式

• navigator 組件
• 導航 API，包括 navigateTo、redirectTo、switchTab、navigateBack、reLaunch如果兩種方式都能滿足使用場景，建議使用 navigator 組件 實現(xiàn)相應的導航功能，以便更好的被搜索引擎理解。

保證任何小程序頁面都能獨立訪問

通常開發(fā)者會有個誤解，認為小程序只有首頁才有訪問入口，但其實小程序的任何一個頁面都可能被作為入口訪問，比如搜索結果頁可能會分發(fā)二級頁面，用戶也可能通過收藏、分享等操作直接訪問二級頁面，等。因此開發(fā)者應該保證任何頁面都可以不依賴之前的頁面數(shù)據(jù)，獨立被訪問。

舉例說明：

某個小程序有兩種頁面：文章頁和作者介紹頁。

用戶可從文章頁跳轉至作者頁閱讀作者詳情。

錯誤的實現(xiàn)方式如下：

代碼示例

// article.js 在文章頁的實現(xiàn)片段：
function goToAuthorPage() {
    // 從server請求作者信息
    const authorInfo = requestAuthorInfo(authorID);
    // 存入全局變量
    getApp().globalData.authorInfo = authorInfo;
    // 跳轉到作者頁
    swan.navigateTo('/page/author/author');
}

// author.js 在作者頁的實現(xiàn)片段：
Page({
    onLoad() {
        // 從全局讀取存入的作者信息
        const {authorInfo}  = getApp().globalData;
        // 用作者信息數(shù)據(jù)渲染頁面
        this.setData({authorInfo});
    }
})

上述示例代碼存在的問題是，當用戶直接訪問作者頁 ‘page/author/author’ 時，全局數(shù)據(jù)中沒有存入 authorInfo 數(shù)據(jù)，導致頁面渲染異常。

推薦的實現(xiàn)方式是：代碼示例

// article.js 在文章頁的實現(xiàn)片段：
function goToAuthorPage() {
    // 跳轉到作者頁
    swan.navigateTo(`/page/author/author?id=${authorID}`);
}

// author.js 在作者頁的實現(xiàn)片段：
Page({
    onLoad(query) {
        // 從頁面路由參數(shù)中獲取作者 id
        const authorID = query.id;
        // 根據(jù)作者 id 獲取作者信息
        const authorInfo = requestAuthorInfo(authorID);
        // 用作者信息數(shù)據(jù)渲染頁面
        this.setData({authorInfo});
    }
})

如何在運行時識別 Web 態(tài)環(huán)境

在代碼中，可以通過 API getSystemInfo 判斷是否為 Web 態(tài) 環(huán)境。Web 態(tài)環(huán)境下，調(diào)用 swan.getSystemInfo() 得到的系統(tǒng)信息中，platform 值為 "web"。

通常情況下，為保證抓取內(nèi)容相關性和用戶體驗一致性，不建議開發(fā)者區(qū)分 Web 態(tài)環(huán)境做差異化實現(xiàn)。Web 態(tài)環(huán)境標識主要服務于諸如區(qū)分環(huán)境統(tǒng)計等需求場景。

代碼示例

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

        }
    });
}

布局設計時注意視圖差異

對于需要將 Web 態(tài)頁面展現(xiàn)給用戶的場景，視覺設計師需要注意，瀏覽器視圖和客戶端內(nèi)的樣式布局會存在一些差異。如下圖，可以看到瀏覽器由于有頂部瀏覽器地址欄、底部導航欄，所以 Web 態(tài)內(nèi)視圖的高度會略小于端內(nèi)的視圖高度，因此展現(xiàn)的內(nèi)容也會少一點。

在部分瀏覽器下，滾動頁面時固定定位的元素抖動的解決方案

在 iOS 12 及以下的瀏覽器、iOS 13 的 UC 瀏覽器， 固定定位（position 屬性為 fixed）的元素會存在跟隨滾動抖動的問題。具體表現(xiàn)是在頁面滾動時，fixed 定位元素從頁面消失，滾動結束時 fixed 定位元素恢復到其被設置的位置。

針對該問題，需要開發(fā)者進行適配。目前在上述瀏覽器和系統(tǒng)中的 Web 態(tài)內(nèi)使用量較小，并且在逐漸收斂，請根據(jù)實際業(yè)務訴求決定是否適配。

適配方式區(qū)分以下兩種場景：

場景 1：靜態(tài) Fixed 元素，即從初始狀態(tài)就固定在頁面某位置的元素。針對該元素，需要在元素上新增 class 屬性值 swan-web-fixed，同時注意，fixed 的元素要保持 CSS 樣式的獨立性，不能與父容器有樣式依賴關系。Web 態(tài)的運行時會根據(jù)該標識將對應的 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 態(tài)運行時轉化后的實際 DOM 結構（帶有swan-web-fixed標記的 DOM 已經(jīng)移出容器之外，這也是為什么需要保持樣式獨立性的原因）：

<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： 動態(tài) Fixed 元素，即在初始狀態(tài)時位于頁面的文檔正常流內(nèi)，而在頁面滾動過程中，動態(tài)修改 CSS 屬性 position 的值為 fixed 的元素。針對這類元素，Web 態(tài)沒有合適的兼容方式，業(yè)務方只能根據(jù)實際業(yè)務情況從產(chǎn)品或交互設計層面權衡是否規(guī)避此種樣式。

增加保存圖片、視頻等方法的失敗回調(diào)兼容處理

由于 Web 態(tài)環(huán)境的限制，對于涉及到系統(tǒng)相冊、通訊錄存儲的相關 API，如保存圖片、保存視頻、添加到聯(lián)系人等功能方法，均無法在 Web 態(tài)環(huán)境下實現(xiàn)，會執(zhí)行失敗回調(diào)。詳細列表見 Web 態(tài)功能差異一覽表。

針對該問題，需要開發(fā)者進行適配。對于該類方法調(diào)用，設計了相關 UI 界面按鈕的，需要考慮在 Web 態(tài)環(huán)境下隱藏顯示；調(diào)用沒有明確 UI 界面相關連的，則需要考慮在失敗回調(diào)中增加提示，對用戶進行說明與引導。