当前位置: 首页 > 后端技术 > PHP

微信小程序搜索功能!附:小程序前端+PHP后端

时间:2023-03-29 23:12:30 PHP

开发需求微信小程序已经很流行了,学习起来也比较容易,但是对于初学者来说还是很伤脑筋的事情,分享给大家小程序搜索的思路。流程1.表单(输入框,提交按钮,提交的name值)2.接收表单数据(js获取表单name=keyword的值)3.通过wx.request向服务器后台发起请求,查询数据库4.返回JSON格式数据发送给小程序,js解析渲染给小程序前端显示界面代码index.wxml小程序search搜索{{item.empty}}{{item.resname}}{{item.noresult}}index.js其中http://localhost/search.php?k...是服务器后台接口,用于接收小程序传递的关键字,down会有这个后端PHP文件constapp=getApp()Page({data:{},//执行点击事件formSubmit:function(e){//声明当天的执行varthat=this;//获取其中所有name=keyword的值formvarformData=e.detail.value.keyword;//在搜索中显示提示wx.showLoading({title:'Searching',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)//将所有结果保存到一个名为rethat的数组中。setData({re:res.data,})//搜索成功后,在搜索中隐藏提示wx.hideLoading();}})},})index.wxss/*搜索样式*/.title{文本对齐:居中;字体大小:20px;字体粗细:粗体;}.search_con{宽度:80%;margin:20pxauto;}.search_con.search_input{border:1pxsolidrgb(214,211,211);高度:45px;-半径:100px;字体大小:17px;padding-left:15px;/*这里需要使用padding-left将光标向右移动15个像素,而不是text-indent*/color:#333;}.search_con.search_btn{margin-top:15px;宽度:100%;高度:45px;背景:#56b273;颜色:#fff;border-radius:100px;}.search_result{宽度:80%;{文本对齐:居中;颜色:#f00;font-size:15px;}.search_result.noresult{text-align:center;颜色:#666;font-size:15px;}.search_result.resname{text-align:left;颜色:#333;font-size:15px;}serversearch.php"TheformcannotbeEmpty");//将数组转换成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("databasename",$con);mysql_query("SETNAMESUTF8");//查询数据库$result=mysql_query("SELECT*FROMtablenameWHERE要查询的字段like'%$keyword3%'ORDERBYIDDESC");$results=array();//查询数据库中是否存在这条记录$exist=mysql_num_rows($result);if($exist){//遍历输出while($row=mysql_fetch_assoc($result)){$results[]=$行;}//输出JSONechojson_encode($results);//当查询没有结果时}else{//构建数组$arr=array("noresult"=>"Noresult");//将数组转换成json$data=json_encode($arr);echo"[$data]";}//断开数据库连接mysql_close($con);}?>服务器端也很简单,大家要好好写服务器端,毕竟安全和效率很重要Demo作者:TANKING网址:http://likeyunba.com微信:face6009(学习交流可以加我)