欢迎光临
我们一直在努力
当前位置：九八云安全 行业资讯 正文

九八云百度小程序教程：page-frame 基础政务服务大厅模板

2024-08-19 分类：行业资讯 阅读(21) 评论(0)
  • page-frame 基础政务服务大厅模板
    • 示例
    • 页面内容
      • 服务大厅首页
      • 服务列表页
    • npm 依赖
    • Bug & Tip

    page-frame 基础政务服务大厅模板

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

    解释：本模板适用于各政府部门或区县政务服务线上办事大厅快速搭建工作，如社保、公安、税务、教育等部门，模板包含服务类目列表页、二级服务列表页，开发者可根据实际业务分类方式进行二次开发，以实现服务列表清晰、直观、结构化的展现形式。

    示例

    扫码体验

    代码示例

    请使用百度APP扫码

    页面内容

    模板包含两个页面：服务大厅首页、服务列表页。

    服务大厅首页

    页面包含首页头部板块、小程序名称及描述区域、服务提供方描述区域可对开发者主体进行介绍。模板提供红、蓝两种配色供选择。

    页面路径：pages/index

    代码示例

    • SWAN
    • JSON
    
 
      

  
    1. <view class="frame {{loading ? 'skeleton-sweep' : 'skeleton-wrap'}} {{checkFullScreen ? 'screen-x' : 'screen'}}">
      2. 

  
    2.  <gov-custom-title-bar
      3. 

  
    3.  s-if="{{!loading && !statusType && showBar}}"
      4. 

  
    4.  animation
      5. 

  
    5.  show-fixed-bar
      6. 

  
    6.  fixed-title="{{frameList.name}}"
      7. 

  
    7.  fixed-front-color="#000000"
      8. 

  
    8.  common-front-color="#ffffff"
      9. 

  
    9.  common-bg-color="{{theme}}"
      10. 

  
    10.  common-bg-opacity="{{true}}"
      11. 

  
    11.  switch-start-position="10"
      12. 

  
    12.  switch-end-position="60"
      13. 

  
    13.  ></gov-custom-title-bar>
      14. 

  
    14.  <smt-page-status
      15. 

  
    15.  s-if="{{!loading && statusType}}"
      16. 

  
    16.  class="frame-status"
      17. 

  
    17.  icon="{{statusConfig[statusType].icon}}"
      18. 

  
    18.  title="{{statusConfig[statusType].title}}"
      19. 

  
    19.  desc="{{statusConfig[statusType].desc}}"
      20. 

  
    20.  showBtn="{{statusConfig[statusType].showBtn}}"
      21. 

  
    21.  bindsmtreloading="requestList"
      22. 

  
    22.  ></smt-page-status>
      23. 

  
    23.  <gov-layout
      24. 

  
    24.  s-else
      25. 

  
    25.  text="{{frameList.hoster}}"
      26. 

  
    26.  gov-layout-container="frame-content"
      27. 

  
    27.  >
      28. 

  
    28.  <view slot="container">
      29. 

  
    29.  <view class="frame-head" style="background: {{theme}}">
      30. 

  
    30.  <view class="name">{{frameList.name}}</view>
      31. 

  
    31.  <view class="slogan">{{frameList.slogan}}</view>
      32. 

  
    32.  </view>
      33. 

  
    33.  <view class="frame-service">
      34. 

  
    34.  <view class="service-card" s-for="val, i in frameList.service">
      35. 

  
    35.  <gov-list-item
      36. 

  
    36.  label="{{val.category}}"
      37. 

  
    37.  gov-label="gov-label"
      38. 

  
    38.  label-width="6em"
      39. 

  
    39.  border
      40. 

  
    40.  ></gov-list-item>
      41. 

  
    41.  <gov-list-item
      42. 

  
    42.  s-for="item, s in val.subCategory"
      43. 

  
    43.  content="{{item.name}}"
      44. 

  
    44.  border="{{s !== val.subCategory.length - 1}}"
      45. 

  
    45.  contentDesc="{{item.desc}}"
      46. 

  
    46.  gov-content="gov-content"
      47. 

  
    47.  label-width="0"
      48. 

  
    48.  data-service="{{i}}"
      49. 

  
    49.  data-list="{{s}}"
      50. 

  
    50.  bindtap="goService"
      51. 

  
    51.  arrow
      52. 

  
    52.  clickable
      53. 

  
    53.  >
      54. 

  
    54.  <view
      55. 

  
    55.  slot="left"
      56. 

  
    56.  >
      57. 

  
    57.  <image class="sub-category-icon" mode="aspectFit" src="{{item.icon}}"/>
      58. 

  
    58.  </view>
      59. 

  
    59.  </gov-list-item>
      60. 

  
    60.  </view>
      61. 

  
    61.  </view>
      62. 

  
    62.  </view>
      63. 

  
    63.  </gov-layout>
      64. 

  
    64. </view>
      65. 

 
    
 
      

  
    1. {
      2. 

  
    2.  "navigationStyle": "custom",
      3. 

  
    3.  "navigationBarTextStyle": "white",
      4. 

  
    4.  "usingComponents": {
      5. 

  
    5.  "gov-custom-title-bar": "@smt-ui/component-gov/src/custom-title-bar",
      6. 

  
    6.  "gov-list-item": "@smt-ui/component-gov/src/list-item",
      7. 

  
    7.  "gov-layout": "@smt-ui/component-gov/src/layout",
      8. 

  
    8.  "smt-page-status": "@smt-ui/component/src/page-status"
      9. 

  
    9.  }
      10. 

  
    10. }
      11.

    • 页面初始化，可设置服务项、主题色，页面状态

    • JS

    
 
      

  
    1. onLoad(options) {
      2. 

  
    2.  // frameList为mock的数据
      3. 

  
    3.  const {code, theme} = frameList;
      4. 

  
    4.  this.setData({
      5. 

  
    5.  // 服务项
      6. 

  
    6.  frameList: frameList,
      7. 

  
    7.  // 根据主题修改配色
      8. 

  
    8.  theme: theme === 'blue' ? COLOR_BLUE : COLOR_RED,
      9. 

  
    9.  // code 0: 正常获取数据 99999: 无网络 其他: 服务异常
      10. 

  
    10.  statusType: code === 99999 ? 'noNetwork' : code !== 0 ? 'warning' : ''
      11. 

  
    11.  });
      12. 

  
    12. }
      13.

    • 跳转服务列表页，开发者可以按需传递参数到列表页

    • JS

    
 
      

  
    1. goService({currentTarget}) {
      2. 

  
    2.  const {service, list} = currentTarget.dataset;
      3. 

  
    3.  // 跳转服务列表页，跳转的list和theme参数只是mock数据举例，具体是否需要带参数跳转、参数名称、参数值可自定义。
      4. 

  
    4.  swan.navigateTo({
      5. 

  
    5.  url: 'pages/@smt-ui-template-page-frame/pages/services/index?list=${JSON.stringify(this.data.frameList.service[service].subCategory[list])}&theme=${this.data.frameList.theme}'
      6. 

  
    6.  });
      7. 

  
    7. }
      8.

    • 根据主题修改配色

    • JS

    
 
      

  
    1. import {COLOR_BLUE, COLOR_RED} from '../../common/style/color.js';
      2. 

  
      3. 

  
    3. ...
      4. 

  
      5. 

  
    5. this.setData({
      6. 

  
    6.  // 根据主题修改配色
      7. 

  
    7.  theme: theme === 'blue' ? COLOR_BLUE : COLOR_RED,
      8. 

  
    8. });
      9.

    服务列表页

    页面包含服务类目列表，可以将服务项进行清晰直观的分类展示。

    页面路径：pages/services

    代码示例

    • SWAN
    • JSON
    
 
      

  
    1. <view class="frame {{loading ? 'skeleton-sweep' : 'skeleton-wrap'}} {{checkFullScreen ? 'screen-x' : 'screen'}}">
      2. 

  
    2.  <gov-custom-title-bar
      3. 

  
    3.  animation
      4. 

  
    4.  show-fixed-bar
      5. 

  
    5.  fixed-title="{{services.name}}"
      6. 

  
    6.  common-front-color="#000000"
      7. 

  
    7.  fixed-bg-color='#ffffff'
      8. 

  
    8.  common-bg-opacity="{{true}}"
      9. 

  
    9.  need-to-return="{{true}}"
      10. 

  
    10.  gov-fixed-nav-bar="{{isOpacity || statusType ? 'gov-fixed' : ''}}"
      11. 

  
    11.  switch-start-position="10"
      12. 

  
    12.  switch-end-position="60"
      13. 

  
    13.  >
      14. 

  
    14.  </gov-custom-title-bar>
      15. 

  
    15.  <smt-page-status
      16. 

  
    16.  s-if="{{!loading && statusType}}"
      17. 

  
    17.  class="frame-status"
      18. 

  
    18.  icon="{{statusConfig[statusType].icon}}"
      19. 

  
    19.  title="{{statusConfig[statusType].title}}"
      20. 

  
    20.  desc="{{statusConfig[statusType].desc}}"
      21. 

  
    21.  showBtn="{{statusConfig[statusType].showBtn}}"
      22. 

  
    22.  bindsmtreloading="requestList"
      23. 

  
    23.  ></smt-page-status>
      24. 

  
    24.  <gov-layout
      25. 

  
    25.  s-else
      26. 

  
    26.  text="{{services.hoster}}"
      27. 

  
    27.  gov-layout-container="frame-content"
      28. 

  
    28.  gov-layout-text="frame-footer"
      29. 

  
    29.  >
      30. 

  
    30.  <view slot="container">
      31. 

  
    31.  <view class="service-container">
      32. 

  
    32.  <view class="service-bg">
      33. 

  
    33.  <image
      34. 

  
    34.  class="service-bg-img"
      35. 

  
    35.  src="{{headBg}}"
      36. 

  
    36.  ></image>
      37. 

  
    37.  </view>
      38. 

  
    38.  <view class="service-content">
      39. 

  
    39.  <view class="service-header">
      40. 

  
    40.  <view class="header-title" style="{{theme}}">{{services.name}}</view>
      41. 

  
    41.  <view class="header-desc" style="{{theme}}">{{desc}}</view>
      42. 

  
    42.  </view>
      43. 

  
    43.  </view>
      44. 

  
    44.  </view>
      45. 

  
    45.  <view class="service-list" s-for="val in services.service">
      46. 

  
    46.  <view class="service-title" >{{val.name}}</view>
      47. 

  
    47.  <gov-list-item
      48. 

  
    48.  s-for="v in val.list"
      49. 

  
    49.  label="{{v.name}}"
      50. 

  
    50.  bindtap="clickService"
      51. 

  
    51.  gov-label="label-text"
      52. 

  
    52.  label-width="6em"
      53. 

  
    53.  arrow
      54. 

  
    54.  border
      55. 

  
    55.  clickable
      56. 

  
    56.  />
      57. 

  
    57.  </view>
      58. 

  
    58.  </view>
      59. 

  
    59.  </gov-layout>
      60. 

  
    60. </view>
      61. 

 
    
 
      

  
    1. {
      2. 

  
    2.  "navigationBarTextStyle": "black",
      3. 

  
    3.  "navigationStyle": "custom",
      4. 

  
    4.  "usingComponents": {
      5. 

  
    5.  "gov-custom-title-bar": "@smt-ui/component-gov/src/custom-title-bar",
      6. 

  
    6.  "gov-list-item": "@smt-ui/component-gov/src/list-item",
      7. 

  
    7.  "gov-layout": "@smt-ui/component-gov/src/layout",
      8. 

  
    8.  "smt-page-status": "@smt-ui/component/src/page-status"
      9. 

  
    9.  }
      10. 

  
    10. }
      11.

    • 页面初始化，可设置服务列表项、主题色、欢迎语

    • JS

    
 
      

  
    1. onLoad({list, theme, type}) {
      2. 

  
    2.  this.setData({
      3. 

  
    3.  // 设置服务列表项
      4. 

  
    4.  services: JSON.parse(list),
      5. 

  
    5.  // 根据当前主题切换头部背景
      6. 

  
    6.  headBg: '../../images/bg${theme}.png',
      7. 

  
    7.  desc: this.getGreet() + '，欢迎使用该服务！',
      8. 

  
    8.  theme: {
      9. 

  
    9.  // 根据当前主题切换配色
      10. 

  
    10.  color: theme === 'blue' ? COLOR_BLUE_1 : COLOR_RED_1
      11. 

  
    11.  },
      12. 

  
    12.  statusType: type
      13. 

  
    13.  });
      14. 

  
    14. }
      15.

    • 点击服务项事件，可自定义落地页

    • JS

    
 
      

  
    1. clickService() {
      2. 

  
    2.  // url路径可根据实际落地页路径替换
      3. 

  
    3.  swan.navigateTo({
      4. 

  
    4.  url: './nextPage'
      5. 

  
    5.  });
      6. 

  
    6. }
      7.

    npm 依赖

    名称 版本号
    @smt-ui/component-gov 1.1.19-alpha.0
    @smt-ui/component latest

    Bug & Tip

    • Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
    • Tip：以上代码示例为纯客户端代码，可直接在模拟器和真机预览。
    • Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。

    赞(0) 打赏
    未经允许不得转载：九八云安全 » 九八云百度小程序教程：page-frame 基础政务服务大厅模板
    分享到

    相关推荐

    评论 抢沙发

    取消

    攻防案列