「小程序 — 云开发」搜索跳转

昔不亏 等级 344 0 0

样式如图: 「小程序 — 云开发」搜索跳转 在home.wxml中

<!-- 
confirm-type:键盘的右下角按钮显示'搜素'
bindconfirm:按下键盘'搜索'按钮
bindinput:在输入框输入过程中触发事件
bindtap:点击搜索图标
-->

<view class="search">
  <input type="text" placeholder="搜索菜品" confirm-type="search" bindconfirm="goSearch" bindinput="getSearch" />
  <text bindtap="goSearch" class="icon fa fa-search" />
</view>

情况一: ::: tip 搜索后跳转到的页面未在tabBar中定义,可使用 wx.navigateTo 跳转时将 searchKey 带到新页面。 ::: 在home.js中

let searchKey = '';
Page({
  // 搜索框数据
  getSearch(e) {
    searchKey = e.detail.value
  },
  // 搜索事件
  goSearch() {
    if (searchKey && searchKey.length > 0) {
      wx.navigateTo({
        url: '/pages/search/search?searchKey=' + searchKey,
      })
    } else {
      wx.showToast({
        icon: 'none',
        title: '搜索词为空',
      })
    }
  }
})

在search.js中

const db = wx.cloud.database()
Page({
  onLoad: function (options) {
    let searchKey = options.searchKey;
    db.collection('food').where({
        name: db.RegExp({
          regexp: searchKey,
          options: 'i'
        })
      }).get()
      .then(res => {
        console.log(res)
      }).catch(res => {
        console.log(res)
      })
  },
})

情况二: ::: tip 搜索后跳转到的页面已在tabBar中定义,使用 wx.navigateTo 会报错 errMsg: “navigateTo:fail can not navigateTo a tabbar page”。

此时可以换成 wx.switchTab 进行跳转,但不能携带参数,所以需要借助全局变量。 ::: 在app.js中

App({
  globalData: {
    searchKey: ''
  },
})

在home.js中

let searchKey = '';
const app = getApp()
Page({
  // 搜索框数据
  getSearch(e) {
    searchKey = e.detail.value
  },
  //点击搜索
  goSearch() {
    if (searchKey && searchKey.length > 0) {
      app.globalData.searchKey = searchKey
      wx.switchTab({
        url: '/pages/food/food',
      })
    } else {
      wx.showToast({
        icon: 'none',
        title: '搜索词为空',
      })
    }
  }
})

在food.js中

const db = wx.cloud.database()
const app = getApp()
Page({
  onLoad: function (options) {
    db.collection('food').where({
        name: db.RegExp({
          regexp: app.globalData.searchKey,
          options: 'i'
        })
      }).get()
      .then(res => {
        console.log(res)
      }).catch(res => {
        console.log(res)
      })
  },
})
收藏
评论区

相关推荐

被“词云”包围的冰冰会更好看吗?安排
(https://imghelloworld.osscnbeijing.aliyuncs.com/b299933deefc692934e8cc6141ab3894.png) 大家好,我是小五🐶 昨天「凹凸数据」发了一篇张同学投稿的文章《用Python爬取王冰冰vlog弹幕并制作词云(https://mp.weixin.qq.com/
IoT基础架构的演进 — 边云自定义消息传输
边缘计算不仅仅是将应用部署在边缘,并对其进行自动化的监控和运维。在许多应用场景里,边缘和云上应用需要进行特定的消息传输、数据交换等,以完成边云协同的业务处理。例如,用户需要从云端发送命令至边缘的应用来触发特定的业务,或者边缘设备需要将采集的业务信息上传至云端处理。KubeEdge v1.6 版本增加了自定义边云消息传输的支持,用户可以根据场景,借助 Rule
typora配置图床[阿里云]
typora 配置图床 阿里云 | Failed to fetch 解决 typora 配置图床 阿里云txt1) 下载最新版typora;2) 偏好设置 图像 下载PicGo客户端 如图一3) 打开下好的picGo 图床设置 阿里云 如图二4) 打开阿里云控制台 阿里云购买os
深度 | 阿里云蒋江伟:什么是真正的云原生?
作者 | 阿里云原生 来源|而今,云原生成了耳熟能详的热门词,似乎不提云原生就落伍了,加入 CNCF 也成了云厂商引以为傲的技术优势。我们也看到各种云原生的定义,有来自 CNCF 的“微服务容器持续交付DevOps”,也有来自不同云厂商的说法。2020 年 9 月,阿里云成立了云原生技术委员会,今天我就从云计算的初心尝试谈谈什么是真正的云原生。狭义的
灵雀云陈恺:2020 云原生走向何处?|CNBPS2020演讲实录
大家好,我是灵雀云的陈恺。今天我们用这种比较特殊的方式来交流,很多人可能已经习惯这种新的工作和生活方式。疫情在带来很大挑战的同时,也在倒逼着我们去进步,就像几个月前微软CEO 萨提亚·纳德拉说的,很多企业把原本需要花两年时间来做的数字化转型,在短短两个月内一口气全都搞定了。参加过前面几届CNBPS大会的朋友可能知道,我每年都会试图用一句话来概括下云原生在这一
Artifactory Terrafrom plugin来了!
前言随着多云环境和DevOps普及,越来多的DevOps工程师要面临云上与云下资源的自动化管理问题。 作为全球领先的Artifact Managenment软件供应商,JFrog的Artifactory也被众多知名企业采用,成为当前最流行的devops工具之一。那么通过什么方法能够在我们的云环境中快速部署一套Artifac
「小程序 — 云开发」搜索跳转
样式如图:在home.wxml中 js< confirmtype:键盘的右下角按钮显示'搜素'bindconfirm:按下键盘'搜索'按钮bindinput:在输入框输入过程中触发事件bindtap:点击搜索图标<view class"search" <input type"text" placeholder"搜索菜品" con
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。 QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦 【区别】:微信小程序的代码与QQ小程序的源码是不一样的。 微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
云游戏时代来了,让好玩触手可及。
本文纯属分享新技术随着科技的迅猛发展,"云端"这个概念逐渐成为各大厂商的研究对象。云储存、云盘、云计算乃至最近大火的云游戏,脱离了固定的硬件和软件计算环节。 云游戏也叫有需求的游戏,是基于云计算的新技术。在云游戏模型中,所有的游戏逻辑和渲染都在服务器端运行,然后再从服务器把压缩的视频传给用户,这样玩家就不需要一台CPU和GPU相当好的计算机了,唯一的要求就
聊一聊我最近使用的uniCloud是个什么玩意
什么是Serverless在介绍什么是Serverless的时候,希望通过回答一些问题帮助大家了解什么是Serverless。一个最好的问题就是——Serverless是不是就是FaaS? "功能即服务"(或称为 FaaS)是一种在无状态容器中运行的事件驱动型计算执行模型,这些功能将利用服务来管理服务器端逻辑和状态下面是维基百科对“Serverless”的中
zookeeper到nacos的迁移实践
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star。 技术选型公司的RPC框架是dubbo,配合使用的服务发现组件一直是zookeeper,长久以来也没什么大问题。至于为什么要考虑换掉zookeeper,并不是因为它的性能瓶颈,而是考虑往云原生方向演进。云原生计算基金会(CNCF)对云原生的定义是: 云原生
SCF构建小型服务端并结合uni-app
使用腾讯云SCF构建小型服务端并结合uniapp()小程序我们这里手写了一个nodejs环境下的用户体系使用了之前写的一个数据库连接插件dmhqmysqlpool比较垃圾 凑合用文档地址为 也使用了md5 npm install jsmd5这里使用邮箱发送验证码先在本地写好 再上传云函数 配置数据库连接安装 npm install dmhsqmysqlpo
腾云先锋招新啦!!
腾云先锋招新啦!!如果您想结交一群热爱云产品 / 技术,喜欢技术交流的小伙伴;如果您对目前正在使用的腾讯云产品、云服务有更好的建议,但无法直接反馈给产品团队;如果您出现遇到云问题无法及时解决的情况;::: warning 请加入腾云先锋,您的云技术问题和需求将可直接对接到产品团,同时您也可以在这里拓展朋友圈。还可以通过各种方式积累积分,凭积分兑换无门槛代金
腾云先锋招新啦!!
腾云先锋招新啦!!如果您想结交一群热爱云产品 / 技术,喜欢技术交流的小伙伴;如果您对目前正在使用的腾讯云产品、云服务有更好的建议,但无法直接反馈给产品团队;如果您出现遇到云问题无法及时解决的情况;请加入腾云先锋,您的云技术问题和需求将可直接对接到产品团,同时您也可以在这里拓展朋友圈。还可以通过各种方式积累积分,凭积分兑换无门槛代金券(301000 元不等)
腾讯云用户沟通群招新啦!!!
如果您想结交一群热爱云产品 / 技术,喜欢技术交流的小伙伴;如果您对目前正在使用的腾讯云产品、云服务有更好的建议,但无法直接反馈给产品团队;如果您出现遇到腾讯云产品问题无法及时解决的情况;请加入腾云先锋用户沟通群,您的云技术问题和需求将可直接对接到产品团,同时您也可以在这里拓展朋友圈。还可以通过各种方式积累积分,凭积分兑换无门槛代金券(301000 元不等)