[图片] 做小程序的时候大家都会需要到搜索的功能，今天就把我这边测试成功的案例给大家。 微信官方文档：获取一个集合的数据如果要获取一个集合的数据，比如获取 todos 集合上的所有记录，可以在集合上调用 [代码]get[代码] 方法获取，但通常不建议这么使用，在小程序中我们需要尽量避免一次性获取过量的数据，只应获取必要的数据。为了防止误操作以及保护小程序体验，小程序端在获取集合数据时服务器一次默认并且最多返回 20 条记录，云函数端这个数字则是 100。开发者可以通过 [代码]limit[代码] 方法指定需要获取的记录数量，但小程序端不能超过 20 条，云函数端不能超过 100 条。话不多说，代码开始： search云函数部分（PS:记得上传云函数） // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database(); // 云函数入口函数 exports.main = async (event, context) => {   const wxContext = cloud.getWXContext()   let keyWords = event._keyword   try {     //这里的keyWords是前端小程序访问的参数_keyword     return await db.collection('softshow').limit(50).where(         db.command.or([{             //使用正则查询，实现对‘name’字段的搜索的模糊查询             name: db.RegExp({               regexp: keyWords,               options: 'i', //大小写不区分             }),           }           //下面可以增加更多的选项,可以做多字段的选择         ])       ).get()   } catch (e) {     console.log(e)   }   return {     event,   } } search.wxml部分代码 <view class="page-box">     <view class="page-content">         <view class="search-wrap radius-border">             <view class="search-type">                 <icon class="searchcion" size='20' type='search'></icon>             </view>             <input class="search-input" bindinput="bindSearchKey" placeholder="请输入关键字" value="{{searchValue}}" />             <view class="search-button">                 <view class='sousuo' catchtap="see" style="font-size:32rpx">搜索</view>             </view>         </view>     </view> <!-- 搜索列表 -->     <block wx:if='{{obj}}' wx:for='{{obj}}' wx:key=''>         <view class="list-box">             <view class="img-wrap">                 <image class="img-h5" src="{{item.logo}}"></image>             </view>             <view class="info">                 <view class="title">{{item.name}}</view>             </view>         </view>     </block> </view> search.wxss部分代码 .page-content{   padding-top: 15rpx;   margin-bottom: 20px; } .search-wrap{   overflow: hidden;   border-radius: 8rpx;   height: 40px;   display: flex;   align-items: center;   border-radius: 5px;   background-color: #fbfbfb;   font-size: 0;   line-height: 1;   position: relative; } .search-input{   margin: 0 8px;   flex: 1;   height: 100%;   font-size: 16px; } .search-button{   background-color: #00ae65;   width: 70px;   height: 100%;   display: flex;   align-items: center;   justify-content: center;   color: #fff;   border-radius:0 5px 5px 0; } .search-type{   width: 40px;   height: 100%;   display: flex;   align-items: center;   justify-content: center;   color: #333;   font-size: 14px;   position: relative;   background-color: #e4e4e4; } /* 列表样式 */ .list-box{   position: relative;     padding: 12px 16px;     padding-left: 70px;     height: 40px;     background-color: #fff;     margin-bottom: 10px; } .img-wrap{   position: absolute;     left: 16px;     top: 12px;     width: 40px;     height: 40px;     border-radius: 3px;     overflow: hidden;     background-color: #eee; } .img-h5{   position: absolute;     width: 100%;     height: 100%;     background-position: 50%;     background-size: cover;     background-repeat: no-repeat;     background-color: #eee;     border-radius: inherit; } .info{   height: 98%;     flex-direction: column;     justify-content: space-between; } .title{   font-size: 16px;     color: #333;     line-height: 40px;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap; } .zaiyao{   font-size: 13px;     color: #999;     display: -webkit-box;     -webkit-box-orient: vertical;     -webkit-line-clamp: 2;     overflow: hidden; } search.js部分代码 // pages/search/search.js var text=''   Page({     /**    * 页面的初始数据    */   data: {     },   see(){       wx.cloud.callFunction({       name: 'search',       data: {        //this.data.searchKey由页面输入框的内容           _keyword: this.data.searchKey,       },       complete: res => {         console.log(res)           let resources = res.result.data           this.setData({             obj: resources           })       },       fail: res => {       },   })   },     bindSearchKey: function(e) {     this.setData({         searchKey: e.detail.value     }) },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {   }, })

"style": "v2"表示启用新版的组件样式，使用v2版本的组件样式默认情况和v1不同，其实V2的颜色更好看，更简洁。 很多小伙伴在初学小程序时可能会遇到button按钮样式宽度、背景色设置无效，其实很简单。把app.json里的"style": "v2"删除就好了， 如果不删"style": "v2"，有没有其他办法可以设置button按钮的宽度和背景色呢？ [图片]     <button class="weui-btn" type="primary"  bindtap='submit'disabled='{{btn_disabled}}'>确定提交</button> 答案是有的。解决方法如下： 因为微信有默认按钮样式，所以要根据优先级进行修改，直接利用嵌入式样式修改 [图片]     <button class="weui-btn" type="primary" style="width: 100%; font-size: 16px !important;"  bindtap='submit'disabled='{{btn_disabled}}'>确定提交</button>