page-policy 政策文件庫(kù)模板

從開發(fā)者工具 v2.25.1-rc 版本開始支持。

解釋：本模板適用于信息公開類小程序的快速搭建，可應(yīng)用于辦稅指南、法律寶典、街道信息公告通知等場(chǎng)景，可將信息結(jié)構(gòu)化的呈現(xiàn)給用戶，方便用戶快速閱讀獲取有效的信息。

示例

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

頁(yè)面內(nèi)容

模板包含政策文件列表頁(yè)、政策文件詳情頁(yè)、收藏列表頁(yè)以及訂閱列表頁(yè)、搜索結(jié)果頁(yè)。

政策文件列表頁(yè)

政策文件列表頁(yè)包含搜索以及篩選組件，用戶可以快速獲取所需要的信息，同時(shí)頁(yè)面包含跑馬燈組件、tab 切換組件可實(shí)現(xiàn)信息輪播提示、板塊切換等交互效果，豐富頁(yè)面功能，提升使用體驗(yàn)。

頁(yè)面路徑：pages/indexFilter/index、pages/indexTab/index

列表頁(yè)提供了篩選器和 tab 兩種效果樣式。其中，pages/indexFilter/index 是帶篩選器的模板頁(yè)，pages/indexTab/index 是帶 tab 切換的模板頁(yè)。如果想查看不同的模板類型，可以修改小程序根目錄下的 app.json 文件，將對(duì)應(yīng)類型的模板頁(yè)面路徑放到第一個(gè)。

代碼示例

以下是使用篩選器的首頁(yè)模板代碼：
SWAN
JSON
JS

 
 
 
  
  
  
  
  
   

  
  
   class='policy-home-filter'
  
  
   common-bg-opacity="{{true}}"
  
  
   common-front-color="#ffffff"
  
  
   fixed-title="政策文件庫(kù)"
  
  
   need-to-return="{{false}}"
  
  
   fixed-text-align="center"
  
  
   common-text-align="left"
  
  
   fixed-bg-color="#ffffff"
  
  
   common-bg-color="#2772fb"
  
  
   fixed-front-color="#000000"
  
  
   fixed-has-border="{{true}}"
  
  
   common-has-border="{{false}}"
  
  
   show-fixed-bar="{{true}}"
  
  
   namespace="policy-home-filter"
  
  
   >
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   政策文件庫(kù)
  
  
   文件全文 權(quán)威解讀
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   我的訂閱
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   我的收藏
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   s-for="item, findex in filter"
  
  
   title="{{item.title}}"
  
  
   class="filter"
  
  
   mask-with-animation="{{false}}"
  
  
   bind:openFilter="openFilter"
  
  
   max-title-width="123.79"
  
  
   is-immersive
  
  
   >
  
  
   

  
  
   s-for="sub,index in item.children"
  
  
   bind:change="changeFilter"
  
  
   value="{{findex + ':' + sub.id}}"
  
  
   text="{{sub.name}}" />
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   正在加載...
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   s-for="item, index in page"
  
  
   title="{{item.title}}"
  
  
   desc="{{'發(fā)文機(jī)關(guān)：' + item.office}}"
  
  
   clickable="{{true}}"
  
  
   data-aid="item.id"
  
  
   bind:tap="gotoArticle"
  
  
   />
  
  
   
  
  
   
  
  
   
  
  
   單行footer


 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "政策文件庫(kù)",
  
  
   "navigationStyle": "custom",
  
  
   "backgroundColor": "#ffffff",
  
  
   "backgroundColorTop": "#2772fb",
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "white",
  
  
   "onReachBottomDistance": 34,
  
  
   "usingComponents": {
  
  
   "zw-custom-title-bar": "../../components/CustomTitleBar/src/index",
  
  
   "zw-notice-bar": "../../components/NoticeBar/src/index",
  
  
   "zw-footer": "../../components/Footer/src/index",
  
  
   "zw-icon": "../../components/Icon/src/index",
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-list-item": "../../components/ListItem/src/index",
  
  
   "zw-spin": "../../components/Spin/src/index",
  
  
   "zw-filter": "../../components/Filter/src/index",
  
  
   "zw-filter-item": "../../components/FilterItem/src/index"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  // 獲取列表數(shù)據(jù)，以下為使用 mock 數(shù)據(jù)的請(qǐng)求示例
  
  
  getHomeList(query, ({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 設(shè)置篩選器數(shù)據(jù)
  
  
   !filter.length && (res.filter = data.filter);
  
  
   // 更新通知欄內(nèi)容
  
  
   !notice && !this.data.hideNotice && data.notice && (res.notice = data.notice);
  
  
   // ...
  
  
   }
  
  
   else {
  
  
   // 請(qǐng)求異常處理
  
  
   }
  
  
  }),
  
  
  // 跳轉(zhuǎn)到文章詳情頁(yè)。跳轉(zhuǎn)攜帶的 id 參數(shù)只是 mock 數(shù)據(jù)舉例，是否需要帶參數(shù)跳轉(zhuǎn)以及參數(shù)名稱、參數(shù)值均可自定義
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../article/article?id=${index}`
  
  
   });
  
  
  }
 
 
 
政策文件詳情頁(yè)
分為標(biāo)題以及文字信息區(qū)域，可將圖文等內(nèi)容結(jié)構(gòu)化呈現(xiàn)，方便用戶閱讀。
頁(yè)面路徑：pages/article/article
代碼示例

SWAN
JSON
JS

 
 
 
  
  
  
  
  
   
  
  
   正在加載...
  
  
   
  
  
   
  
  
  
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   {{detail.title}}
  
  
   
  
  
   
  
  
   {{detail.info[0].name}}
  
  
   {{detail.info[0].value}}
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   s-if="{{expand.length > 0}}"
  
  
   name="arrow-{{!expandStatus ? 'down' : 'up'}}"
  
  
   color="#ccc"
  
  
   size="{{actionFontSize}}">
  
  
   
  
  
   
  
  
   
  
  
  
  
  
   

  
  
   class="expand-area" s-if="{{expand.length > 0}}"
  
  
   style="height: {{expandStatus ? expandHeight : 0}}px;"
  
  
   >
  
  
   
  
  
   
  
  
   {{item.name}}
  
  
   {{item.value}}
  
  
   
  
  
   
  
  
   
  
  
  
  
  
   
  
  
  
  
  
   
  
  
   

  
  
   title="{{detail.hoster}}"
  
  
   desc="{{detail.desc}}"
  
  
   clickable="{{false}}"
  
  
   zw-list-item-wrap-class="custom-list"
  
  
   no-border
  
  
   >
  
  
   
  
  
   
  
  
   

  
  
   button-size="xs-small"
  
  
   button-color="{{detail.status ? 'secondly' : 'thirdly'}}"
  
  
   button-text="{{detail.status ? '已訂閱' : '訂閱'}}"
  
  
   bindtap="changeSub"
  
  
   />
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   {{detail.collected ? '已收藏' : '收藏'}}
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   分享
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  {
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "black",
  
  
   "navigationBarTitleText": "政策文件庫(kù)",
  
  
   "backgroundColor": "#ffffff",
  
  
   "backgroundTextStyle": "light",
  
  
   "usingComponents": {
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-button": "../../components/Button/src/index",
  
  
   "zw-icon": "../../components/Icon/src/index",
  
  
   "zw-list-item": "../../components/ListItem/src/index"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  // 請(qǐng)求接口，獲取文件詳情
  
  
  getArticle(({code, msg, data}) => {
  
  
   // 請(qǐng)求正常響應(yīng)
  
  
   if (code === 0) {
  
  
   // ...
  
  
   }
  
  
   // 請(qǐng)求異常
  
  
   else {
  
  
   // ...
  
  
   }
  
  
  }),
  
  
  // 切換訂閱狀態(tài)
  
  
  changeSub(e) {
  
  
   // 獲取當(dāng)前訂閱狀態(tài)
  
  
   const status = this.data.detail.status;
  
  
   // 請(qǐng)求接口，切換訂閱狀態(tài)
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 請(qǐng)求正常響應(yīng)
  
  
   if (code === 0) {
  
  
   // 更新訂閱狀態(tài)
  
  
   }
  
  
   });
  
  
  },
  
  
  // 切換收藏狀態(tài)
  
  
  addCollection(e) {
  
  
   // 獲取當(dāng)前收藏狀態(tài)
  
  
   const status = this.data.detail.collected;
  
  
   // 請(qǐng)求接口，切換收藏狀態(tài)
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 請(qǐng)求正常響應(yīng)
  
  
   if (code === 0) {
  
  
   // 更新收藏狀態(tài)
  
  
   }
  
  
   });
  
  
  },
  
  
  // 分享的標(biāo)題、內(nèi)容、路徑、圖片地址，分享成功、分享失敗的回調(diào)都可以根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景和需求自定義。
  
  
  toShare() {
  
  
   swan.openShare({
  
  
   title: '政策文件庫(kù)分享示例',
  
  
   content: '中共中央辦公廳印發(fā)《2019-2023年全國(guó)黨員教育培訓(xùn)工作規(guī)劃》',
  
  
   path: '/templates/gov/policy/pages/article/article?key=' + this.data.articleId,
  
  
   imageUrl: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/logo_new.png',
  
  
   success: res => {
  
  
   swan.showToast({
  
  
   title: '分享成功'
  
  
   });
  
  
   console.log('openShare success', res);
  
  
   },
  
  
   fail: err => {
  
  
   console.log('openShare fail', err);
  
  
   }
  
  
   });
  
  
  }
 
 
 
我的收藏頁(yè)面
用戶收藏過(guò)的內(nèi)容將通過(guò)一定的順序呈現(xiàn)在收藏列表頁(yè)，對(duì)于重點(diǎn)關(guān)注的內(nèi)容，用戶無(wú)需反復(fù)檢索，在收藏列表頁(yè)可直接閱讀。
頁(yè)面路徑：pages/collect/collect
代碼示例

SWAN
JSON
JS

 
 
 
  
  
  
  
  
   

  
  
   tabs="{{tabs}}"
  
  
   type="flex"
  
  
   mode="auto"
  
  
   active-tab="{{0}}"
  
  
   nav-bar-width="100%"
  
  
   show-with-animation="{{false}}"
  
  
   bindonChange="onCustomTabChange"
  
  
   />
  
  
   
  
  
   
  
  
   正在加載...
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   class="smt-feed click-zc-refresh"
  
  
   data-type="zc"
  
  
   bind:scrolltolower="autoScrollToLower"
  
  
   >
  
  
   
  
  
   

  
  
   s-for="item, index in page"
  
  
   title="{{item.title}}"
  
  
   desc="{{'發(fā)文機(jī)關(guān)：' + item.office}}"
  
  
   clickable="{{true}}"
  
  
   data-aid="item.id"
  
  
   bind:tap="gotoArticle"
  
  
   />
  
  
   
  
  
  
  
  
   
  
  
   
  
  
   
  
  
  
  
  
   
  
  
   
  
  
   
  
  
   正在加載...
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   class="smt-feed click-jd-refresh"
  
  
   data-type="jd"
  
  
   bind:scrolltolower="autoScrollToLower"
  
  
   >
  
  
   
  
  
   

  
  
   s-for="item, index in page"
  
  
   title="{{item.title}}"
  
  
   desc="{{'發(fā)文機(jī)關(guān)：' + item.office}}"
  
  
   clickable="{{true}}"
  
  
   data-aid="{{item.id}}"
  
  
   bind:tap="gotoArticle"
  
  
   />
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  {
  
  
   "navigationBarBackgroundColor": "#fffffe",
  
  
   "navigationBarTextStyle": "black",
  
  
   "navigationBarTitleText": "我的收藏",
  
  
   "backgroundColor": "#ffffff",
  
  
   "backgroundTextStyle": "light",
  
  
   "usingComponents": {
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-list-item": "../../components/ListItem/src/index",
  
  
   "smt-feed": "@smt-ui/component/src/feed",
  
  
   "zw-spin": "../../components/Spin/src/index",
  
  
   "zw-tabs": "../../components/Tabs/src/index"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  // 請(qǐng)求接口，獲取收藏?cái)?shù)據(jù)
  
  
  getCollectList(name, ({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 請(qǐng)求正常響應(yīng)處理
  
  
   }
  
  
   else {
  
  
   // 請(qǐng)求異常處理
  
  
   }
  
  
  }),
  
  
  // 跳轉(zhuǎn)到文章詳情頁(yè)。跳轉(zhuǎn)攜帶的 id 參數(shù)只是 mock 數(shù)據(jù)舉例，是否需要帶參數(shù)跳轉(zhuǎn)以及參數(shù)名稱、參數(shù)值均可自定義
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../article/article?id=${index}`
  
  
   });
  
  
  }
 
 
 
我的訂閱頁(yè)面
開發(fā)者可結(jié)合自身業(yè)務(wù)，向用戶提供訂閱功能。對(duì)于訂閱后的內(nèi)容或板塊，用戶無(wú)需反復(fù)檢索，在訂閱列表頁(yè)可直接獲取最新資訊。
頁(yè)面路徑：pages/subscribe/subscribe
代碼示例

SWAN
JSON
JS

 
 
 
  
  
  
  
  
   
  
  
   正在加載...
  
  
   
  
  
   

  
  
   s-if="errStatus !== ''"
  
  
   show-reload="{{stateBtn}}"
  
  
   type="{{errStatus}}"
  
  
   bind:reload="reload"
  
  
   />
  
  
   
  
  
   

  
  
   s-for="item, index in subList"
  
  
   title="{{item.title}}"
  
  
   desc="{{item.desc}}"
  
  
   clickable="{{false}}"
  
  
   data-index={{index}}
  
  
   bind:tap="gotoArticle"
  
  
   >
  
  
   
  
  
   
  
  
   

  
  
   button-size="xs-small"
  
  
   button-color="{{item.status ? 'secondly' : 'thirdly'}}"
  
  
   button-text="{{item.status ? '已訂閱' : '訂閱'}}"
  
  
   data-index="{{index}}"
  
  
   catchtap="changeSub"
  
  
   />
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  {
  
  
   "navigationBarBackgroundColor": "#ffffff",
  
  
   "navigationBarTextStyle": "black",
  
  
   "navigationBarTitleText": "我的訂閱",
  
  
   "backgroundColor": "#ffffff",
  
  
   "backgroundTextStyle": "light",
  
  
   "usingComponents": {
  
  
   "zw-list-item": "../../components/ListItem/src/index",
  
  
   "zw-loading": "../../components/LoadingStatus/src/index",
  
  
   "zw-state-page": "../../components/StatePage/src/index",
  
  
   "zw-button": "../../components/Button/src/index"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  // 請(qǐng)求接口，獲取關(guān)注列表數(shù)據(jù)
  
  
  getList(({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 請(qǐng)求正常響應(yīng)處理
  
  
   }
  
  
   else {
  
  
   // 請(qǐng)求異常處理
  
  
   }
  
  
  }),
  
  
  // 切換訂閱狀態(tài)
  
  
  changeSub(e) {
  
  
   // 獲取當(dāng)前訂閱狀態(tài)
  
  
   const status = this.data.subList[index].status;
  
  
  
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 請(qǐng)求正常響應(yīng)
  
  
   if (code === 0) {
  
  
   // 更新訂閱狀態(tài)
  
  
   }
  
  
   });
  
  
  },
  
  
  // 跳轉(zhuǎn)到文章詳情頁(yè)。跳轉(zhuǎn)攜帶的 id 參數(shù)只是 mock 數(shù)據(jù)舉例，是否需要帶參數(shù)跳轉(zhuǎn)以及參數(shù)名稱、參數(shù)值均可自定義
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../articleList/articleList?id=${index}`
  
  
   });
  
  
  }
 
 
 
搜索頁(yè)
用戶觸發(fā)搜索功能后將跳轉(zhuǎn)至搜索頁(yè)，頁(yè)面包含搜索歷史以及搜索結(jié)果兩部分。搜索結(jié)果高亮顯示，方便用戶辯識(shí)獲取有效信息；搜索歷史結(jié)構(gòu)化呈現(xiàn)，方便用戶再次進(jìn)行檢索。對(duì)于搜索歷史，也可使用“清空”進(jìn)行刪除。
頁(yè)面路徑：pages/search/search
代碼示例

SWAN
JSON
JS

 
 
 
  
  
  
  
  
   

  
  
   show-fixed-bar='{{false}}'
  
  
   fixed-title="搜索"
  
  
   fixed-front-color="#000000"
  
  
   common-front-color="#000000"
  
  
   common-bg-color='#ffffff'
  
  
   fixed-bg-color='#ffffff'
  
  
   common-bg-opacity="{{false}}"
  
  
   need-to-return="{{true}}"
  
  
   common-title="搜索"
  
  
   bind:navhome="navhome"
  
  
   />
  
  
   
  
  
   
  
  
   

  
  
   class='search-bar-component'
  
  
   value="{{value}}"
  
  
   focus="{{focusing}}"
  
  
   placeholder="{{placeholder}}"
  
  
   confirm-type="{{confirmType}}"
  
  
   sear                                                

                                                本文名稱：創(chuàng)新互聯(lián)百度小程序教程：page-policy政策文件庫(kù)模板                                                

                                                分享URL：http://m.5511xx.com/article/dhhiocp.html


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                主機(jī)集群技術(shù)可以提升網(wǎng)站的性能嗎,什么是主機(jī)集群技術(shù)
                                                            

                                                                10個(gè)業(yè)界流行的Kubernetes發(fā)行版
                                                            

                                                                自學(xué)Linux，開創(chuàng)職場(chǎng)新篇章（自學(xué)linux找工作）
                                                            

                                                                2022年年服務(wù)器托管行業(yè)發(fā)展勢(shì)頭如何
                                                            

                                                                防火墻有哪些常見的配置規(guī)則和策略？