「小程式JAVA實戰」小程式開源搜尋元件（52）

Java · 發表 2018-09-22 15:49:20

摘要：上次說了可以在視訊中通過cover-view的方式放置一些圖片，圖片已經放置完畢，現在開始實現裡面的功能，先從放大鏡搜尋功能開始。使用者點選放大鏡進入搜尋頁面。https://github.com/limingios/wxProgram.git 中No.15 介紹開源框架 ...

上次說了可以在視訊中通過cover-view的方式放置一些圖片，圖片已經放置完畢，現在開始實現裡面的功能，先從放大鏡搜尋功能開始。使用者點選放大鏡進入搜尋頁面。https://github.com/limingios/wxProgram.git 中No.15

介紹開源框架

這是一款搜尋外掛，該搜尋框元件基於開源專案 ofollow,noindex" target="_blank">wxSearch 進行了改進，主要有以下幾個修改點：

增加了註釋，修改了一些bug，專案可以跑起來。
為了解決搜尋框和輸入法介面重疊的問題，將搜尋元件作為一個獨立的頁面。
修改了介面樣式，更加美觀。
減少了暴露介面，複雜性更低。

拷貝專案根目錄的wxSearchView資料夾到你專案的根目錄下（也可以其它位置）。

在你的wxss檔案裡匯入元件的樣式（檔案位置為相對位置）：

@import "../../wxSearchView/wxSearchView.wxss";

在你的wxml檔案裡匯入元件（檔案位置為相對位置）：

<include src="../../wxSearchView/wxSearchView.wxml" />

在你的js檔案裡面新增以下程式碼,主要包括以下5個部分：

* 匯入js檔案

* 搜尋欄初始化

* 轉發函式

* 搜尋回撥函式

* 返回回撥函式

// 1 匯入js檔案
var WxSearch = require('../../wxSearchView/wxSearchView.js');

Page({

data: {},


onLoad: function () {

// 2 搜尋欄初始化
var that = this;
WxSearch.init(
that,// 本頁面一個引用
['杭州', '嘉興', "海寧", "桐鄉", '寧波', '金華'], // 熱點搜尋推薦，[]表示不使用
['湖北', '湖南', '北京', "南京"],// 搜尋匹配，[]表示不使用
that.mySearchFunction, // 提供一個搜尋回撥函式
that.myGobackFunction //提供一個返回回撥函式
);

},

// 3 轉發函式，固定部分，直接拷貝即可
wxSearchInput: WxSearch.wxSearchInput,// 輸入變化時的操作
wxSearchKeyTap: WxSearch.wxSearchKeyTap,// 點選提示或者關鍵字、歷史記錄時的操作
wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 刪除所有的歷史記錄
wxSearchConfirm: WxSearch.wxSearchConfirm,// 搜尋函式
wxSearchClear: WxSearch.wxSearchClear,// 清空函式

// 4 搜尋回撥函式
mySearchFunction: function (value) {
// do your job here
// 示例：跳轉
wx.redirectTo({
url: '../index/index?searchValue='+value
})
},

// 5 返回回撥函式
myGobackFunction: function () {
// do your job here
// 示例：返回
wx.redirectTo({
url: '../index/index?searchValue=返回'
})
}

})