• swan-sitemap 小程序索引頁(yè)組件
  • 介紹
  • 使用方法
    • 1. 在項(xiàng)目中聲明引用 swan-sitemap 動(dòng)態(tài)庫(kù)
    • 2. 創(chuàng)建一個(gè)索引頁(yè)頁(yè)面，并在頁(yè)面中聲明引用 swan-sitemap-list 組件
    • 3. 在頁(yè)面代碼中使用 swan-sitemap-list 組件
  • swan-sitemap-list 組件字段詳解
  • 其他開(kāi)發(fā)要求
  • 展示示例

swan-sitemap 小程序索引頁(yè)組件

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

創(chuàng)新互聯(lián)建站是專業(yè)的類烏齊網(wǎng)站建設(shè)公司，類烏齊接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行類烏齊網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

介紹

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

使用方法

1. 在項(xiàng)目中聲明引用 swan-sitemap 動(dòng)態(tài)庫(kù)

在 app.json 文件配置的 dynamicLib 字段中增加對(duì) swan-sitemap 的引用，具體格式在使用動(dòng)態(tài)庫(kù)文檔中查看。

• JSON

 
 
 

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

2. 創(chuàng)建一個(gè)索引頁(yè)頁(yè)面，并在頁(yè)面中聲明引用 swan-sitemap-list 組件

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

索引頁(yè)上線后，需要在開(kāi)發(fā)者平臺(tái)提交最終的索引頁(yè)路徑，具體提交步驟見(jiàn)文檔小程序資源自動(dòng)同步。

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

• JSON

 
 
 

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

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

swan-sitemap-list 組件需要的具體數(shù)據(jù)及其含義見(jiàn)下節(jié) swan-sitemap-list 組件字段詳解。

• SWAN
• JS

 
 
 

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

 
 
 

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