界面比较丑,主要实现逻辑...
超级简单的界面,表单,提交按钮,搜索结果展示区域...
下面是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













