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

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

浏览量:444 时间: 来源:TANKING-
2019年5月7日更新这是写的最新的一篇文章大家看这篇:
界面比较丑,主要实现逻辑...

超级简单的界面,表单,提交按钮,搜索结果展示区域...
下面是index.wxml
!--index.wxml--formbindsubmit="formSubmit"!--提交按钮--inputtype="text"name="id"placeholder='输入关键词'style='border:1pxsolid#ccc;height:30px;'/buttonformType="submit"搜索/button/formview搜索结果/viewviewwx:for="{{re}}"wx:key="re"viewstyle='color:#f00;'{{item.result}}/viewviewstyle='color:green;'{{item.title}}/view/view跟前端差不多,form表单要加一个bindsubmit="formSubmit"
接着就是index.js
//index.js//获取应用实例constapp=getApp()Page({/页面的初始数据/data:{result:'',state:''},formSubmit:function(e){varthat=this;varformData=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,这个很容易理解varthat=this;varformData=e.detail.value.id;先把表单name=id的值获得,然后赋给formData这个变量然后,在url进行拼接,用+号拼接这个变量即可...
然后,提交到接口,后端进行处理即可,后端处理后返回json格式的数据,然后通过
that.setData({re:res.data,})进行打印在控制台,你也可以渲染在index.wxml
为了方便大家研究,我把后端的php源码也贴出来。
search.php
?phpheader("Content-type:text/json;charset=utf8");//定义参数$id=$_GET["id"];//表单验证if(empty($id)){echo"[{"result":"表单为空..."}]";}else{//连接数据库$con=mysql_connect("数据库链接","账号","密码");//设置数据库字符集mysql_query("SETNAMESUTF8");//查询数据库mysql_select_db("数据库名",$con);$result=mysql_query("SELECTFROMtestWHEREidlike'%$id%'");$results=array();while($row=mysql_fetch_assoc($result)){$results[]=$row;//将数组转成json格式echojson_encode($results);}//关闭数据库连接mysql_close($con);}?数据库表名为test,里面一共有两个字段,一个是id,一个是title
所以index.wxml里面有两个值
viewwx:for="{{re}}"wx:key="re"viewstyle='color:#f00;'{{item.result}}/viewviewstyle='color:green;'{{item.title}}/view/viewwx:for="{{re}}"指的是循环数组,在js代码中,我们把所有服务端取得的数据,存进了re的数组
然后,{{item.result}}指的是服务端返回表单为空的结果。{{item.title}}返回的是搜索结果,这个结合你的数据库吧,你想展示什么结果,你就把title改成你数据库的相关字段。

学习交流微信:face6009

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎