百度智能小程序 綜合政務服務大廳模板

2020-09-03 15:56 更新

page-service-hall 綜合政務服務大廳模板

解釋: 本模板適用于國家或各省市區(qū)政府線上辦事大廳的快速搭建工作,模板包含搜索、banner、區(qū)域切換、電子證照、熱門服務推薦、服務列表、個人中心等功能模塊,開發(fā)者可根據(jù)實際需求對功能模塊進行增刪改等二次開發(fā)。

示例


前提條件

使用說明

  • 本示例為小程序前端代碼,可直接在模擬器和真機預覽。
  • 模板中使用的是測試數(shù)據(jù),開發(fā)者需要從接口中獲取真實的數(shù)據(jù)。
  • 頁面模板功能從開發(fā)者工具 v2.25.1-rc 版本開始支持。
  • 該模板使用了 es6 語法,需要開啟開發(fā)者工具的增強編譯,操作步驟參看開啟說明;同時也需開啟上傳代碼時樣式自動補全。

使用方式

方式一 【 NPM 】

  1. 在小程序根目錄執(zhí)行下方命令,下載頁面模板的 npm 包:
    npm i @smt-ui-template/page-service-hall
    
  2. 將 /node_modules/@smt-ui-template/page-service-hall 下的 @smt-ui-template-page-service-hall 文件夾拷貝到當前小程序合適的目錄下 (如pages):
  3. .
    ├── project.swan.json
    ├── app.json
    ├── app.js
    ├── pages
        └── @smt-ui-template-page-service-hall    // 模板文件
    
  4. 在小程序根目錄的 app.json 中配置模板頁面的 path 路徑,查看效果,如:
    {
        "pages": [
            ...
            "pages/@smt-ui-template-page-service-hall/pages/index/index",
            "pages/@smt-ui-template-page-service-hall/pages/mine/index",
            "pages/@smt-ui-template-page-service-hall/pages/search/index",
            "pages/@smt-ui-template-page-service-hall/pages/certificate/index/index",
            "pages/@smt-ui-template-page-service-hall/pages/certificate/detail/index",
            "pages/@smt-ui-template-page-service-hall/pages/services/index",
            "pages/@smt-ui-template-page-service-hall/pages/setting/index",
            "pages/@smt-ui-template-page-service-hall/pages/personal/index",
            "pages/@smt-ui-template-page-service-hall/pages/city/index",
            "pages/@smt-ui-template-page-service-hall/pages/webview/index"
            ...
        ]
    }
    
  5. 為了方便在開發(fā)者工具中查看模版頁的效果,可以設置模板頁為小程序預覽的首頁。詳情請見自定義編譯文檔。


方式二 【 開發(fā)者工具-頁面模板 】

  1. 打開開發(fā)者工具,點擊 ”頁面模板“,在下方找到 ”綜合政務服務大廳模板“,選中該模板后點擊右下角 ”立即使用”,填寫相關信息點擊右下角 ”完成“ 按鈕。
  2. 使用開發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對模板進行二次開發(fā)。

頁面內容

模板包含8個頁面,分別是:首頁、個人中心頁、服務列表頁、搜索頁、電子證照頁、地區(qū)選擇頁、辦件中心頁、個人設置頁。

首頁

頁面路徑:index/index

聚合所有服務入口,頁面包含政策資訊、電子證照、熱門服務、banner、服務主題、服務專區(qū)、地區(qū)切換、搜索、天氣等服務模塊。

服務列表頁

頁面路徑:services/index

展示某一服務分類下的具體服務項,頁面中包含二級分類可進一步對服務項進行分類。

搜索頁

頁面路徑:search/index

在搜索模塊中提供了語音搜索、搜索歷史、熱門搜索、搜索詞推薦、搜索結果展示等功能和頁面樣式。

電子證照頁

頁面路徑:certificate/index/index

包含電子證照列表頁和電子證照詳情頁,證照列表頁中可展示用戶已關聯(lián)和未關聯(lián)的證照,證照詳情頁中可展示具體證照信息及與此證照相關的服務項。

地區(qū)選擇頁

頁面路徑:city/index

用戶可在此頁面操作切換地區(qū),支持通過定位選擇位置,支持通過歷史記錄選擇位置,支持通過首字母索引查找地區(qū)。

個人中心頁

頁面路徑:mine/index

聚合與用戶相關的基礎服務入口,包含辦件中心、我的收藏、我的建議、意見反饋、個人設置等功能。

辦件中心頁

頁面路徑:personal/index

展示用戶辦理的服務項,包含全部、待受理、已受理、已辦結4個分類。

個人設置頁

頁面路徑:setting/index

為用戶提供常用的個人設置相關功能,如個人信息、常用聯(lián)系人管理、權限管理、退出登錄等。

NPM 依賴

名稱版本號
@smt-ui/component-govlatest
@smt-ui/componentlatest


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號