微信小程序搜索功能实现与跳转示例

在微信小程序开发中，实现搜索功能并跳转到搜索结果页面是一项常见的需求，本文将详细介绍如何通过WXML、WXSS和JS代码来构建这样的功能。首先，我们需要在用户界面设计一个搜索框，以便用户输入关键词进行搜索。 在`search.wxml`页面中，创建了一个包含输入框的表单，输入框的类名为`searchInput`，它接受用户的输入，并在用户按下回车键时触发`goSearch`事件： ```html <view class="form"> <input class="searchInput" value="{{keyWord}}" bindconfirm="goSearch" placeholder="请输入搜索关键字" type="text"/> </view> ``` 接下来，在`search.wxss`文件中定义了相应的样式，如表单的布局、输入框的边框、字体大小等，以提供良好的用户体验： ```css .form { position: relative; height: 40px; } .searchInput { border: 1px solid #2c3036; height: 40px; line-height: 40px; font-size: 14px; border-radius: 20px; color: #bebec4; padding-left: 35px; } ``` 在`search.js`文件中，处理`goSearch`函数的核心逻辑，首先检查用户输入是否为空，然后发送一个HTTP请求到后端API（这里假设URL为'https://xxxxx/homepage/search'），将输入的关键词作为参数传递。如果返回的数据包含搜索结果，将结果解析并跳转到`searchShow`页面： ```javascript // 搜索函数 goSearch: function(e) { var that = this; var formData = e.detail.value; if (formData) { wx.request({ url: 'https://xxxxx/homepage/search', data: { title: formData }, header: { 'Content-Type': 'application/json' }, success: function(res) { that.setData({ search: res.data }); // 检查是否有搜索结果 if (res.data.msg == '无相关视频') { wx.showToast({ title: '无相关视频', icon: 'none', duration: 1500 }); } else { let str = JSON.stringify(res.data.result.data); wx.navigateTo({ url: '../searchShow/searchShow?data=' + str }); } } }); } else { wx.showToast({ title: '输入不能为空', }); } } ``` 在这个过程中，当用户输入的关键词匹配到搜索结果时，会跳转到`searchShow`页面，其中会接收到后端返回的搜索结果数据。如果没有搜索结果，会显示一个提示信息。整体来说，本文提供了一个基础的微信小程序搜索功能实现框架，开发者可以根据实际项目需求进一步定制和优化搜索功能。