swan-sitemap 小程序索引页组件

动态库，是指可被添加到小程序内直接使用的功能组件。开发者可直接在小程序内使用动态库，无需重复开发，为用户提供更丰富的服务。更多内容参见使用动态库。

介绍

swan-sitemap 动态库是百度小程序官方发布的用于生成小程序索引页的动态库组件，开发者可以在小程序项目中引用 swan-sitemap 动态库，并通过 swan-sitemap-list 组件高效的开发出符合搜索收录规范的小程序索引页。

使用方法

1. 在项目中声明引用 swan-sitemap 动态库

在 app.json 文件配置的 dynamicLib 字段中增加对 swan-sitemap 的引用，具体格式在使用动态库文档中查看。

  • JSON
  1.     "dynamicLib": {
  2.         // 'swan-sitemap-lib' 是个可自己定的别名。
  3.         "swan-sitemap-lib": {
  4.              // provider 是要引用的动态库的名字，在此为 'swan-sitemap'。
  5.             "provider": "swan-sitemap"
  6.         }
  7.     }

2. 创建一个索引页页面，并在页面中声明引用 swan-sitemap-list 组件

动态库中的组件与其他自定义组件类似，都需要在 page 中使用。所以首先需要创建一个 page，page 路径可自定义，推荐路径为 swan-sitemap/index（即在小程序项目根目录创建 swan-sitemap 文件夹，并在文件夹下创建 index.js、index.swan、index.css、index.json 页面文件)。

索引页上线后，需要在开发者平台提交最终的索引页路径，具体提交步骤见文档小程序资源自动同步。

页面中引用动态库组件的方式是：在页面的 json 配置的 usingComponents 字段中声明组件引用。具体格式在使用动态库文档中查看。

  • JSON
  1.     "usingComponents": {
  2.         "swan-sitemap-list": "dynamicLib://swan-sitemap-lib/swan-sitemap-list"
  3.     }

3. 在页面代码中使用 swan-sitemap-list 组件

swan-sitemap-list 组件需要的具体数据及其含义见下节 swan-sitemap-list 组件字段详解。

  • SWAN
  • JS
  1.     <swan-sitemap-list
  2.         list-data="{{listData}}"
  3.         current-page="{{currentPage}}"
  4.         total-page="{{totalPage}}"
  5.         path="/swan-sitemap/index">
  6.     </swan-sitemap-list>
  1.     Page({
  2.         data: {
  3.             listData: [],
  4.             totalPage: 1,
  5.             currentPage: 1,
  6.             path: 'swan-sitemap/index'
  7.         },
  9.         onLoad(e) {
  10.             // 初始页面打开时，需要读取页面的 currentPage 参数（即翻页页码），并根据参数值请求数据
  11.             let {currentPage} = e;
  12.             // 起始页码为 1，如读取到的值为空，默认赋值起始页码
  13.             currentPage = +currentPage || 1;
  14.             // 根据当前页码获取该页数据资源
  15.             this.requestData(currentPage);
  16.         },
  18.         requestData(currentPage) {
  19.             // 发起数据资源请求。
  20.             swan.request({
  21.                 // 数据接口，需改为开发者实际的请求接口
  22.                 url: sitemapUrl, 
  23.                 data: {
  24.                     // 参数中需携带页码参数，此为示例，可根据实际情况传入其他所需参数
  25.                     page: currentPage 
  26.                 },
  27.                 success: res => {
  28.                     if (+res.data.code === 0) {
  29.                         let resData = res.data.data;
  30.                         // 根据返回数据更新列表。如请求返回格式不符合模板数据 listData 的要求格式，需调整格式后再赋值给 listData。
  31.                         // listData 的格式要求为：
  32.                         // Array<{title:string, path:string, releaseDate:DateString}>，详见下节 “list-data 项格式说明”
  33.                         this.setData({
  34.                             listData: resData.list,
  35.                             totalPage: resData.totalPage,
  36.                             currentPage
  37.                         });
  38.                     }
  39.                 }
  40.             });
  41.         }
  42.     });

swan-sitemap-list 组件字段详解

属性名类型是否必填说明
list-dataArray是当前索引页的小程序资源页面集合（建议长度 100-200 左右）
current-pageNumber是当面页码
total-pageNumber是索引页总共页数
pathString是动态库索引页的 path

其中 list-data 数组中的每项为一个 Object，该 Object 具体格式为：

属性名类型是否必填说明示例
titleString是资源页面标题“第 92 届奥斯卡金像奖”
pathString是资源页面路径（可带参数）“/page/article?id=51283431”
releaseDateString是资源发布时间（格式为 YYYY-MM-DD HH:mm:ss）“2020-01-01 08:40:06”

其他开发要求

1.【强制】页面参数必须有且仅有一个参数 currentPage ，用于指定翻页页码，起始值为 1 。页面根据 currentPage 参数展示指定页资源列表。即一个合法的索引页 URI 格式为${path}?currentPage=${currentPage}。
2.【强制】需在页面初始化时（如 onLoad 生命周期）获取 currentPage 参数，并通过 currentPage 请求当页的数据。
3.【建议】资源列表中每个列表项包含一条资源发布时间显示，格式为 YYYY-MM-DD HH:mm:ss 。
3.【建议】资源列表按照更新日期倒序排列。将较新的资源放在最前面可以提高爬虫发现和收录效率。
4.【建议】每页资源条数在 100-200 左右。

展示示例

图片