「小程序JAVA實戰」小程序開源搜索組件（53）

上次說了能夠在視頻中經過cover-view的方式放置一些圖片，圖片已經放置完畢，如今開始實現裏面的功能，先從放大鏡搜索功能開始。用戶點擊放大鏡進入搜索頁面。https://github.com/limingios/wxProgram.git 中No.15

介紹開源框架

這是一款搜索插件，該搜索框組件基於開源項目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=返回'  
    })
  }

})
複製代碼

安裝插件

• 下載插件
  

• 拷貝到目錄中
  

• 點擊搜索按鈕跳轉新的搜索頁面
  

• 新的js方面的控制
  

• 新的css方面的控制
  

• 新的html方面的控制
  

PS：本次主要對插件進行了一次集成，其實不太負責，也是第一次在小程序裏面使用插件，以前聽同事說過，有了插件搬磚的工做發現能夠輕鬆不少。