微信小程序开发搜索功能(前端+后端+数据库)
2019年5月7日更新
这是写的最新的一篇文章
大家看这篇:
界面比较丑,主要实现逻辑...
超级简单的界面,表单,提交按钮,搜索结果展示区域...
下面是index.wxml
<!--index.wxml--> <form bindsubmit="formSubmit"> <!--提交按钮 --> <input type="text" name="id" placeholder=输入关键词 style=border:1px solid #ccc;height:30px;/> <button formType="submit" class="btn">搜索</button> </form> <view>搜索结果</view> <view wx:for="{ {re}}" wx:key="re"> <view style=color:#f00;>{ {item.result}}</view> <view style=color:green;>{ {item.title}}</view> </view>
*跟前端差不多,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 }) } }) }, })
url: http://localhost/2018-5-24/search.php?id= + formData,
这个很容易理解 var that = this; var formData = e.detail.value.id; 先把表单name=id的值获得,然后赋给formData这个变量 然后,在url进行拼接,用+号拼接这个变量即可...
然后,提交到接口,后端进行处理即可,后端处理后返回json格式的数据,然后通过
that.setData({ re: res.data, })
进行打印在控制台,你也可以渲染在index.wxml
为了方便大家研究,我把后端的php源码也贴出来。
search.php
<?php header("Content-type:text/json;charset=utf8"); //定义参数 $id = $_GET["id"]; //表单验证 if(empty($id)){ echo "[{"result":"表单为空..."}]"; }else{ //连接数据库 $con = mysql_connect("数据库链接","账号","密码"); //设置数据库字符集 mysql_query("SET NAMES UTF8"); //查询数据库 mysql_select_db("数据库名", $con); $result = mysql_query("SELECT * FROM test WHERE id like %$id%"); $results = array(); while($row = mysql_fetch_assoc($result)) { $results[] = $row; // 将数组转成json格式 echo json_encode($results); } //关闭数据库连接 mysql_close($con); } ?>
*数据库表名为test,里面一共有两个字段,一个是id,一个是title
所以index.wxml里面有两个值
<view wx:for="{ {re}}" wx:key="re"> <view style=color:#f00;>{ {item.result}}</view> <view style=color:green;>{ {item.title}}</view> </view>
wx:for="{ {re}}"指的是循环数组,在js代码中,我们把所有服务端取得的数据,存进了re的数组
然后,{ {item.result}}指的是服务端返回表单为空的结果。{ {item.title}}返回的是搜索结果,这个结合你的数据库吧,你想展示什么结果,你就把title改成你数据库的相关字段。