iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序云开发实现搜索功能
  • 422
分享到

微信小程序云开发实现搜索功能

2024-04-02 19:04:59 422人浏览 薄情痞子
摘要

微信小程序云开发实现搜索功能,供大家参考,具体内容如下 微信小程序使用云开发实现搜索功能有两种情况,一种是简单的搜索用关键字来查询数据,另一种是模糊查询关于关键字的全部数据查询。废话

微信小程序开发实现搜索功能,供大家参考,具体内容如下

微信小程序使用云开发实现搜索功能有两种情况,一种是简单的搜索用关键字来查询数据,另一种是模糊查询关于关键字的全部数据查询。废话不用多说直接上代码部分。

简单搜索功能实现

WXML代码段

<view class="sousuokuang">
    <view class="sousuo">
        <view class="shurukuang">
            <input type="text" placeholder="搜索" value="" bindinput="GetSearchInput"></input>
        </view>
        <view class="sousuo_anniu" bindtap="ToSearch">
            <text>搜索</text>
            <icon type="search" size="20"></icon>
        </view>
    </view>
</view>

WXSS代码段

.sousuokuang {
    width: 100%;
    height: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
}
.sousuo {
    width: 92%;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
}
.shurukuang {
    width: 80%;
    height: 64rpx;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;
}
.shurukuang input {
    width: 90%;
    height: 100%;
    font-size: 32rpx;
}
.sousuo_anniu {
    width: 20%;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sousuo_anniu text {
    font-size: 30rpx;
}

javascript代码段

const db = wx.cloud.database()
Page({
    data: {
        search: ''
    },
    onLoad: function (options) {

    },
    GetSearchInput: function(e) {
        this.setData({
            search: e.detail.value
        })
    },
    ToSearch: function(e) {
        if(this.data.search == '') {
            wx.showToast({
              title: '请输入',
              icon: 'none'
            })
            return
        }
        db.collection('输入你查询的表名').where({
            name: this.data.search
        }).get().then(res => {
            if(res.data.length != 0) {
                this.setData({
                    shangpinbiao: res.data
                })
            }else {
                wx.showToast({
                  title: '未找到商品',
                  icon: 'none'
                })
            }
        })
    },
})

模糊搜索功能实现

WXML代码段和WXSS代码段跟简单搜索的一样,JavaScript代码段如下

Javascript代码段

const db = wx.cloud.database()
Page({
    data: {
        search: ''
    },
    onLoad: function (options) {

    },
    GetSearchInput: function (e) {
        this.setData({
            search: e.detail.value
        })
    },
    ToSearch: function (e) {
        if (this.data.search == '') {
            wx.showToast({
                title: '请输入',
                icon: 'none'
            })
            return
        }
        db.collection('输入你查询的表名').where({
            name: db.RegExp({
                regexp: this.data.search,
                options: 'i',
            }),
        }).get().then(res => {
            if (res.data.length != 0) {
                this.setData({
                    shangpinbiao: res.data
                })
            } else {
                wx.showToast({
                    title: '未找到',
                    icon: 'none'
                })
            }
        })
    },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序云开发实现搜索功能

本文链接: https://www.lsjlt.com/news/149389.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序云开发实现搜索功能
    微信小程序云开发实现搜索功能,供大家参考,具体内容如下 微信小程序使用云开发实现搜索功能有两种情况,一种是简单的搜索用关键字来查询数据,另一种是模糊查询关于关键字的全部数据查询。废话...
    99+
    2024-04-02
  • 微信小程序云开发怎么实现搜索功能
    本篇内容介绍了“微信小程序云开发怎么实现搜索功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!简单搜索功能实现WXML代码段<view...
    99+
    2023-06-30
  • 微信小程序实现搜索框功能
    本文实例为大家分享了微信小程序实现搜索框功能的具体代码,供大家参考,具体内容如下 效果: wxml文件: <view class="search_input" > ...
    99+
    2024-04-02
  • 微信小程序如何实现搜索功能
    这篇文章给大家分享的是有关微信小程序如何实现搜索功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件...
    99+
    2024-04-02
  • 微信小程序实现简单搜索功能
    本文实例为大家分享了微信小程序实现简单搜索功能的具体代码,供大家参考,具体内容如下 搜索效果图 实现功能如下 (1) 未找到商品时显示提示信息,找到商品时显示商品列表 (2) 清空...
    99+
    2024-04-02
  • 微信小程序中的搜索功能怎么实现
    微信小程序中的搜索功能可以通过以下步骤实现: 在小程序的页面中添加一个搜索框组件(如或),用户可以在这个搜索框中输入关键字。 ...
    99+
    2024-04-09
    微信小程序
  • 微信小程序实现搜索功能并跳转搜索结果页面
    搜索页面: search.wxml页面: <view class="form"> <input class="searchInput" va...
    99+
    2024-04-02
  • 微信小程序开发中如何实现搜索按钮
    这篇文章给大家分享的是有关微信小程序开发中如何实现搜索按钮的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。搜索input中,如何点击搜索按钮进行搜索及按钮样式修改正常我们会在搜索框...
    99+
    2024-04-02
  • 【微信开发】微信小程序实现实时聊天功能
    最近在做一个项目,需要运用到实时聊天功能,分享一下。      分为: 界面如何布局以及细节; 如何实现实时更新; 全部代码展示;         一、界面如何布局以及细节:         1.说到底,聊天界面就是循环一个数组,每一行...
    99+
    2023-09-02
    微信小程序 小程序
  • 使用微信小程序实现搜索框自动补全功能
    使用微信小程序实现搜索框自动补全功能 随着移动互联网的发展,微信小程序成为了人们生活中不可或缺的一部分。在小程序中,搜索功能是非常常见的需求之一。为了提升用户体验,搜索框的自动补全功能是一个很好的加分项。本文将介绍如何使用微信小程序实现搜索...
    99+
    2023-11-21
    搜索框 微信小程序 自动补全功能
  • 微信小程序如何实现城市选择及搜索功能
    这篇文章给大家分享的是有关微信小程序如何实现城市选择及搜索功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现搜索城市功能js文件// pages/address/a...
    99+
    2024-04-02
  • 微信小程序实现简单搜索框
    本文实例为大家分享了微信小程序实现简单搜索框的具体代码,供大家参考,具体内容如下 app.json {   "pages":[     "pages/index/index"   ]...
    99+
    2024-04-02
  • 微信小程序实现顶部搜索框
    本文实例为大家分享了微信小程序实现顶部搜索框的具体代码,供大家参考,具体内容如下 这是一个最简单的顶部搜索框,代码如下 wxml <view>      <vie...
    99+
    2024-04-02
  • 微信小程序开发如何实现地图功能
    这篇文章主要讲解了“微信小程序开发如何实现地图功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序开发如何实现地图功能”吧!基本使用地图组件使用起来也很简单。.wxml<map...
    99+
    2023-06-26
  • 微信小程序实现搜索商品和历史记录的功能
    本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能。 不详细介绍,主看代码注释即可!! 1、搜索组件页面代码块 <template>   <vi...
    99+
    2024-04-02
  • 小程序模实现糊搜索功能
    本文实例为大家分享了小程序模实现糊搜索功能的具体代码,供大家参考,具体内容如下 1.写好页面布局 <!--搜索--> <view class="searchbox"...
    99+
    2024-04-02
  • 微信小程序转发功能如何实现
    这篇文章主要介绍“微信小程序转发功能如何实现”,在日常操作中,相信很多人在微信小程序转发功能如何实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序转发功能如何实现”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-26
  • 微信小程序如何开发微信支付功能
    本篇内容主要讲解“微信小程序如何开发微信支付功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序如何开发微信支付功能”吧!用户请求开发者后台,发起下单请求发起请求前在小程序端调用&nbs...
    99+
    2023-06-26
  • 微信小程序如何实现转发功能
    这篇文章将为大家详细讲解有关微信小程序如何实现转发功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序 转发功能的实现1.当用户将小程序转发到任一群聊之后,可以获...
    99+
    2024-04-02
  • 微信小程序云开发实现微信支付功能业务逻辑可靠
    目录注册微信支付商户号小程序关联商户号业务逻辑代码实现今天打了几把永劫无间后,咱们来聊一聊用云开发来开发微信小程序时,如何实现微信支付,并且保证业务逻辑可靠。 注册微信支付商户号 ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作