微信小程序开发搜索功能(前端+后端+数据库)

2019年5月7日更新

这是写的最新的一篇文章

大家看这篇：https://blog.csdn.net/weixin_39927850/article/details/87990384

界面比较丑，主要实现逻辑...

超级简单的界面，表单，提交按钮，搜索结果展示区域...

下面是index.wxml

搜索    

搜索结果
{{item.result}}{{item.title}}

*跟前端差不多，form表单要加一个bindsubmit="formSubmit"

接着就是index.js

//index.js
//获取应用实例
const app = getApp()
Page({/*** 页面的初始数据*/data: {result:'',state:''},formSubmit: function (e) {var that = this;var formData = e.detail.value.id; //获取表单所有name=id的值  wx.request({url: 'http://localhost/2018-5-24/search.php?id=' + formData,data: formData,header: { 'Content-Type': 'application/json' },success: function (res) {console.log(res.data)that.setData({re: res.data,})wx.showToast({title: '已提交',icon: 'success',duration: 2000})}})},
})

*数据库表名为test,里面一共有两个字段，一个是id，一个是title

所以index.wxml里面有两个值

{{item.result}}{{item.title}}

wx:for="{{re}}"指的是循环数组，在js代码中，我们把所有服务端取得的数据，存进了re的数组

然后，{{item.result}}指的是服务端返回表单为空的结果。{{item.title}}返回的是搜索结果，这个结合你的数据库吧，你想展示什么结果，你就把title改成你数据库的相关字段。

学习交流微信：face6009
 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！