百度智能小程序 政策文件庫(kù)模板

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

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

示例

前提條件

• 已完成小程序創(chuàng)建。
• 已下載并安裝 百度小程序開(kāi)發(fā)者工具（簡(jiǎn)稱 IDE）。

使用說(shuō)明

• 本示例為純客戶端代碼，可直接在模擬器和真機(jī)預(yù)覽。
• 模板中使用的是測(cè)試數(shù)據(jù)，你需要從接口中獲取真實(shí)的數(shù)據(jù)。
• 頁(yè)面模板功能從開(kāi)發(fā)者工具 v2.25.1-rc 版本開(kāi)始支持。
• 該模板使用了 es6 語(yǔ)法，需要開(kāi)啟開(kāi)發(fā)者工具的增強(qiáng)編譯，操作步驟參看開(kāi)啟說(shuō)明；同時(shí)也需開(kāi)啟上傳代碼時(shí)樣式自動(dòng)補(bǔ)全。

使用方式

方式一 【 NPM 】

1. 在小程序根目錄執(zhí)行下方命令，下載頁(yè)面模板的 npm 包：

    npm i @smt-ui-template/page-policy
   

2. 將 /node_modules/@smt-ui-template/page-policy 下的 @smt-ui-template-gov-policy 文件夾拷貝到當(dāng)前小程序合適的目錄下 （如pages）：

   .
   ├── project.swan.json                   
   ├── app.json                            
   ├── app.js                              
   ├── pages
       └── @smt-ui-template-gov-policy     // 模板文件
   

3. 在小程序根目錄的 app.json 中配置模板頁(yè)面的 path 路徑，查看效果，如：

   {
       "pages": [
           ...
           "pages/@smt-ui-template-gov-policy/pages/indexTab/index",
           "pages/@smt-ui-template-gov-policy/pages/indexFilter/index",
           "pages/@smt-ui-template-gov-policy/pages/search/search",
           "pages/@smt-ui-template-gov-policy/pages/subscribe/subscribe",
           "pages/@smt-ui-template-gov-policy/pages/article/article",
           "pages/@smt-ui-template-gov-policy/pages/articleList/articleList",
           "pages/@smt-ui-template-gov-policy/pages/collect/collect"
           ...
       ]
   }
   

4. 為了方便在開(kāi)發(fā)者工具中查看模板頁(yè)的效果，可以設(shè)置模板頁(yè)為小程序預(yù)覽的首頁(yè)。該功能的說(shuō)明請(qǐng)參考自定義編譯文檔。
   

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

1. 打開(kāi)開(kāi)發(fā)者工具，點(diǎn)擊 ”頁(yè)面模板“，在下方找到 ”政策文件庫(kù)“，選中該模板后點(diǎn)擊右下角 ”立即使用”，填寫相關(guān)信息點(diǎn)擊右下角 ”完成“ 按鈕。
2. 使用開(kāi)發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對(duì)模板進(jìn)行二次開(kāi)發(fā)。

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

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

政策文件列表頁(yè)

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

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

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

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

<view class="index-filter {{isIPhoneX ? 'iphone-x-compitable' : ''}} {{isOpenFilter ? 'locked' : ''}}">
    <zw-custom-title-bar
        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"
    >
    </zw-custom-title-bar>
    <view class="security-style" style="height:{{security}}"></view>
    <view class="header">
        <view class="app-handle">
            <view class="app">
                <view class="row-main app-title">政策文件庫(kù)</view>
                <view class="row-sub">文件全文&nbsp;權(quán)威解讀</view>
            </view>
            <view class="handle">
                <view class="handle-item">
                    <view class="row-main handle-icon" bindtap="gotoSubscribe">
                        <zw-icon name="subscribe" size="{{iconsize}}" color="#fff" class="icon-1"/>
                    </view>
                    <view class="row-sub">我的訂閱</view>
                </view>
                <view class="handle-item">
                    <view class="row-main handle-icon" bindtap="gotoCollect">
                        <zw-icon name="no-collect" size="{{iconsize}}" color="#fff" class="icon-2"/>
                    </view>
                    <view class="row-sub">我的收藏</view>
                </view>
            </view>
        </view>
        <view class="search" bindtap="gotoSearch"></view>
    </view>
    <view class="notice-wrap" s-if="notice.text">
       <zw-notice-bar text="{{notice.text}}" bind:close="noticeClose" bind:clicknotice="clicknotice"/>
    </view>
    <view class="content">
        <view class="filter-section" s-if="{{filter.length}}">
            <zw-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
            >
                <zw-filter-item
                    s-for="sub,index in item.children"
                    bind:change="changeFilter"
                    value="{{findex + ':' + sub.id}}"
                    text="{{sub.name}}" />
            </zw-filter>
        </view>
        <view class="filter-content {{notice ? 'smaller' : 'normal'}}">
            <zw-loading s-if="showLoading" zw-loading-status-class="custom-loading">
                <view slot="text">正在加載...</view>
            </zw-loading>
            <zw-state-page show-reload="{{stateBtn}}" type="{{errStatus}}" bind:reload="reload" zw-state-page-class="custom-state" fixed="{{false}}" s-if="{{errStatus !== ''}}"/>
            <block s-if="isLoaded">
                <view class="feed-content">
                    <block s-for="page in list">
                        <zw-list-item
                            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"
                        />
                    </block>
                    <zw-spin status="{{status}}" bind:tap="reloadFeed" s-if="showStatus" zw-spin-class="custom-spin"></zw-spin>
                    <zw-footer s-if="feedEnd" zw-footer-class="custom-footer">
                        <view class="footer-txt">單行footer</view>
                    </zw-footer>
                </view>
            </block>
        </view>
    </view>
</view>

{
    "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è)

頁(yè)面路徑：pages/article/article

分為標(biāo)題以及文字信息區(qū)域，可將圖文等內(nèi)容結(jié)構(gòu)化呈現(xiàn)，方便用戶閱讀。

<view class="article-wrapper">
    <zw-loading s-if="showLoading">
        <view slot="text">正在加載...</view>
    </zw-loading>
    <zw-state-page show-reload="{{stateBtn}}" type="{{errStatus}}" s-if="errStatus !== ''" bind:reload="reload"/>

    <block s-if="isLoaded">
        <view class="{{isIPhoneX ? 'iphone-x-compitable' : '' }}">
            <view class="main-container">
                <view class="main-content">
                    <view class="content">
                        <view class="article-desc" bindtap="changeExpand">
                            <view class="article-title">{{detail.title}}</view>
                            <view class="article-info {{expand.length ? 'nomargin' : ''}}" >
                                <view class="info-item">
                                    <view class="info-name">{{detail.info[0].name}}</view>
                                    <view class="info-value">{{detail.info[0].value}}</view>
                                </view>
                            </view>
                            <view class="expand-icon">
                                <zw-icon
                                    s-if="{{expand.length > 0}}"
                                    name="arrow-{{!expandStatus ? 'down' : 'up'}}"
                                    color="#ccc"
                                    size="{{actionFontSize}}">
                                </zw-icon>
                            </view>
                        </view>

                        <view
                            class="expand-area" s-if="{{expand.length > 0}}"
                            style="height: {{expandStatus ? expandHeight : 0}}px;"
                        >
                            <view class="expand-area-inner">
                                <view class="info-item" s-for="item in expand">
                                    <view class="info-name">{{item.name}}</view>
                                    <view class="info-value">{{item.value}}</view>
                                </view>
                             </view>
                        </view>

                        <rich-text nodes="{{detail.content}}" selectable="true"></rich-text>

                        <view class="subscribe border border-top">
                            <zw-list-item
                                title="{{detail.hoster}}"
                                desc="{{detail.desc}}"
                                clickable="{{false}}"
                                zw-list-item-wrap-class="custom-list"
                                no-border
                            >
                                <slot>
                                    <view class="btn-wrap" >
                                        <zw-button
                                            button-size="xs-small"
                                            button-color="{{detail.status ? 'secondly' : 'thirdly'}}"
                                            button-text="{{detail.status ? '已訂閱' : '訂閱'}}"
                                            bindtap="changeSub"
                                        />
                                    </view>
                                </slot>
                            </zw-list-item>
                        </view>
                    </view>
                    <view class="footer {{isIPhoneX ? 'iphone-x-compitable' : '' }} border border-top {{!isIos ? 'android-patch': ''}}">
                        <view class="footer-inner">
                            <view class="actions-list" >
                                <view class="action" bind:tap="addCollection">
                                    <zw-icon class="icon" name="{{detail.collected ? 'collect-color' : 'collect-thin'}}" size="{{iconSize}}">
                                    </zw-icon>
                                    {{detail.collected ? '已收藏' : '收藏'}}
                                </view>
                            </view>
                            <view class="actions-list" >
                                <view class="action" bind:tap="toShare">
                                    <zw-icon class="icon" name="share" size="{{iconSize}}"></zw-icon>
                                    分享
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </block>
</view>

{
    "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://smartprogram.baidu.com/docs/img/logo_new.png',
        success: res => {
            swan.showToast({
                title: '分享成功'
            });
            console.log('openShare success', res);
        },
        fail: err => {
            console.log('openShare fail', err);
        }
    });
}

我的收藏頁(yè)面

頁(yè)面路徑：pages/collect/collect

用戶收藏過(guò)的內(nèi)容將通過(guò)一定的順序呈現(xiàn)在收藏列表頁(yè)，對(duì)于重點(diǎn)關(guān)注的內(nèi)容，用戶無(wú)需反復(fù)檢索，在收藏列表頁(yè)可直接閱讀。

<view class="collect-wrapper">
    <zw-tabs
        tabs="{{tabs}}"
        type="flex"
        mode="auto"
        active-tab="{{0}}"
        nav-bar-width="100%"
        show-with-animation="{{false}}"
        bindonChange="onCustomTabChange"
    />
    <view class="tab-content {{activeName === 'zc' ? 'show' : 'hide'}} {{isIPhoneX ? 'iphone-x-compitable' : ''}}">
        <zw-loading s-if="zc.showLoading">
            <view slot="text">正在加載...</view>
        </zw-loading>
        <zw-state-page show-reload="{{zc.stateBtn}}" type="{{zc.errStatus}}" s-if="zc.errStatus !== ''" bind:reload="reloadZc" zw-state-page-class="custom-state" fixed="{{false}}"/>
        <block s-if="zc.isLoaded">
            <!-- 上拉加載 -->
            <smt-feed
                class="smt-feed click-zc-refresh"
                data-type="zc"
                bind:scrolltolower="autoScrollToLower"
            >
                <block s-for="page in zc.list">
                    <zw-list-item
                        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"
                    />
                </block>

                <zw-spin status="{{zc.status}}" bind:tap="reloadZcFeed" zw-spin-class="custom-spin"></zw-spin>
            </smt-feed>
        </block>

    </view>
    <view class="tab-content {{activeName === 'jd' ? 'show' : 'hide'}} {{isIPhoneX ? 'iphone-x-compitable' : ''}}">
        <zw-loading s-if="jd.showLoading">
            <view slot="text">正在加載...</view>
        </zw-loading>
        <zw-state-page show-reload="{{jd.stateBtn}}" type="{{jd.errStatus}}" s-if="jd.errStatus !== ''" bind:reload="reloadJd" zw-state-page-class="custom-state" fixed="{{false}}"/>
        <block s-if="jd.isLoaded">
            <!-- 上拉加載 -->
            <zw-feed
                class="smt-feed click-jd-refresh"
                data-type="jd"
                bind:scrolltolower="autoScrollToLower"
            >
                <block s-for="page in jd.list">
                    <zw-list-item
                        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"
                    />
                </block>
                <zw-spin status="{{jd.status}}" bind:tap="reloadJdFeed" zw-spin-class="custom-spin"></zw-spin>
            </zw-feed>
        </block>
    </view>
</view>

{
    "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è)面

頁(yè)面路徑：pages/subscribe/subscribe

開(kāi)發(fā)者可結(jié)合自身業(yè)務(wù)，向用戶提供訂閱功能。對(duì)于訂閱后的內(nèi)容或板塊，用戶無(wú)需反復(fù)檢索，在訂閱列表頁(yè)可直接獲取最新資訊。

<view class="subscribe-wrap swan-security-padding-bottom">
    <zw-loading s-if="showLoading">
        <view slot="text">正在加載...</view>
    </zw-loading>
    <zw-state-page
        s-if="errStatus !== ''"
        show-reload="{{stateBtn}}"
        type="{{errStatus}}"
        bind:reload="reload"
    />
    <view s-if="isLoaded">
        <zw-list-item
            s-for="item, index in subList"
            title="{{item.title}}"
            desc="{{item.desc}}"
            clickable="{{false}}"
            data-index={{index}}
            bind:tap="gotoArticle"
        >
            <slot>
                <view class="btn-wrap" >
                    <zw-button
                        button-size="xs-small"
                        button-color="{{item.status ? 'secondly' : 'thirdly'}}"
                        button-text="{{item.status ? '已訂閱' : '訂閱'}}"
                        data-index="{{index}}"
                        catchtap="changeSub"
                    />
                </view>
            </slot>
        </zw-list-item>
    </view>
</view>

{
    "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è)

頁(yè)面路徑：pages/search/search

用戶觸發(fā)搜索功能后將跳轉(zhuǎn)至搜索頁(yè)，頁(yè)面包含搜索歷史以及搜索結(jié)果兩部分。搜索結(jié)果高亮顯示，方便用戶辯識(shí)獲取有效信息；搜索歷史結(jié)構(gòu)化呈現(xiàn)，方便用戶再次進(jìn)行檢索。對(duì)于搜索歷史，也可使用“清空”進(jìn)行刪除。

<view class="search-wrapper">
     <zw-custom-title-bar
        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"
    />
    <view class="search-component clear">
        <view class="search-bar border border-bottom {{!isIos ? 'android-patch': ''}}">
            <zw-search-bar
                class='search-bar-component'
                value="{{value}}"
                focus="{{focusing}}"
                placeholder="{{placeholder}}"
                confirm-type="{{confirmType}}"
                search-text-color="{{searchTextColor}}"
                bindfocus="focusHdl"
                bindblur="blurHdl"
                bindinput="iptHdl"
                bindconfirm="searchBtnHdl"
                bindclear="emptyHdl"
                bindsearch="searchBtnHdl"
            />
        </view>
        <!-- 狀態(tài) -->
        <view class="status-content" s-if="showLoading || errStatus !== ''">
            <zw-loading s-if="showLoading" zw-loading-status-class="custom-loading">
                <view slot="text">正在加載...</view>
            </zw-loading>
            <zw-state-page
                s-if="errStatus !== ''"
                fixed="{{false}}"
                show-reload="{{errStatus === 'noNetwork' || errStatus === 'warning'}}"
                type="{{errStatus}}"
                bind:reload="reload" class-name="custom-state"/>
        </view>
        <view
            class="search-body"
            s-if="!showLoading"
        >
            <!-- 歷史搜索+熱門搜索 -->
            <view
                class="history-info"
                s-if="!value && !resultState"
            >
                <block s-if="searchInfo.info.length > 0">
                    <view class="history-title">
                        <text>{{searchInfo.title}}</text>
                        <zw-icon
                            s-if="searchInfo.delete"
                            name="trash"
                            size="{{iconsize}}"
                            bindtap="deleteHis"
                            color="#999"
                        />
                    </view>
                    <view class="history-body {{searchInfo.delete ? 'history-body-shrink' : ''}}"
                    >
                        <view
                            class="history-item"
                            s-for="info in searchInfo.info"
                            hover-class="list-hover-feedback"
                            hover-stay-time="{{240}}"
                            bindtap="itemSelect"
                            data-item="{{info}}"
                            data-type="{{item.type}}"
                        >
                            <text>
                                {{info}}
                            </text>
                        </view>
                    </view>
                </block>
            </view>
            <!-- 搜索結(jié)果 -->
            <view
                class="result"
                s-if="resultState"
            >
                <view s-for="item, index in list">
                    <zw-list-item
                        title="{{item.title}}"
                        desc="{{'發(fā)文機(jī)關(guān)：' + item.office}}"
                        clickable="{{true}}"
                        data-aid="item.id"
                        bind:tap="gotoArticle"
                    >
                        <view slot="title">
                            <rich-text nodes="{{item.title}}" selectable="true" />
                        </view>
                    </zw-list-item>
                </view>
            </view>
        </view>
    </view>
</view>

{
    "navigationBarTitleText": "搜索",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom",
    "enablePullDownRefresh": false,
    "usingComponents": {
        "zw-search-bar": "../../components/SearchBar/src/index",
        "zw-state-page": "../../components/StatePage/src/index",
        "zw-icon": "../../components/Icon/src/index",
        "zw-loading": "../../components/LoadingStatus/src/index",
        "zw-custom-title-bar": "../../components/CustomTitleBar/src/index",
        "zw-list-item": "../../components/ListItem/src/index"
    }
}

onLoad() {
    // 從緩存中獲取歷史記錄
    let searchInfo = {};
    swan.getStorage({
        key: this.data.historyStorageName,
        success: res => {
            const localHistory = res.data;
            if (localHistory) {
                // 處理緩存的歷史數(shù)據(jù)
            }
        },
        fail: () => {
            // 獲取緩存異常處理
        }
    });
},
// 將歷史搜索存入 Storage，緩存搜索歷史
saveHistory(text) {
    // 設(shè)置搜索歷史緩存
    swan.setStorage({
        key: this.data.historyStorageName,
        exp: 60 * 24 * 60 * 60 * 1000,
        data: history
    });
},
// 刪除歷史記錄，可直接通過(guò)清除緩存數(shù)據(jù)來(lái)刪除搜索歷史
deleteHis() {
    // 彈窗二次確認(rèn)
    swan.showModal({
        title: '清空搜索歷史',
        content: '數(shù)據(jù)清空后,相關(guān)內(nèi)容無(wú)法恢復(fù)',
        confirmText: '確認(rèn)清空',
        cancelText: '取消',
        success: res => {
            // 確認(rèn)清空
            if (res.confirm) {
                this.setData({
                    'searchInfo.info': []
                });
                // 移除緩存數(shù)據(jù)
                swan.removeStorageSync(this.data.historyStorageName);
            }
        }
    });
},
// 格式化搜索結(jié)果數(shù)據(jù)。搜索詞高亮處理，高亮處理也可以直接放在接口處理，接口返回帶樣式的內(nèi)容放在富文本展示。示例中的高亮詞是mock數(shù)據(jù)。
fomateValue(value) {
    const arr = value.split('<em');
    return arr.map(item => {
        if (item.indexOf('>') > -1) {
            const result = item.slice(item.indexOf('>') + 1);
            return result.split('</em>').join('');
        }
        return item;
    }).join('');
},
// 請(qǐng)求接口，獲取搜索結(jié)果
getResult(query, isSaveHis = false) {
    // 是否要保存歷史記錄
    isSaveHis && this.saveHistory(query);
    getSearchList(this.data.activeName, ({code, msg, data}) => {
        if (code === 0) {
            // 接口正常響應(yīng)處理
        }
        else {
            // 接口異常處理
        }
    });
},
// 回到小程序的首頁(yè)，url 路徑可根據(jù)實(shí)際路徑替換
navhome() {
    navigateTo({
        url: '../indexTab/index'
    });
},
// 跳轉(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}`
    });
}

自定義 UI 組件

在政策文件庫(kù)中，用到了如下自定義 UI 組件：

NPM 依賴