新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：Web態(tài)開發(fā)建議

Web 態(tài)開發(fā)建議
- 1. 頁面基礎(chǔ)信息
- 2. 頁面跳轉(zhuǎn)
- 3. 保證任何小程序頁面都能獨立訪問
- 4. 如何在運行時識別 Web 態(tài)環(huán)境
- 5. 布局設(shè)計時注意視圖差異
- 6. 請勿操作框架樣式
- 7. 在部分瀏覽器下，滾動頁面時固定定位的元素抖動的解決方案
- 8. 增加保存圖片、視頻等方法的失敗回調(diào)兼容處理
- 9. 關(guān)于爬蟲抓取
- 10. 資源訪問限制
  - 1. Referer 校驗
  - 2. HTTPS 安全限制
  - 3. web-view 白名單限制
  - 4. request 白名單限制
- 11. Web 態(tài)小程序調(diào)起百度 App 小程序流程

Web 態(tài)開發(fā)建議

在 Web 態(tài)概述中，我們介紹了 Web 態(tài)的使用場景及調(diào)試方式。本文檔給出了一些開發(fā)建議，以保障在搜索場景的自然流量和端外分享的用戶體驗。
除了閱讀以下基本建議以外，還可通過 Web 態(tài)功能差異一覽表的索引，查看 Web 態(tài)與百度 APP 端內(nèi)組件及 API 級別的功能差異點。

樂昌網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,樂昌網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為樂昌1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的樂昌做網(wǎng)站的公司定做！

1. 頁面基礎(chǔ)信息

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

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

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

2. 頁面跳轉(zhuǎn)

小程序提供了兩種頁面跳轉(zhuǎn)的方式

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

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

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

舉例說明：
某個小程序有兩種頁面：文章頁和作者介紹頁。
用戶可從文章頁跳轉(zhuǎn)至作者頁閱讀作者詳情。

錯誤的實現(xiàn)方式如下：
代碼示例

 
 
 
  
  
  /* Bad Code */  
  
  // article.js 在文章頁的實現(xiàn)片段：  
  
  function goToAuthorPage() {  
  
   // 從server請求作者信息  
  
   const authorInfo = requestAuthorInfo(authorID);  
  
   // 存入全局變量  
  
   getApp().globalData.authorInfo = authorInfo;  
  
   // 跳轉(zhuǎn)到作者頁  
  
   swan.navigateTo('/page/author/author');  
  
  }  
  
    
  
  // author.js 在作者頁的實現(xiàn)片段：  
  
  Page({  
  
   onLoad() {  
  
   // 從全局讀取存入的作者信息  
  
   const {authorInfo} = getApp().globalData;  
  
   // 用作者信息數(shù)據(jù)渲染頁面  
  
   this.setData({authorInfo});  
  
   }  
  
  })

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

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

 
 
 
  
  
  /* Good Code */  
  
  // article.js 在文章頁的實現(xiàn)片段：  
  
  function goToAuthorPage() {  
  
   // 跳轉(zhuǎn)到作者頁  
  
   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});  
  
   }  
  
  })

4. 如何在運行時識別 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)容相關(guān)性和用戶體驗一致性，不建議開發(fā)者區(qū)分 Web 態(tài)環(huán)境做差異化實現(xiàn)。
Web 態(tài)環(huán)境標(biāo)識主要服務(wù)于諸如區(qū)分環(huán)境統(tǒng)計等需求場景。

代碼示例

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

5. 布局設(shè)計時注意視圖差異

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

6. 請勿操作框架樣式

請勿選取或操作 body、html 及 Web 態(tài)小程序框架的樣式，否則會導(dǎo)致頁面整體顯示異常。

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

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

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

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

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

場景 1：靜態(tài) Fixed 元素，即從初始狀態(tài)就固定在頁面某位置的元素。針對該元素，需要在元素上新增 class 屬性值 swan-web-fixed，同時注意，fixed 的元素要保持 CSS 樣式的獨立性，不能與父容器有樣式依賴關(guān)系。Web 態(tài)的運行時會根據(jù)該標(biāo)識將對應(yīng)的 DOM 提取到小程序頁面容器之外，避免元素抖動。

代碼示例

 
 
 
  
  
    
  
     
  
   button 1  
  
   button 2

 
 
 
  
  
  .page-wrapper{  
  
   font-size: 12px;  
  
  }  
  
  .page-wrapper .content{  
  
   color: red;  
  
  }  
  
  .header{  
  
   /* 注意：此處的 header 樣式需要獨立，不能和父容器有繼承關(guān)系，且不要依賴父容器的繼承樣式 */  
  
   font-size: 12px;  
  
   color: blue;  
  
  }

被 Web 態(tài)運行時轉(zhuǎn)化后的實際 DOM 結(jié)構(gòu)（帶有swan-web-fixed標(biāo)記的 DOM 已經(jīng)移出容器之外，這也是為什么需要保持樣式獨立性的原因）：

 
 
 
  
  
    
  
    
  
   button 1  
  
   button 2

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

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

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

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

9. 關(guān)于爬蟲抓取

生成的 Web 態(tài)頁面會提供給搜索爬蟲抓取，從而建立小程序頁面索引。爬蟲的抓取方式不僅針對靜態(tài)的 html 文本，頁面中的動態(tài)數(shù)據(jù)渲染和樣式布局等也會對爬蟲識別有效信息起到至關(guān)重要的作用。

爬蟲的 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 校驗

如果開發(fā)者的服務(wù)端存在 referer 檢驗，開發(fā)者需要將 Web 態(tài)域名添加到 referer 校驗白名單中。Web 態(tài)域名獲取方式見 Web 態(tài)預(yù)覽。

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

對于 CSS 層疊樣式表中 background 背景圖像的資源請求還需要將以下 CDN 域名地址都添加到圖片資源服務(wù)的 referer 校驗白名單中。

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

2. HTTPS 安全限制

小程序內(nèi)只支持 HTTPS 協(xié)議和 wss 協(xié)議，不允許訪問 HTTP 協(xié)議的資源。請確保小程序內(nèi)的請求均是基于 HTTPS 協(xié)議的請求。

注意：部分開發(fā)者會使用 web-view 組件嵌入第三方頁面，第三方頁面請求了 HTTP 的資源，從而導(dǎo)致展現(xiàn)異常。此類問題較隱蔽，需要注意避免。
部分開發(fā)者使用了 HTTP 協(xié)議的圖片資源或字體資源等，同樣會被瀏覽器攔截，需要注意避免。

3. web-view 白名單限制

小程序內(nèi)調(diào)用 web-view 組件打開的網(wǎng)頁有域名限制，使用 web-view 之前，需要確保已經(jīng)在小程序開發(fā)者平臺配置了業(yè)務(wù)域名白名單，參考 web-view 組件說明。

4. request 白名單限制

小程序內(nèi)發(fā)起 request 請求有域名限制，使用 request 時，需要確保已經(jīng)在小程序開發(fā)者平臺配置了服務(wù)器域名白名單，參考 request 使用注意事項。

注意：部分開發(fā)者 web-view 組件或 request 請求的 URL 為服務(wù)端動態(tài)下發(fā)，下發(fā)了未在白名單的 URL。此類問題較隱蔽，需要注意避免。

11. Web 態(tài)小程序調(diào)起百度 App 小程序流程

在移動端訪問 Web 態(tài)小程序時，如遇一些無法支持的能力，或點擊頂部回流欄的”打開”按鈕，會觸發(fā)打開百度 App 功能，將會打開百度 App 對應(yīng)的小程序頁面。會觸發(fā)該功能的能力，請參考組件和 API 文檔。
由于設(shè)備系統(tǒng)、瀏覽器不同，不同環(huán)境下訪問 Web 態(tài)小程序時，打開百度 App 的過程有所不同。下面對不同系統(tǒng)、不同瀏覽器下打開百度 App 小程序的過程做詳細說明。

iOS 微信
觸發(fā)打開百度 App 功能時，點擊微信彈窗繼續(xù)，打開百度 App 小程序。
iOS QQ
觸發(fā)打開百度 App 功能時，進入 App Store 。點擊打開按鈕，打開百度 App 小程序。
iOS UC 瀏覽器
觸發(fā)打開百度 App 功能時，展示 UC 瀏覽器引導(dǎo)頁。根據(jù)引導(dǎo)，長按按鈕后在新窗口中打開，進入 App Store 點擊打開按鈕，打開百度 App 小程序。
Android 微信或 QQ

觸發(fā)打開百度 App 功能時，跳轉(zhuǎn)第三方應(yīng)用寶頁面，調(diào)起百度 App 流程由第三方應(yīng)用寶控制，不同機型調(diào)起流程可能不同。
Android 系統(tǒng)瀏覽器
不同廠商安卓設(shè)備的系統(tǒng)瀏覽器能力不同，暫時無法概括地說明情況。部分瀏覽器不支持打開百度 App。

隨系統(tǒng)和瀏覽器更新，以上流程可能會有變化。

名稱欄目：創(chuàng)新互聯(lián)百度小程序教程：Web態(tài)開發(fā)建議
瀏覽地址：http://m.fisionsoft.com.cn/article/djgsocc.html