微信小程序搜索功能(附:小程序前端+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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
对python 命令的-u参数详解
2018/12/03 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
国企干部对照检查材料
2014/08/22 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
团日活动总结格式
2015/05/11 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle