创新互联百度小程序教程:swan-sitemap小程序索引页组件

  • swan-sitemap 小程序索引页组件
    • 介绍
    • 使用方法
      • 1. 在项目中声明引用 swan-sitemap 动态库
      • 2. 创建一个索引页页面,并在页面中声明引用 swan-sitemap-list 组件
      • 3. 在页面代码中使用 swan-sitemap-list 组件
    • swan-sitemap-list 组件字段详解
    • 其他开发要求
    • 展示示例

    swan-sitemap 小程序索引页组件

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

    创新互联建站是专业的类乌齐网站建设公司,类乌齐接单;提供成都网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行类乌齐网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

    介绍

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

    swan-sitemap-list 组件字段详解

    属性名 类型 是否必填 说明
    list-data Array 当前索引页的小程序资源页面集合(建议长度 100-200 左右)
    current-page Number 当面页码
    total-page Number 索引页总共页数
    path String 动态库索引页的 path

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

    属性名 类型 是否必填 说明 示例
    title String 资源页面标题 “第 92 届奥斯卡金像奖”
    path String 资源页面路径(可带参数) “/page/article?id=51283431”
    releaseDate String 资源发布时间(格式为 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 左右。

    展示示例

    网页名称:创新互联百度小程序教程:swan-sitemap小程序索引页组件
    URL标题:http://www.csdahua.cn/qtweb/news1/523301.html

    网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网