E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路。流程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(学习交流可以加我)另外,本人喜欢研究支付,如果想要了解支付接口,微信支付,支付宝的个人免签约支付接口方案,可以看看我这个:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序搜索,微信小程序搜索功能!附:小程序前端+PHP后端
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏