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


Posted in Javascript onFebruary 28, 2019

开发需求

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

流程

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

界面

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

代码

index.wxml

<!-- 标题 -->
<view class="title">小程序搜索</view>

<!-- 搜索框view -->
<view class="search_con">

<!-- 表单 -->
 <form bindsubmit="formSubmit">
 <!-- 记得设置name值,这样JS才能接收name=keyword的值 -->
  <input type="text" name="keyword" class="search_input" placeholder='你要找什么呢?'/>
  <button formType="submit" class="search_btn">搜索</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="noresult">{{item.noresult}}</view>
</view>

index.js

其中里面的

http://localhost/search.php?keyword=

是服务器后端接口,用于接收小程序传过去的关键词的,下面会有这个后端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

<?php
header('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('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);
}
?>

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

演示

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript知识点整理
Dec 09 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
详解vue-router基本使用
Apr 18 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
详解写好JS条件语句的5条守则
Feb 28 #Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 #Javascript
jQuery.parseJSON()函数详解
Feb 28 #jQuery
js获取form表单中name属性的值
Feb 27 #Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 #Javascript
jQuery each和js forEach用法比较
Feb 27 #jQuery
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 #Javascript
You might like
php5新改动之短标记启用方法
2008/09/11 PHP
php 异常处理实现代码
2009/03/10 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
js Function类型
2011/12/04 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
python实现单机五子棋
2020/08/28 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
实验室的标语
2014/06/20 职场文书
支部书记四风对照材料
2014/08/28 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
优秀党员推荐材料
2014/12/18 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
python中pycryto实现数据加密
2022/04/29 Python