专栏首页编程坑太多「小程序JAVA实战」小程序开源搜索组件(53)

「小程序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:本次主要对插件进行了一次集成,其实不太负责,也是第一次在小程序里面使用插件,之前听同事说过,有了插件搬砖的工作发现可以轻松很多。

本文分享自微信公众号 - 编程坑太多(idig88)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js数组的拷贝赋值复制-你真的懂?

    IT故事会
  • lambda与函数式

    IT故事会
  • 「小程序JAVA实战」小程序头像图片上传(下)(45)

    IT故事会
  • 什么是SEO,SEO为何如此重要?

    沈唁
  • 20M 文件用 Java 压缩从30秒到1秒的优化过程

    有一个需求需要将前端传过来的10张照片,然后后端进行处理以后压缩成一个压缩包通过网络流传输出去。之前没有接触过用Java压缩文件的,所以就直接上网找了一个例子改...

    黄泽杰
  • 干货 | 高吞吐消息网关的探索与思考

    作者简介 刘惊惊,唯品会业务架构部高级架构师。主要负责用户线,营销线的业务架构,也参与库存系统的重构改造。 一、背景介绍 唯品会是一家立足于“全球精选,正品特卖...

    携程技术
  • Python函数之形参与实参

    各位小伙伴,大家晚上好 今天我们来一起探讨一下函数的另外一个重要概念 “形参”(xing2,can1)与“实参”(shi2,can1) 很多朋友可能第一次听到这...

    企鹅号小编
  • 多云工作负载迁移:自动化是何作用?

    为了高效地管理一个多云计环境,请同时考虑应用架构和用户部署两方面的选项。此外,自动化可有助于多云的高效管理,但它对于工作负载决策方面具有战略意义。 ? 云计算正...

    静一
  • hibernate.cfg.xml 中如何设置 hbm.xml 和 Annotations 的 mapping

    在一个 Hibernate 项目中,我们需要同时设置 hbm.xml 和 Annotations 的 mapping

    HoneyMoose
  • 海尔全球品牌节打响家电生态创新第一枪

    3月已经成为家电企业春季营销的第一场硬仗。在宏观经济下滑、房地产低迷的2016年,家电市场显现出疲态,在这样的背景下,家电企业纷纷使出浑身解数,以“价格...

    曾响铃

扫码关注云+社区

领取腾讯云代金券