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

云开发数据库的模糊搜索,根据记录的字段字符串模糊搜索实现。

代码:

先在app.js初始化:

//app.js
App({
  onLaunch: function () {
    wx.cloud.init({
      env:'school-5k17122'
    })
  },
  globalData: {
    userInfo: null
  }
})

然后搜索的wxml

  <view class='page_row' bindtap="suo">
  	<view class="search">
  		<view class="df search_arr">
  			<icon class="searchcion" size='20' type='search'></icon>
  			<input class="" bindinput="input_p" placeholder="请输入关键字" value="{{searchValue}}" />
  		</view>
  	</view>
  	<view class='sousuo' catchtap="see">搜索</view>
  </view>

  <block wx:if='{{obj}}' wx:for='{{obj}}' wx:key=''>
  	<view class="title">成都信息工程大学</view>
  	<view class="item">名字:{{item.name}}</view>
  	<view class="item">位置:{{item.place}}</view>
  	<view class="item">类型:{{item.type}}</view>
  </block>

然后在搜索页面的Js实现

// pages/search/search.js
var text=''

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  see(){

    var that=this
    // 田径
    const db = wx.cloud.database()
    const school = db.collection('school')
    school.where({
      type: {
        $regex: '.*' + text + '.*',
        $options: '1'
      }
    }).get({
      success: res => {
        console.log('匹配', res)
        if (res.data.length == 0) {
          wx.showModal({
            title: '提示',
            content: '暂时没找到对应答案',
            showCancel: false,
            success: function (res) { }
          })
          return;
        }else{
          that.setData({
            obj: res.data
          })
        }
      }
    })
  },

  input_p(e){
    text = e.detail.value
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('--------------1111')
    // const db = wx.cloud.database()
    // const school = db.collection('school')
    // school.add({
    //   // data 字段表示需新增的 JSON 数据
    //   data: {
    //     name: '食堂厕所',
    //     place: '一二食堂一楼',
    //     type: '厕所'
    //   },
    //   success: function (res) {
    //     // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
    //     console.log('--------------',res)
    //   }
    // })

  },
})

样式:

.search{
  width: 80%;
}
.search_arr {
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  margin-left: 20rpx;
}
.search_arr input{
  margin-left: 60rpx;
  height: 60rpx;
  border-radius: 5px;
}
.bc_text {
  line-height: 68rpx;
  height: 68rpx;
  margin-top: 34rpx;
}

.sousuo {
  margin-left: 15rpx;
  width: 15%;
  line-height: 150%;
  text-align: center;
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  
}
.page_row{
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #d0d0d0;
}
.item{
  margin: 40rpx;
  line-height: 100rpx;
  height: 100rpx;
  
}
.searchcion {
  margin: 10rpx 10rpx 10rpx 10rpx;
  position: absolute;
  left:25rpx;
  z-index: 2;
  width: 20px;
  height: 20px;
  text-align: center;
}
.title{
  margin-top: 100rpx;
  margin-left: 30rpx;
}

完成

<p> <strong><span style="font-size:16px;">【课程简介】</span></strong> </p> <p> <span style="font-size:16px;">课程目标:</span><span style="font-size:16px;">提高vue实战技术和学习uniapp开发</span><span style="font-size:16px;"></span><br /> <span style="font-size:16px;">课程特色:</span><span style="font-size:16px;">该门课程属于中高级进阶课程,课程开发一个仿阿里飞猪旅游app的微信小程序,该课程使用uni-app框架结合小程序云开发,开发语言使用vue,使用uniapp可以做更强大的小程序,该课程专为想要学习开发小程序或者提高vue技术的同学,课程旨在提高你的前端技术和拿到心仪的offer,学会该门课程相信你能做更强大的产品上线,学习该门课程需要具备vue基础知识,如果没有学习过vue基础知识的同学,可到我主页学习基础教程:</span><span style="font-size:16px;color:#337FE5;">【</span><span style="font-size:16px;color:#337FE5;">VUE开发旅游攻略移动端,零基础到实战,短信验证码,登录,注册</span><span style="font-size:16px;color:#337FE5;"></span><span style="font-size:16px;color:#337FE5;">】</span> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;">【课程收益】</span></strong> </p> <p> <span style="font-size:16px;">1.学员学完课程可当做面试作品,毕业设计</span> </p> <p> <span style="font-size:16px;">2.该课程专为想要学习开发小程序或者提高vue技术的同学,课程旨在提高你的前端技术和拿到心仪的offer,学会该门课程相信你能做更强大的产品上线</span> </p> <p> <span style="font-size:16px;">3.学习小程序云开发</span> </p>
相关推荐
<p> 本课程适合有JAVA和数据库基础的人员。 </p> <p> 本课程使用Eclipse和<span style="font-size:13.3333px;">IntelliJ IDEA两种开发工具,详细的讲解了MyBatis的各种语法,并且讲解了MyBatis逆向工程和MyBatis两种常用的插件:MyBatis Plus和通用Mapper。</span> </p> <p> <span style="font-size:13.3333px;">本课程从理论和实际案例两方面充分讲解了MyBatis的各种技术细节,和应用场景,并且以绘图的方式讲解了各种MyBatis中较难的技术点。</span> </p> <p> <span style="font-size:13.3333px;">相信可以通过本课程的学习,读者能够掌握MyBatis学习过程中的各种技巧和实际案例。</span> </p> <p> <span style="font-size:13.3333px;">本课程中设计的大致技术点,如下所示。</span> </p> <p>       1.Eclipse、IntelliJ IDEA环境下开发MyBatis </p> <span></span>      2.MyBatis多种方式的CRUD<br />       3.MyBatis配置文件详解<br />       4.MyBatis映射文件详解<br />       5.使用MyBatis调用存储过程<br />       6.动态SQL<br />       7.关联查询<br />       8.延迟加载<br />       9.整合一级、二级缓存<br />       10.逆向工程<br />       11.事务操作<br />       12.MyBatis处理多个参数的问题<br />       13.鉴别器和别名<br />       14.各种方式的模糊查询<br />       15.MyBatis核心源码分析<br />       16.MyBatis拦截器<br />       17.MyBatis批量更新操作<br />       18.PageHelper<br />       19.MyBatis Plus详解<br />       20.通用Mapper详解<br /><p>    希望大家可以通过本课程的学习,深入的掌握MyBatis及其各种插件的用法,从而提高对数据的操作效率 </p> <p> <br /></p>
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值