百度智能小程序基本原理

百度智能小程序 SmartUI

百度智能小程序綜合能力實例

百度智能小程序工具

閱讀(1.4k) 書簽贊(0) 我要糾錯

百度智能小程序查詢類服務(wù)模板

2020-09-03 15:56 更新

page-query-form 查詢類服務(wù)模板

解釋: 本模板適用于成績查詢、證書查詢等查詢類服務(wù)項開發(fā)工作，模板內(nèi)包含的組件豐富，覆蓋大多數(shù)查詢類服務(wù)項場景，開發(fā)者僅需通過調(diào)整組件屬性以及排序即可快速完成前端開發(fā)工作。

示例

前提條件

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

使用說明

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

使用方式

方式一【 NPM 】

在小程序根目錄執(zhí)行下方命令，下載頁面模板的 npm 包：
```
npm i @smt-ui-template/page-query-form
```

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

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

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

{
    "pages": [
        ...
        "pages/@smt-ui-template-page-query-form/pages/index/index",
        "pages/@smt-ui-template-page-query-form/pages/result/result",
        ...
    ]
}

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

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

打開開發(fā)者工具，點擊 ”頁面模板“，在下方找到 ”查詢類服務(wù)模板“，選中該模板后點擊右下角 ”立即使用”，填寫相關(guān)信息點擊右下角 ”完成“ 按鈕。
使用開發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對模板進行二次開發(fā)。

頁面內(nèi)容

模板包含兩個頁面：查詢參數(shù)填寫頁、查詢結(jié)果頁

查詢參數(shù)填寫頁

頁面路徑：pages/index/index

頁面包含信息輸入操作常用組件，例如輸入框、日期選擇器、位置選擇器等，同時結(jié)合政務(wù)查詢類服務(wù)特性，模板內(nèi)包含了彈窗組件，當(dāng)用戶進入服務(wù)頁面時，可通過彈窗對用戶進行強提醒，加強信息的觸達效果，保障用戶辦理查詢類服務(wù)時的使用體驗。

<!-- index.swan -->
<view class="{{checkFullScreen ? 'wrap container-bottom' : 'wrap'}}">
    <gov-notice-bar
        s-if="{{showNoticeBar}}"
        text="{{noticeContent}}">
    </gov-notice-bar>
    <gov-input
        data-id="iptOne"
        ipt-item-type="short"
        type="text"
        ipt-title="輸入框"
        placeholder-content="請輸入內(nèi)容"
        ipt-value="{{model.iptOne.iptValue}}"
        bindkeyinput="bindInput"
        bindiptblur="bindBlur"
        bindiptclean="cleanRoad"
        ipt-error-info="{{model.iptOne.iptErrorInfo}}">
    </gov-input>
    <gov-picker
        placeholder="請選擇選項"
        label-width="4em"
        range-key="type"
        errColor="#C40311"
        value="{{model.pickerOne.iptValue}}"
        bindchange="pickerOne"
        label="選擇框"
        range="{{optionsOne}}">
    </gov-picker>
    <gov-input
        data-id="password"
        ipt-item-type="short"
        type="text"
        ipt-title="密碼框"
        placeholder-content="請輸入密碼"
        ipt-value="{{model.password.iptValue}}"
        password="true"
        bindkeyinput="bindInput"
        bindiptblur="bindBlur"
        bindiptclean="cleanRoad"
        ipt-error-info="{{model.password.iptErrorInfo}}">
    </gov-input>
    <gov-input
        data-id="idCard"
        ipt-item-type="short"
        type="idcard"
        ipt-title="身份證號"
        placeholder-content="請輸入身份證號"
        ipt-value="{{model.idCard.iptValue}}"
        maxlength="18"
        bindkeyinput="bindInput"
        bindiptblur="bindBlur"
        bindiptclean="cleanRoad"
        ipt-error-info="{{model.idCard.iptErrorInfo}}">
    </gov-input>
    <gov-input
        data-id="phone"
        ipt-item-type="short"
        type="number"
        maxlength="11"
        ipt-title="手機號"
        placeholder-content="請輸入手機號"
        ipt-value="{{model.phone.iptValue}}"
        bindkeyinput="bindInput"
        bindiptblur="bindBlur"
        bindiptclean="cleanRoad"
        ipt-error-info="{{model.phone.iptErrorInfo}}">
    </gov-input>
    <gov-sms-input
        data-id="smsInput"
        type="number"
        label-width="4em"
        max-length="{{6}}"
        bindkeyinput="bindInput"
        bindiptblur="bindBlur"
        bindsmssend="smssend"
        placeholder-content="請輸入短信驗證碼"
        ipt-value="{{model.smsInput.iptValue}}"
        ipt-error-color="#C40311"
        ipt-error-flag="{{model.smsInput.iptErrorInfo.errFlag}}">
    </gov-sms-input>
    <!-- 驗證碼圖片(verify-img-url屬性值)為示例，線上使用應(yīng)替換為開發(fā)者自己的驗證碼圖片 -->
    <gov-captcha
        data-id="govCaptcha"
        type="number"
        ipt-area-width="4em"
        max-length="{{4}}"
        verify-img-url="{{model.govCaptcha.codeImg}}"
        bindkeyinput="bindInput"
        bindiptblur="bindBlur"
        bindrefreshimg="reloadImg"
        ipt-value="{{model.govCaptcha.iptValue}}"
        ipt-error-info="{{model.govCaptcha.iptErrorInfo.errFlag}}">
    </gov-captcha>
    <gov-picker
        data-id="pickerDate"
        placeholder="請選擇日期"
        label-width="4em"
        mode="date"
        start="2020-01-01"
        end="2025-12-31"
        value="{{model.pickerDate.iptValue}}" 
        bindchange="pickerDate"
        label="日期">
    </gov-picker>
    <gov-picker
        placeholder="請選擇所在地區(qū)"
        mode="region"
        label-width="4em"
        value="{{model.pickerRegion.iptValue}}" 
        bindchange="pickerRegion"
        label="所在地區(qū)">
    </gov-picker>
    <view class="btn-important">
        <gov-button
            button-size="large"
            button-text="查詢"
            button-disabled="{{buttonDisabled}}"
            data-isValidata="true"
            button-color="#2772FB"
            bindtap="buttonImportant">
        </gov-button>
    </view>
    <gov-button
        button-size="large"
        button-text="輔助按鈕"
        button-color="plain"
        bindtap="buttonTap">
    </gov-button>
    <view class="prompt">
        <gov-prompt>
            <view slot="title">溫馨提示：</view>
            <view slot="content">
                此板塊為提示區(qū)，可用于提醒用戶業(yè)務(wù)填寫中的注意事項及要求
                <text class="prompt-text" bindtap="toView">點擊查看</text>
            </view>
        </gov-prompt>
    </view>
</view>

{
    "navigationBarTitleText": "標(biāo)題文字",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "dark",
    "usingComponents": {
        "gov-picker": "@smt-ui/component-gov/src/picker",
        "gov-notice-bar": "@smt-ui/component-gov/src/notice-bar",
        "gov-sms-input": "@smt-ui/component-gov/src/sms-input",
        "gov-prompt": "@smt-ui/component-gov/src/prompt",
        "gov-captcha": "@smt-ui/component-gov/src/captcha",
        "gov-button": "@smt-ui/component-gov/src/button",
        "gov-input": "@smt-ui/component-gov/src/input"
    }
}

頁面初始化, 可進行辦理前提示和初始化數(shù)據(jù)等操作

onLoad() {
    // 初始化圖形驗證碼
    this.reloadImg();
    // 辦理前提示
    swan.showModal({
        title: '提示',
        content: '此彈窗可在業(yè)務(wù)辦理前對用戶進行預(yù)先提醒',
        showCancel: false,
        confirmText: '我知道了'
    });
}

輸入框事件，包含普通輸入框、密碼輸入框、身份證輸入框、手機號輸入框、短信驗證碼輸入框、圖形驗證碼輸入框

/**
 * 輸入框的 input 事件
 *
 * @param {Event} e 事件對象
 */
bindInput(e) {
    // 將 input 輸入的值賦給 model 中對應(yīng)屬性的 iptValue 字段， 用于后續(xù)校驗和提交表單使用
    this.setData({
        ['model.' + e.currentTarget.dataset.id + '.iptValue']: e.detail.iptvalue
    });
    // 每次輸入完成時判斷查詢按鈕是否高亮顯示
    this.buttonImportant({});
}

/**
 * 輸入框的 blur 事件，失焦時通過 validata 方法對當(dāng)前輸入框的值進行校驗
 *
 * @param {Event} e 事件對象
 */
bindBlur(e) {
    let iptvalue = e.detail.iptvalue;
    let iptid = e.currentTarget.dataset.id;
    let rulse = this.data.model[iptid].rulse;
    this.validata(rulse, iptvalue, iptid);
}

/**
 * 點擊輸入框右側(cè)清除按鈕事件，短信驗證碼輸入框、圖形驗證碼輸入框沒有該事件
 *
 * @param {Event} e 事件對象
 */
cleanRoad(e) {
    // 清空當(dāng)前表單內(nèi)數(shù)據(jù)
    this.setData({['model.' + e.currentTarget.dataset.id + '.iptValue']: ''});
}

選擇器的 change 事件處理，包含普通選擇器、日期選擇器、地區(qū)選擇器

/**
 * 普通選擇器的 change 事件
 *
 * @param {Object} detail 事件對象信息
 */
pickerOne({detail}) {
    // 將 picker 選中值賦給 model 中對應(yīng)的屬性
    this.setData('model.pickerOne.iptValue', detail.detail.value);
    // 選擇完成時判斷查詢按鈕是否高亮顯示
    this.buttonImportant({});
}

/**
 * 時間選擇器的 change 事件
 *
 * @param {Object} detail 事件對象信息
 */
pickerDate({detail}) {
    // 將 picker 選中值賦給 model 中對應(yīng)的屬性
    this.setData('model.pickerDate.iptValue', detail.detail.value);
    // 選擇完成時判斷查詢按鈕是否高亮顯示
    this.buttonImportant({});
}

/**
 * 地區(qū)選擇器的 change 事件
 *
 * @param {Object} detail 事件對象信息
 */
pickerRegion({detail}) {
    // 將 picker 選中值賦給 model 中對應(yīng)的屬性
    this.setData('model.pickerRegion.iptValue', detail.detail.value);
    // 選擇完成時判斷查詢按鈕是否高亮顯示
    this.buttonImportant({});
}

點擊圖形驗證碼事件

/**
 * 圖形驗證碼的點擊事件，可以增加刷新圖片驗證碼或者其他需要的操作
 */
reloadImg() {
    swan.request({
        // 僅為示例，并非真實的接口地址
        url: 'http://www.baidu.com',
        success: res => {
            this.setData({
                // codeImg 字段根據(jù)業(yè)務(wù)自行調(diào)整
                'model.govCaptcha.codeImg': res.data.codeImg
            })
        },
        fail: err => {
            // 接口異常的處理代碼
        }
    })
}

獲取手機驗證碼事件

/**
 * 手機號驗證碼組件點擊獲取驗證碼的事件
 */
smssend() {
    // 該方法模擬收到短信驗證碼的toast效果，實際場景請使用開發(fā)者自己的短信驗證碼服務(wù)
    swan.showToast({
        title: '驗證碼：123456',
        icon: 'none'
    });
}

頁面下方“溫馨提示”的 “點擊查看” 的事件

/**
 * 頁面下方“溫馨提示”的 “點擊查看” 事件處理
 */
toView() {
    // 此處僅為示例，您可以自定義該事件的邏輯，比如跳轉(zhuǎn)到某個頁面等
    swan.navigateTo({url: '/pages/index/index'});
}

查詢按鈕點擊事件

/**
 * 查詢按鈕點擊事件
 *
 * @param {Event} e 事件對象
 */
buttonImportant(e) {
    // 判斷表單是否全部填寫了
    for (let i in this.data.model) {
        if (!String(this.data.model[i].iptValue).trim()) {
            return;
        }
    }
    // 如果表單的必填項都已填寫則查詢按鈕高亮
    this.setData({buttonDisabled: false});
    // 只有手動點擊查詢按鈕的時候才會執(zhí)行校驗，通過按鈕組件的 data-isValidata 屬性控制是否需要走校驗邏輯
    if (e.currentTarget && e.currentTarget.dataset.isValidata) {
        for (let i in this.data.model) {
            let itemData = this.data.model[i];
            if (itemData.iptErrorInfo) {
                if (this.validata(itemData.rulse, itemData.iptValue, i, true)) {
                    return;
                }
            }
        }
        // 此處表單已校驗通過，您可以自定義一些自己的邏輯，比如跳轉(zhuǎn)到查詢結(jié)果頁模板
        swan.navigateTo({
            url: '/@smt-ui-template-gov-query-form/pages/result/result'
        });
    }
}

<view class="{{checkFullScreen ? 'container container-bottom' : 'container'}}">
    <smt-page-status
        s-if="{{statePageType}}"
        class="page-status"
        icon="{{statePageConfig[statePageType].icon}}"
        title="{{statePageConfig[statePageType].title}}"
        desc="{{statePageConfig[statePageType].desc}}"
        showBtn="{{statePageConfig[statePageType].showBtn}}"
        smtreloading="{{reLoad}}"
        loading="{{statePageType === 'loading'}}"
    ></smt-page-status>
    <view s-else>
        <gov-page-title title="{{dataList.data.title}}" size="large" hasBorder="{{true}}"></gov-page-title>
        <block s-for="item, index in dataList.data.list">
            <gov-list-item
                label-width="6em"
                label="{{item.name}}"
                gov-label="list-label"
                border
            >
                <view slot="content" class="list-content">
                    <view s-if="{{item.name === '聯(lián)系電話'}}" class="phone">
                        <text
                            s-for="ele in item.value"
                            bindtap="callPhone"
                            data-phoneNum="{{ele}}"
                        >{{ele}} </text>
                    </view>
                    <gov-text-collapse
                        s-else
                        text="{{item.value}}"
                        line="{{item.line}}"
                        gov-text-collapse-content="list-text"
                    ></gov-text-collapse>
                </view>
            </gov-list-item>
        </block>
        <view class="prompt">
            <gov-prompt>
                <view slot="title">溫馨提示：</view>
                <view slot="content">
                    這里是溫馨提示這里是溫馨提示這里是溫馨提示這里是溫馨提示這里是溫馨提示這里是溫馨提示
                    <text class="prompt-text" bindtap="toView">點擊查看</text>
                </view>
            </gov-prompt>
        </view>
    </view>
</view>

{
    "navigationBarTitleText": "查詢結(jié)果",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "dark",
    "usingComponents": {
        "gov-page-title":"@smt-ui/component-gov/src/page-title",
        "gov-list-item": "@smt-ui/component-gov/src/list-item",
        "gov-text-collapse": "@smt-ui/component-gov/src/text-collapse",
        "smt-page-status": "@smt-ui/component/src/page-status",
        "gov-prompt": "@smt-ui/component-gov/src/prompt"
    }
}

Page({
    data: {
        // warning 服務(wù)開小差、noContent 未查詢到信息、noNetwork 無網(wǎng)絡(luò)、不顯示錯誤頁則為空字符串
        statePageType: 'loading'
    },

    onLoad() {
        // 使用定時器模擬請求，模擬 loading 顯示兩秒鐘
        setTimeout(() => {
            this.data.statePageType = '';
        }, 2000)
    },

    /**
     * 點擊電話調(diào)起撥號
     *
     * @param {Event} e 事件對象
     */
    callPhone(e) {
        swan.makePhoneCall({
            phoneNumber: e.currentTarget.dataset.phoneNum
        });
    },

    /**
     * 頁面下方“溫馨提示”的 “點擊查看” 事件處理
     */
    toView() {
        swan.showToast({
            title: '點擊查看',
            icon: 'none'
        });
    }
});

NPM 依賴

名稱	版本號
@smt-ui/component-gov	latest

以上內(nèi)容是否對您有幫助：

← 百度智能小程序搜索頁模板

百度智能小程序辦理類服務(wù)（多流程）模板 →

寫筆記

我要補充

百度智能小程序 查詢類服務(wù)模板