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

1 數(shù)據(jù)源的設(shè)計

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

2 數(shù)據(jù)錄入

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

3 后端開發(fā)

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

輸入名稱和標識

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

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

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();// 在這里返回這個方法的結(jié)果，需要與出參定義的結(jié)構(gòu)映射return {pageNo:params.pageNo,pageSize:params.pageSize,total:total.total,records: result.data}; };

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

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

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

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

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

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

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

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

const cloudbase = require("@cloudbase/js-sdk");const app = cloudbase.init({env: "xxxx" }); // 1. 獲取數(shù)據(jù)庫引用 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;

調(diào)用指令的時候是用_.的語法，日常編程中經(jīng)常會少寫一個點導致代碼報錯。如果需要多個條件，需要傳入一個數(shù)組。數(shù)組的每個元素是對象，左邊是字段標識，右邊是傳入的值。值的話我們可以從自定義的連接器的入?yún)@取，獲取的時候用params對象然后使用點的語法調(diào)用入?yún)⒓纯?/p>

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

db.collection('todos').where({description: /miniprogram/i })// 數(shù)據(jù)庫正則對象 db.collection('todos').where({description: db.RegExp({regexp: 'miniprogram',options: 'i',}) })// 用 new 構(gòu)造也是可以的 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();// 在這里返回這個方法的結(jié)果，需要與出參定義的結(jié)構(gòu)映射return {pageNo:params.pageNo,pageSize:params.pageSize,total:total.total,records: result.data}; };

如果想測試的話，先需要填寫入?yún)?#xff0c;入?yún)⒖梢詤⒖嘉业?br />
出參的話，在方法測試成功直接點擊出參映射按鈕就可以

4 前端開發(fā)

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

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

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

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

預覽的時候發(fā)現(xiàn)一個問題，輸入關(guān)鍵詞無法查出數(shù)據(jù)來，提示regexp must be a string

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

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();// 在這里返回這個方法的結(jié)果，需要與出參定義的結(jié)構(gòu)映射}return {pageNo:params.pageNo,pageSize:params.pageSize,total:total.total,records: result.data}; };

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

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。