微信小程序搜索功能！附：小程序前端+PHP后端

Code4App 发布于2019-07-01 11:24 / 1518人阅读

摘要：开发需求微信小程序已经是非常火了，而且学习也比较容易，但是对于初学者来说还是一件比较伤脑筋的事，接下来给大家分享一下小程序搜索的思路。演示作者网站微信学习交流可以加我

开发需求

微信小程序已经是非常火了，而且学习也比较容易，但是对于初学者来说还是一件比较伤脑筋的事，接下来给大家分享一下小程序搜索的思路。

流程

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

界面

代码

index.wxml


小程序搜索





  
  
    
        
  





  {{item.empty}}
  
  {{item.resname}}
  
  {{item.noresult}}

index.js
其中里面的
http://localhost/search.php?k...
是服务器后端接口，用于接收小程序传过去的关键词的，下面会有这个后端PHP文件。

const app = getApp()
Page({
  data: {},

  //执行点击事件
  formSubmit: function (e) {

    //声明当天执行的
    var that = this;

    //获取表单所有name=keyword的值
    var formData = e.detail.value.keyword;

    //显示搜索中的提示
    wx.showLoading({
      title: "搜索中",
      icon: "loading"
    })

    //向搜索后端服务器发起请求
    wx.request({

      //URL
      url: "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:20px auto;
}

.search_con .search_input{
  border: 1px solid rgb(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:10px auto;
}


.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

 "表单不能为空"
        );

    //把数组转换为json
    $data = json_encode($arr);
    echo "[$data]";

}else{

//过滤表单特殊字符
$replace = array("!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","}","[","]",";",":",""","<",">","?","/","|");
$keyword3 = str_replace($replace, "", $keyword2);

// 连接数据库
$con = mysql_connect("数据库地址","数据库账号","数据库密码");
if (!$con){die("Could not connect: " . mysql_error());}

mysql_select_db("数据库名", $con);
mysql_query("SET NAMES UTF8");

//查询数据库
$result = mysql_query("SELECT * FROM 表名 WHERE 需要查询的字段 like "%$keyword3%" ORDER BY ID DESC");
$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);
}
?>

服务端也是非常简单的，大家自己把服务端写好一点，毕竟安全和效率是很重要的。

演示

作者：TANKING
网站：http://likeyunba.com
微信：face6009
（学习交流可以加我）

服务器托管专线服务微信小程序功能微信小程序的功能微信小程序有什么功能 php做微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30197.html

微信小程序评论/留言功能，附：前端+后端代码+视频讲解！

前端界面： showImg(https://segmentfault.com/img/bVbg2QH?w=386&h=679); 演示： showImg(https://segmentfault.com/img/bVbg2QN?w=685&h=720); 授权登录留言 {{item.result}} 以下是留言内容 {{item.nickname}} ...

zhangrxiang 2019-07-01 12:31 评论0 收藏0
微信小程序获取用户头像+昵称+openid，小程序登录！附前端后端源码！

摘要：做一款小程序，如果需要判断用户，当然要获取一些基本信息，例如头像，昵称，。所以本次案例就直接上代码了。做一款小程序，如果需要判断用户，当然要获取一些基本信息，例如头像，昵称，openid。所以本次案例就直接上代码了。小程序前端 index.wxml 获取头像昵称 {{userInfo.nickName}} ...

joy968 2019-07-01 11:00 评论0 收藏0
微信小程序发送模板消息！附前端+后端源码~

摘要：前端，填写填写填写模板模板的第个关键词模板的第个关键词模板的第个关键词模板的第个关键词模板的第个关键词推送域名接口地址，我学习就用，建议用后端，参数此处开始处理数据发送一个常规的请求捕抓异常至于和怎么获取，自己另外学习咯推送前端，index.wxml 推送 index.js // pages/mubanxiaoxi/mubanx...

yanbingyun1990 2019-08-23 13:53 评论0 收藏0
微信小程序发送模板消息！附前端+后端源码~

摘要：前端，填写填写填写模板模板的第个关键词模板的第个关键词模板的第个关键词模板的第个关键词模板的第个关键词推送域名接口地址，我学习就用，建议用后端，参数此处开始处理数据发送一个常规的请求捕抓异常至于和怎么获取，自己另外学习咯推送前端，index.wxml 推送 index.js // pages/mubanxiaoxi/mubanx...

张汉庆 2019-07-01 11:01 评论0 收藏0
微信小程序wx.login()获取openid，附：前端+后端代码

摘要：微信小程序开放了微信登录的，无论是个人还是企业申请的小程序均可使用。开始写服务端，也很容易。微信小程序开放了微信登录的api，无论是个人还是企业申请的小程序均可使用。首先创建一个项目，把这些代码都清空，我们自己写！ showImg(https://segmentfault.com/img/bVbco8j?w=1022&h=860); 然后，开始写了！首先index.wxml，写一个...

tigerZH 2019-07-01 10:09 评论0 收藏0