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

swan-sitemap 小程序索引頁組件

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

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

介紹

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)庫文檔中查看。

• JSON

 
 
 

  
  
  
 "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)庫文檔中查看。

• JSON

 
 
 

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

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

swan-sitemap-list 組件需要的具體數(shù)據(jù)及其含義見下節(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) {
  
  
  
 // 初始頁面打開時，需要讀取頁面的 currentPage 參數(shù)（即翻頁頁碼），并根據(jù)參數(shù)值請求數(shù)據(jù)
  
  
  
 let {currentPage} = e;
  
  
  
 // 起始頁碼為 1，如讀取到的值為空，默認(rèn)賦值起始頁碼
  
  
  
 currentPage = +currentPage || 1;
  
  
  
 // 根據(jù)當(dāng)前頁碼獲取該頁數(shù)據(jù)資源
  
  
  
 this.requestData(currentPage);
  
  
  
 },
  
  
  
  
  
  
 requestData(currentPage) {
  
  
  
 // 發(fā)起數(shù)據(jù)資源請求。
  
  
  
 swan.request({
  
  
  
 // 數(shù)據(jù)接口，需改為開發(fā)者實際的請求接口
  
  
  
 url: sitemapUrl, 
  
  
  
 data: {
  
  
  
 // 參數(shù)中需攜帶頁碼參數(shù)，此為示例，可根據(jù)實際情況傳入其他所需參數(shù)
  
  
  
 page: currentPage 
  
  
  
 },
  
  
  
 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
  
  
  
 });
  
  
  
 }
  
  
  
 }
  
  
  
 });
  
  
  
 }
  
  
  
 });