流程1、表单(输入框、提交按钮、提交的name值)2、接收表单数据(js获取表单name=keyword的值)3、通过wx.request向服务器后端发起请求查询数据库4、返回JSON格式的数据给小程序,js解析渲染到小程序前端展示
界面

代码index.wxml
!--标题--view小程序搜索/view!--搜索框view--view!--表单--formbindsubmit="formSubmit"!--记得设置name值,这样JS才能接收name=keyword的值--inputtype="text"name="keyword"placeholder='你要找什么呢?'/buttonformType="submit"搜索/button/form/view!--搜索结果展示--viewwx:for="{{re}}"wx:key="re"!--当提交空白表单的时候--view{{item.empty}}/view!--当有搜索结果的时候--view{{item.resname}}/view!--当查询不到结果的时候--view{{item.noresult}}/view/viewindex.js其中里面的是服务器后端接口,用于接收小程序传过去的关键词的,下面会有这个后端PHP文件。
constapp=getApp()Page({data:{},//执行点击事件formSubmit:function(e){//声明当天执行的varthat=this;//获取表单所有name=keyword的值varformData=e.detail.value.keyword;//显示搜索中的提示wx.showLoading({title:'搜索中',icon:'loading'})//向搜索后端服务器发起请求wx.request({//URLurl:'http://localhost/search.php?keyword='+formData,//发送的数据data:formData,//请求的数据时JSON格式header:{'Content-Type':'application/json'},//请求成功success:function(res){//控制台打印(开发调试用)console.log(res.data)//把所有结果存进一个名为re的数组that.setData({re:res.data,})//搜索成功后,隐藏搜索中的提示wx.hideLoading();}})},})index.wxss
/搜索样式/.title{text-align:center;font-size:20px;font-weight:bold;}.search_con{width:80%;margin:20pxauto;}.search_con.search_input{border:1pxsolidrgb(214,211,211);height:45px;border-radius:100px;font-size:17px;padding-left:15px;/此处要用padding-left才可以把光标往右移动15像素,不可以用text-indent/color:#333;}.search_con.search_btn{margin-top:15px;width:100%;height:45px;background:#56b273;color:#fff;border-radius:100px;}.search_result{width:80%;margin:10pxauto;}.search_result.empty{text-align:center;color:#f00;font-size:15px;}.search_result.noresult{text-align:center;color:#666;font-size:15px;}.search_result.resname{text-align:left;color:#333;font-size:15px;}服务端search.php
?phpheader('Content-Type:application/json');//获取表单数据$keyword1=$_GET["keyword"];//过滤表单空格$keyword2=trim($keyword1);//当表单提交空白数据时if(empty($keyword2)){//构建数组$arr=array("empty"="表单不能为空");//把数组转换为json$data=json_encode($arr);echo"[$data]";}else{//过滤表单特殊字符$replace=array('!','@','#','$','%','^','&','','(',')','_','-','+','=','{','}','[',']',';',':','"','','','?','/','|');$keyword3=str_replace($replace,'',$keyword2);//连接数据库$con=mysql_connect("数据库地址","数据库账号","数据库密码");if(!$con){die('Couldnotconnect:'.mysql_error());}mysql_select_db("数据库名",$con);mysql_query("SETNAMESUTF8");//查询数据库$result=mysql_query("SELECTFROM表名WHERE需要查询的字段like'%$keyword3%'ORDERBYIDDESC");$results=array();//查询数据库是否存在这条记录$exist=mysql_num_rows($result);if($exist){//遍历输出while($row=mysql_fetch_assoc($result)){$results[]=$row;}//输出JSONechojson_encode($results);//当查询无结果的时候}else{//构建数组$arr=array("noresult"="暂无结果");//把数组转换为json$data=json_encode($arr);echo"[$data]";}//断开数据库连接mysql_close($con);}?服务端也是非常简单的,大家自己把服务端写好一点,毕竟安全和效率是很重要的。
演示

作者:TANKING
网站:http://likeyunba.com
学习交流微信:face6009
(学习交流可以加我)
另外,本人喜欢研究支付,如果想要了解支付接口,微信支付,支付宝的个人免签约支付接口方案,可以看看我这个:













