日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

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

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

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

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

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

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

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

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

    2. 頁(yè)面跳轉(zhuǎn)

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

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

    3. 保證任何小程序頁(yè)面都能獨(dú)立訪問

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

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

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

     
 
 
      
  
  
  
    1. /* Bad Code */
      2.   
  
  
    2. // article.js 在文章頁(yè)的實(shí)現(xiàn)片段：
      3.   
  
  
    3. function goToAuthorPage() {
      4.   
  
  
    4.  // 從server請(qǐng)求作者信息
      5.   
  
  
    5.  const authorInfo = requestAuthorInfo(authorID);
      6.   
  
  
    6.  // 存入全局變量
      7.   
  
  
    7.  getApp().globalData.authorInfo = authorInfo;
      8.   
  
  
    8.  // 跳轉(zhuǎn)到作者頁(yè)
      9.   
  
  
    9.  swan.navigateTo('/page/author/author');
      10.   
  
  
    10. }
      11.   
  
  
      12.   
  
  
    12. // author.js 在作者頁(yè)的實(shí)現(xiàn)片段：
      13.   
  
  
    13. Page({
      14.   
  
  
    14.  onLoad() {
      15.   
  
  
    15.  // 從全局讀取存入的作者信息
      16.   
  
  
    16.  const {authorInfo} = getApp().globalData;
      17.   
  
  
    17.  // 用作者信息數(shù)據(jù)渲染頁(yè)面
      18.   
  
  
    18.  this.setData({authorInfo});
      19.   
  
  
    19.  }
      20.   
  
  
    20. })
      21.

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

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

     
 
 
      
  
  
  
    1. /* Good Code */
      2.   
  
  
    2. // article.js 在文章頁(yè)的實(shí)現(xiàn)片段：
      3.   
  
  
    3. function goToAuthorPage() {
      4.   
  
  
    4.  // 跳轉(zhuǎn)到作者頁(yè)
      5.   
  
  
    5.  swan.navigateTo(`/page/author/author?id=${authorID}`);
      6.   
  
  
    6. }
      7.   
  
  
      8.   
  
  
    8. // author.js 在作者頁(yè)的實(shí)現(xiàn)片段：
      9.   
  
  
    9. Page({
      10.   
  
  
    10.  onLoad(query) {
      11.   
  
  
    11.  // 從頁(yè)面路由參數(shù)中獲取作者 id
      12.   
  
  
    12.  const authorID = query.id;
      13.   
  
  
    13.  // 根據(jù)作者 id 獲取作者信息
      14.   
  
  
    14.  const authorInfo = requestAuthorInfo(authorID);
      15.   
  
  
    15.  // 用作者信息數(shù)據(jù)渲染頁(yè)面
      16.   
  
  
    16.  this.setData({authorInfo});
      17.   
  
  
    17.  }
      18.   
  
  
    18. })
      19.

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

    代碼示例

     
 
 
      
  
  
  
    1. getSystemInfo(e) {
      2.   
  
  
    2.  swan.getSystemInfo({
      3.   
  
  
    3.  success: res => {
      4.   
  
  
    4.  // web
      5.   
  
  
    5.  console.log('res', res.platform);
      6.   
  
  
    6.  },
      7.   
  
  
    7.  fail: err => {
      8.   
  
  
      9.   
  
  
    9.  }
      10.   
  
  
    10.  });
      11.   
  
  
    11. }
      12.

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

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

    6. 請(qǐng)勿操作框架樣式

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

     
 
 
      
  
  
  
    1. /* Bad Code */
      2.   
  
  
    2. body {
      3.   
  
  
    3.  background: yellow;
      4.   
  
  
    4. }
      5.

    7. 在部分瀏覽器下，滾動(dòng)頁(yè)面時(shí)固定定位的元素抖動(dòng)的解決方案

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

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

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

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

    代碼示例

     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  button 1
      4.   
  
  
    4.  button 2
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
      8.  
 
 
     
 
 
      
  
  
  
    1. .page-wrapper{
      2.   
  
  
    2.  font-size: 12px;
      3.   
  
  
    3. }
      4.   
  
  
    4. .page-wrapper .content{
      5.   
  
  
    5.  color: red;
      6.   
  
  
    6. }
      7.   
  
  
    7. .header{
      8.   
  
  
    8.  /* 注意：此處的 header 樣式需要獨(dú)立，不能和父容器有繼承關(guān)系，且不要依賴父容器的繼承樣式 */
      9.   
  
  
    9.  font-size: 12px;
      10.   
  
  
    10.  color: blue;
      11.   
  
  
    11. }
      12.

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

     
 
 
      
  
  
  
      2.   
  
  
      3.   
  
  
    3.  button 1
      4.   
  
  
    4.  button 2
      5.   
  
  
      6.

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

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

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

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

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

    生成的 Web 態(tài)頁(yè)面會(huì)提供給搜索爬蟲抓取，從而建立小程序頁(yè)面索引。爬蟲的抓取方式不僅針對(duì)靜態(tài)的 html 文本，頁(yè)面中的動(dòng)態(tài)數(shù)據(jù)渲染和樣式布局等也會(huì)對(duì)爬蟲識(shí)別有效信息起到至關(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 校驗(yàn)

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

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

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

     
 
 
      
  
  
  
    1. https://spwebbj.cdn.bcebos.com/
      2.   
  
  
    2. https://spwebsz.cdn.bcebos.com/
      3.   
  
  
    3. https://sp-webpkg.cdn.bcebos.com/
      4.

    2. HTTPS 安全限制

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

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

    3. web-view 白名單限制

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

    4. request 白名單限制

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

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

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

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

    • iOS 微信
      觸發(fā)打開百度 App 功能時(shí)，點(diǎn)擊微信彈窗繼續(xù)，打開百度 App 小程序。

    • iOS QQ
      觸發(fā)打開百度 App 功能時(shí)，進(jìn)入 App Store 。點(diǎn)擊打開按鈕，打開百度 App 小程序。

    • iOS UC 瀏覽器
      觸發(fā)打開百度 App 功能時(shí)，展示 UC 瀏覽器引導(dǎo)頁(yè)。根據(jù)引導(dǎo)，長(zhǎng)按按鈕后在新窗口中打開，進(jìn)入 App Store 點(diǎn)擊打開按鈕，打開百度 App 小程序。

    • Android 微信或 QQ

      觸發(fā)打開百度 App 功能時(shí)，跳轉(zhuǎn)第三方應(yīng)用寶頁(yè)面，調(diào)起百度 App 流程由第三方應(yīng)用寶控制，不同機(jī)型調(diào)起流程可能不同。

    • Android 系統(tǒng)瀏覽器
      不同廠商安卓設(shè)備的系統(tǒng)瀏覽器能力不同，暫時(shí)無法概括地說明情況。部分瀏覽器不支持打開百度 App。

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


    網(wǎng)站名稱：創(chuàng)新互聯(lián)百度小程序教程：Web態(tài)開發(fā)建議
    新聞來源：http://www.5511xx.com/article/djgsocc.html