创新互联百度小程序教程：page-policy政策文件库模板

page-policy 政策文件库模板
- 示例
- 页面内容
  - 政策文件列表页
  - 政策文件详情页
  - 我的收藏页面
  - 我的订阅页面
  - 搜索页
- 自定义 UI 组件
- npm 依赖
- Bug & Tip

page-policy 政策文件库模板

从开发者工具 v2.25.1-rc 版本开始支持。

解释：本模板适用于信息公开类小程序的快速搭建，可应用于办税指南、法律宝典、街道信息公告通知等场景，可将信息结构化的呈现给用户，方便用户快速阅读获取有效的信息。

示例

扫码体验

代码示例

请使用百度APP扫码

页面内容

模板包含政策文件列表页、政策文件详情页、收藏列表页以及订阅列表页、搜索结果页。

政策文件列表页

政策文件列表页包含搜索以及筛选组件，用户可以快速获取所需要的信息，同时页面包含跑马灯组件、tab 切换组件可实现信息轮播提示、板块切换等交互效果，丰富页面功能，提升使用体验。

页面路径：pages/indexFilter/index、pages/indexTab/index

列表页提供了筛选器和 tab 两种效果样式。其中，pages/indexFilter/index 是带筛选器的模板页，pages/indexTab/index 是带 tab 切换的模板页。如果想查看不同的模板类型，可以修改小程序根目录下的 app.json 文件，将对应类型的模板页面路径放到第一个。

代码示例

以下是使用筛选器的首页模板代码：
SWAN
JSON
JS

 
 
 
  
  
  
  
  
   

  
  
   class='policy-home-filter'
  
  
   common-bg-opacity="{{true}}"
  
  
   common-front-color="#ffffff"
  
  
   fixed-title="政策文件库"
  
  
   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"
  
  
   >
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   政策文件库
  
  
   文件全文 权威解读
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   我的订阅
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   我的收藏
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   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="{{'发文机关：' + item.office}}"
  
  
   clickable="{{true}}"
  
  
   data-aid="item.id"
  
  
   bind:tap="gotoArticle"
  
  
   />
  
  
   
  
  
   
  
  
   
  
  
   单行footer


 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "政策文件库",
  
  
   "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"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  // 获取列表数据，以下为使用 mock 数据的请求示例
  
  
  getHomeList(query, ({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 设置筛选器数据
  
  
   !filter.length && (res.filter = data.filter);
  
  
   // 更新通知栏内容
  
  
   !notice && !this.data.hideNotice && data.notice && (res.notice = data.notice);
  
  
   // ...
  
  
   }
  
  
   else {
  
  
   // 请求异常处理
  
  
   }
  
  
  }),
  
  
  // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../article/article?id=${index}`
  
  
   });
  
  
  }
 
 
 
政策文件详情页
分为标题以及文字信息区域，可将图文等内容结构化呈现，方便用户阅读。
页面路径：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": "政策文件库",
  
  
   "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"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  // 请求接口，获取文件详情
  
  
  getArticle(({code, msg, data}) => {
  
  
   // 请求正常响应
  
  
   if (code === 0) {
  
  
   // ...
  
  
   }
  
  
   // 请求异常
  
  
   else {
  
  
   // ...
  
  
   }
  
  
  }),
  
  
  // 切换订阅状态
  
  
  changeSub(e) {
  
  
   // 获取当前订阅状态
  
  
   const status = this.data.detail.status;
  
  
   // 请求接口，切换订阅状态
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 请求正常响应
  
  
   if (code === 0) {
  
  
   // 更新订阅状态
  
  
   }
  
  
   });
  
  
  },
  
  
  // 切换收藏状态
  
  
  addCollection(e) {
  
  
   // 获取当前收藏状态
  
  
   const status = this.data.detail.collected;
  
  
   // 请求接口，切换收藏状态
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 请求正常响应
  
  
   if (code === 0) {
  
  
   // 更新收藏状态
  
  
   }
  
  
   });
  
  
  },
  
  
  // 分享的标题、内容、路径、图片地址，分享成功、分享失败的回调都可以根据实际业务场景和需求自定义。
  
  
  toShare() {
  
  
   swan.openShare({
  
  
   title: '政策文件库分享示例',
  
  
   content: '中共中央办公厅印发《2019-2023年全国党员教育培训工作规划》',
  
  
   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);
  
  
   }
  
  
   });
  
  
  }
 
 
 
我的收藏页面
用户收藏过的内容将通过一定的顺序呈现在收藏列表页，对于重点关注的内容，用户无需反复检索，在收藏列表页可直接阅读。
页面路径：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="{{'发文机关：' + 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="{{'发文机关：' + 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"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  // 请求接口，获取收藏数据
  
  
  getCollectList(name, ({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 请求正常响应处理
  
  
   }
  
  
   else {
  
  
   // 请求异常处理
  
  
   }
  
  
  }),
  
  
  // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../article/article?id=${index}`
  
  
   });
  
  
  }
 
 
 
我的订阅页面
开发者可结合自身业务，向用户提供订阅功能。对于订阅后的内容或板块，用户无需反复检索，在订阅列表页可直接获取最新资讯。
页面路径：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"
  
  
   }
  
  
  }
 
 
 
 
 
 
  
  
  // 请求接口，获取关注列表数据
  
  
  getList(({code, msg, data}) => {
  
  
   if (code === 0) {
  
  
   // 请求正常响应处理
  
  
   }
  
  
   else {
  
  
   // 请求异常处理
  
  
   }
  
  
  }),
  
  
  // 切换订阅状态
  
  
  changeSub(e) {
  
  
   // 获取当前订阅状态
  
  
   const status = this.data.subList[index].status;
  
  
  
  
  
   changeStatus(status, ({code, data}) => {
  
  
   // 请求正常响应
  
  
   if (code === 0) {
  
  
   // 更新订阅状态
  
  
   }
  
  
   });
  
  
  },
  
  
  // 跳转到文章详情页。跳转携带的 id 参数只是 mock 数据举例，是否需要带参数跳转以及参数名称、参数值均可自定义
  
  
  gotoArticle(e) {
  
  
   const index = e.currentTarget.dataset.aid;
  
  
   navigateTo({
  
  
   url: `../articleList/articleList?id=${index}`
  
  
   });
  
  
  }
 
 
 
搜索页
用户触发搜索功能后将跳转至搜索页，页面包含搜索历史以及搜索结果两部分。搜索结果高亮显示，方便用户辩识获取有效信息；搜索历史结构化呈现，方便用户再次进行检索。对于搜索历史，也可使用“清空”进行删除。
页面路径：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            

            网站题目：创新互联百度小程序教程：page-policy政策文件库模板            

            网页地址：http://www.zjjierui.cn/article/dhhiocp.html


    
        其他资讯
        
            
                    这个域名已经注册我搞错了
                

                    什么是集群服务器？集群服务器用
                

                    服务器免实名租用分为什么「服务器免实名租用分为什么类型」
                

                    汇总XHTML标签对搜索引擎的权重
                

                    几种典型的Java内存泄漏

广元网站建设

创新互联百度小程序教程：page-policy政策文件库模板

page-policy 政策文件库模板

示例

页面内容

政策文件列表页

政策文件详情页

我的收藏页面

我的订阅页面

搜索页

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接交换友情链接

广元网站建设

创新互联百度小程序教程：page-policy政策文件库模板

page-policy 政策文件库模板

示例

页面内容

政策文件列表页

政策文件详情页

我的收藏页面

我的订阅页面

搜索页

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接 交换友情链接

友情链接交换友情链接