日常在電商小程序中，常見的功能是搜索。搜索一般是指輸入關鍵詞，在多個字段中進行模糊匹配，如匹配標題、正文等。如果我們自己想實現一下搜索功能，該如何做呢?

1 數據源的設計

搜索一般是從數據源中檢索數據，為此我們需要設計一個商品的數據源，字段如下：

2 數據錄入

數據源設計好之后，我們需要錄入一些測試數據，方便我們開發功能。登錄控制臺，點擊管理數據，打開后臺，錄入對應的數據

3 后端開發

要想實現搜索功能，我們先需要開發后端功能。低代碼中后端功能的開發是在自定義連接器中完成。點擊自定義連接器，點擊新建自定義連接器

輸入名稱和標識

點擊添加方法，輸入方法的名稱和標識，意圖選擇查詢列表，類型選擇自定義代碼

代碼框架的話我們沿用我們在以前分享的分頁方法，需要將數據源替換成商品數據源

module.exports = async function (params, context) {const result = await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').skip(params.pageSize*(params.pageNo-1)).limit(params.pageSize).get();const total = await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').count();// 在這里返回這個方法的結果，需要與出參定義的結構映射return {pageNo:params.pageNo,pageSize:params.pageSize,total:total.total,records: result.data}; };

有了代碼模板之后我們需要考慮我們的需求是什么，要如何實現。需求是按照關鍵字去標題和簡介里模糊匹配。實現的話我們先考慮一下如果用關系型數據庫如何實現。

select * from product p where p.title like '%生煎包%' or p.desc like '%生煎包%'

多條件在關系型數據庫用or表達，如果是模糊匹配是用like關鍵詞，%號表示去字段里模糊匹配數據

低代碼是使用的文檔型數據庫，文檔型數據庫的特點是所有的語法都要用對象的形式進行組裝，查詢條件是用where，我們可以看看官方文檔where如何使用

我們也可以一次性獲取多條記錄。通過調用集合上的 where 方法可以指定查詢條件，再調用 get 方法即可只返回滿足指定查詢條件的記錄
where 方法接收一個對象參數，該對象中每個字段和它的值構成一個需滿足的匹配條件，各個字段間的關系是 “與” 的關系，即需同時滿足這些匹配條件

顯然不滿足我們的需求，因為他是要求同時滿足才可以，那where支不支持或的關系呢？答案是肯定的，如果需要支持或的關系，需要用到查詢指令

假設我們需要查詢進度大于 30% 的待辦事項，那么傳入對象表示全等匹配的方式就無法滿足了，這時就需要用到查詢指令。數據庫 API 提供了大于、小于等多種查詢指令，這些指令都暴露在 db.command 對象上

或調用需要用到邏輯指令，這里用到了or，官方給出的例子是這樣的

const cloudbase = require("@cloudbase/js-sdk");const app = cloudbase.init({env: "xxxx" }); // 1. 獲取數據庫引用 var db = app.database();const _ = db.command; db.collection("todos").where(_.or([{progress: _.lte(50)},{style: {color: _.in(["white", "yellow"])}}])).get().then((res) => {console.log(res.data);});

要使用指令，需要先進行定義，這句話表示獲取指令的意思

const _ = db.command;

調用指令的時候是用_.的語法，日常編程中經常會少寫一個點導致代碼報錯。如果需要多個條件，需要傳入一個數組。數組的每個元素是對象，左邊是字段標識，右邊是傳入的值。值的話我們可以從自定義的連接器的入參獲取，獲取的時候用params對象然后使用點的語法調用入參即可

多字段的問題解決后，需要考慮的是模糊匹配該如何實現。文檔型數據庫模糊匹配是使用的正則表達式，文檔中給出的正則使用示例是：

db.collection('todos').where({description: /miniprogram/i })// 數據庫正則對象 db.collection('todos').where({description: db.RegExp({regexp: 'miniprogram',options: 'i',}) })// 用 new 構造也是可以的 db.collection('todos').where({description: new db.RegExp({regexp: 'miniprogram',options: 'i',}) })

多條件和模糊匹配都梳理清楚后，我們最終的代碼是

module.exports = async function (params, context) {const db = context.databaseconst _ = db.commandconst result = await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').skip(params.pageSize*(params.pageNo-1)).limit(params.pageSize).where(_.or([{name:db.RegExp({regexp: params.keyword,options: 'i',})},{desc:db.RegExp({regexp: params.keyword,options: 'i'})}])).get();const total = await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').where(_.or([{name:db.RegExp({regexp: params.keyword,options: 'i',})},{desc:db.RegExp({regexp: params.keyword,options: 'i'})}])).count();// 在這里返回這個方法的結果，需要與出參定義的結構映射return {pageNo:params.pageNo,pageSize:params.pageSize,total:total.total,records: result.data}; };

如果想測試的話，先需要填寫入參，入參可以參考我的

出參的話，在方法測試成功直接點擊出參映射按鈕就可以

4 前端開發

低碼有個好處是，如果后端寫好之后，我們前端只需要進行配置，無需編寫前端代碼，這樣也方便了不少。搜索功能的話我們用兩個組件就可以實現，在頁面中添加單行輸入組件和數據列表組件

組件放入之后，要考慮在單行輸入組件輸入的內容如何傳入后臺，為此我們需要在變量里定義一個變量接收輸入

給單行輸入組件設置一個事件，當單行輸入組件中值改變是就賦值給定義好的變量

選擇數據列表組件，我們選擇自定義連接器里的模糊匹配方法，并設置好參數。這里的keyword我們從變量綁定即可

預覽的時候發現一個問題，輸入關鍵詞無法查出數據來，提示regexp must be a string

看來是關鍵詞不允許為空，根據需求，我們關鍵詞啥都不輸入時需要查詢全部數據。那我們改一下自定義連接器，增加一個查詢條件是否為空的判斷，如果為空我們就查全部，不為空我們就做模糊匹配

module.exports = async function (params, context) {const db = context.databaseconst _ = db.commandlet result = {data:[]}let total = 0if(params.keyword ==""){result =await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').skip(params.pageSize*(params.pageNo-1)).limit(params.pageSize).get();total = await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').count();}else{result =await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').skip(params.pageSize*(params.pageNo-1)).limit(params.pageSize).where(_.or([{name:db.RegExp({regexp: params.keyword,options: 'i',})},{desc:db.RegExp({regexp: params.keyword,options: 'i'})}])).get();total = await context.database.collection('lcap-data-26caupXt1-product_vfxwrnn-preview').where(_.or([{name:db.RegExp({regexp: params.keyword,options: 'i',})},{desc:db.RegExp({regexp: params.keyword,options: 'i'})}])).count();// 在這里返回這個方法的結果，需要與出參定義的結構映射}return {pageNo:params.pageNo,pageSize:params.pageSize,total:total.total,records: result.data}; };

測試發現，輸入值的時候，不能自動觸發列表視圖的刷新，看來自定義連接器還不能做到那么智能。如果是這樣的話，我們只能通過普通容器來自己實現數據綁定了，如果希望還是使用數據列表組件還需要繼續等待官方能力的更新才行。

總結

我們本篇利用自定義連接器實現了關鍵字的模糊匹配功能，總體上還是需要熟悉云開發和微搭低代碼的相關知識才可以順利開發出功能來。涉及到業務邏輯的部分免不了要寫前端或者后端的代碼，總體上寫代碼還是更靈活一些，如果用無代碼的配置方案就要求官方能力足夠好才可以。

總結

以上是生活随笔為你收集整理的小程序中实现搜索功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。