百度智能小程序 小程序索引頁組件

swan-sitemap 小程序索引頁組件

動態(tài)庫，是指可被添加到小程序內(nèi)直接使用的功能組件。開發(fā)者可直接在小程序內(nèi)使用動態(tài)庫，無需重復開發(fā)，為用戶提供更豐富的服務。更多內(nèi)容參見使用動態(tài)庫。

介紹

swan-sitemap 動態(tài)庫是百度小程序官方發(fā)布的用于生成小程序索引頁的動態(tài)庫組件，開發(fā)者可以在小程序項目中引用 swan-sitemap 動態(tài)庫，并通過 swan-sitemap-list 組件高效的開發(fā)出符合搜索收錄規(guī)范的小程序索引頁。

使用方法

1. 在項目中聲明引用 swan-sitemap 動態(tài)庫在 app.json 文件配置的 dynamicLib 字段中增加對 swan-sitemap 的引用，具體格式在使用動態(tài)庫文檔中查看。

       "dynamicLib": {
           // 'swan-sitemap-lib' 是個可自己定的別名。
           "swan-sitemap-lib": {
                // provider 是要引用的動態(tài)庫的名字，在此為 'swan-sitemap'。
               "provider": "swan-sitemap"
           }
       }

2. 創(chuàng)建一個索引頁頁面，并在頁面中聲明引用 swan-sitemap-list 組件動態(tài)庫中的組件與其他自定義組件類似，都需要在 page 中使用。所以首先需要創(chuàng)建一個 page，page 路徑可自定義，推薦路徑為 swan-sitemap/index（即在小程序項目根目錄創(chuàng)建 swan-sitemap 文件夾，并在文件夾下創(chuàng)建 index.js、index.swan、index.css、index.json 頁面文件)。

   索引頁上線后，需要在開發(fā)者平臺提交最終的索引頁路徑，具體提交步驟見文檔小程序資源自動同步。

   頁面中引用動態(tài)庫組件的方式是：在頁面的 json 配置的 usingComponents 字段中聲明組件引用。具體格式在使用動態(tài)庫文檔中查看。

       "usingComponents": {
           "swan-sitemap-list": "dynamicLib://swan-sitemap-lib/swan-sitemap-list"
       }
   

3. 在頁面代碼中使用 swan-sitemap-list 組件

   3.1 模板代碼(.swan文件)示例如下：swan-sitemap-list 組件需要的具體數(shù)據(jù)及其含義見下節(jié) “swan-sitemap-list 組件字段詳解”

       <swan-sitemap-list
           list-data="{{listData}}"
           current-page="{{currentPage}}"
           total-page="{{totalPage}}"
           path="/swan-sitemap/index">
       </swan-sitemap-list>
   

   3.2 頁面 JS 文件示例如下

       Page({
           data: {
               listData: [],
               totalPage: 1,
               currentPage: 1,
               path: 'swan-sitemap/index'
           },
           
           onLoad(e) {
               // 初始頁面打開時，需要讀取頁面的 currentPage 參數(shù)（即翻頁頁碼），并根據(jù)參數(shù)值請求數(shù)據(jù)
               let {currentPage} = e;
               // 起始頁碼為 1，如讀取到的值為空，默認賦值起始頁碼
               currentPage = +currentPage || 1;
               // 根據(jù)當前頁碼獲取該頁數(shù)據(jù)資源
               this.requestData(currentPage);
           },
           
           requestData(currentPage) {
               // 發(fā)起數(shù)據(jù)資源請求。
               swan.request({
               url: sitemapUrl, // 數(shù)據(jù)接口，需改為開發(fā)者實際的請求接口
               data: {
                   page: currentPage // 參數(shù)中需攜帶頁碼參數(shù)，此為示例，可根據(jù)實際情況傳入其他所需參數(shù)
                   },
               success: res => {
                   if (+res.data.code === 0) {
                   let resData = res.data.data;
                   // 根據(jù)返回數(shù)據(jù)更新列表。如請求返回格式不符合模板數(shù)據(jù) listData 的要求格式，需調(diào)整格式后再賦值給 listData。
                   // listData 的格式要求為：
                   // Array<{title:string, path:string, releaseDate:DateString}>，詳見下節(jié) “l(fā)ist-data 項格式說明”
                   this.setData({
                       listData: resData.list,
                       totalPage: resData.totalPage,
                       currentPage
                           });
                       }
                   }
               });
           }
       });

swan-sitemap-list 組件字段詳解

其中 list-data 數(shù)組中的每項為一個 Object，該 Object 具體格式為：

其他開發(fā)要求

1.【強制】頁面參數(shù)必須有且僅有一個參數(shù) currentPage，用于指定翻頁頁碼，起始值為 1。 頁面根據(jù) currentPage 參數(shù)展示指定頁資源列表。即一個合法的索引頁 URI 格式為 ${path}?currentPage=${currentPage}

2.【強制】需在頁面初始化時（如 onLoad 生命周期）獲取 currentPage 參數(shù)，并通過 currentPage 請求當頁的數(shù)據(jù)

3.【建議】 資源列表中每個列表項包含一條資源發(fā)布時間顯示，格式為 YYYY-MM-DD HH:mm:ss

4.【建議】 資源列表按照更新日期倒序排列。將較新的資源放在最前面可以提高爬蟲發(fā)現(xiàn)和收錄效率

5.【建議】 每頁資源條數(shù)在 100-200 左右。

展示示例