微信小程序搜索功能(附:小程序前端PHP后端)

发展要求

微信小程序很受欢迎，学习起来也很容易，但对于初学者来说还是一件伤脑筋的事情。让我们分享一下搜索小程序的想法。

过程

1.表单(输入框、提交按钮、提交名称值)；2.接收表单数据(js获取表单名称=关键字的值)；3.通过wx.request向服务器后端发送查询数据库的请求；4.将jsON格式的数据返回给小程序，JS解析并将其呈现给小程序的前端进行显示

连接

密码

index.wxml

！-title-view class=' title '小程序搜索/查看！-搜索框视图-视图类=' search _ con '！-表单-表单绑定提交='表单提交'！-记得设置name值，这样JS就可以接收到name=keyword value-input type=' text ' name=' keyword ' class=' search _ input ' placeholder='你在找什么'/button formtype=' submit ' class=' search _ BTN ' search/button/form/view！-显示搜索结果-view wx : for=' { { re } } ' wx : key=' re ' class=' search _ result '！-提交空白表单时-view class=' empty ' { item。empty}}/view！-当有搜索结果时-view class=' resname ' { item。resname}}/view！-找不到结果时-view class=' no result ' { item。noresult}}/view/viewindex.js

其中，

http://localhost/search.php？关键字=

它是服务器后端接口，用来接收小程序的关键字。下面会有这个后端PHP文件。

const app=getapp()page({ data : } }，//执行click事件formSubmit:函数(e) {//声明var这是在同一天执行的；//获取表单中name=关键字的所有值。varformdata=e . detail . value . keyword；//在搜索中显示提示wx . show loading({ title : ' search '，icon: 'loading' }) //向搜索后端服务器发送请求wx . request({//URL 3360 ' http://localhost/search . PHP？关键字=' formData，//发送数据data: formData，//请求数据采用JSON格式header : { ' content-type ' : ' application/JSON ' }。//成功请求：函数(REs){//控制台打印(用于开发和调试)console.log(res.data) //将所有结果保存到名为RE . setdata({ Re3360 REs . data，})的数组中//搜索成功后，隐藏提示wx.hideLoading } }) }，})index.wxss

/*搜索样式*/。title { text-align : center；font-size : 20px；font-weight:粗体；}.search _ con { width : 80%；margin:20px汽车；}.search _ con . search _ input { border 3360 1px实心rgb(214，211，211)；高度： 45px；border-radius : 100像素；font-size : 17px；左衬垫left: 15px/* padding-left用于将光标向右移动15像素，而不是text-缩进*/color : # 333；}.search _ con . search _ BTN { margin-top : 15px；宽度： 100%；高度： 45px；背景技术# 56b273color: # fffborder-radius : 100像素；}.search _ result { width : 80%；margin:10px汽车；}.搜索结果。空{ text-align : center；color: # f00font-size : 15px；}.搜索结果。no result { text-align : center；color: # 666font-size : 15px；}.搜索结果。resname { text-align : left；color: # 333font-size : 15px；}服务器

search.php

？phpheader(' Content-type : APPLication/JSON ')；//get表单数据$keyword1=$_GET['关键字']；//筛选表单空间$ key word 2=trim($ key word 1)；//If (empty ($关键字2))当表单提交空白数据时{//Build array $ arr=array(' empty '='表单不能为空')；//将数组转换为JSON $ data=JSON _ encode($ arr)；echo '[$ data]'；}else{//筛选器形式特殊字符$replace=array(！),'@','#','$','%','^','','*','(',')','_','-',' ','=','{','}','[',']',';',':',''','','','?','/','|');$keyword3=str_replace($replace ' '，$ key word 2)；//连接数据库$con=mysql_connect('数据库地址'，'数据库账号'，'数据库密码')；if(！$con){die('无法连接： '。MySQL _ error())；}mysql_select_db('数据库名'，$ con)；MySQL _ query(' SET NAMES UTF8 ')；//查询数据库$$ results=array()；//查询数据库中是否存在此记录$ exist=MySQL _ num _ rows($ result)；If ($exist) {//遍历输出while($ row=MySQL _ fetch _ assoc($ result)){ $ results[]=$ row；}//输出JSON echo JSON _ encode($ results)；//当查询没有结果时}else{ //构建一个数组$arr=array('noresult'='还没有结果')；//将数组转换为JSON $ data=JSON _ encode($ arr)；echo '[$ data]'；}//断开数据库MySQL _ close($ con)；}?服务器也很简单。每个人都应该把服务器写好。毕竟安全和效率很重要。

示范

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。