微信小程序搜索功能(附:小程序前端+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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
javascript学习之json入门
Dec 22 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
关于vue面试题汇总
Mar 20 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 Javascript
详解写好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中printf()函数格式化使用
2016/05/23 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
JavaScript简介
2015/02/15 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
python tkinter实现连连看游戏
2020/11/16 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
2014年保育员工作总结
2014/12/02 职场文书
灵山大佛导游词
2015/02/04 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
焦裕禄观后感
2015/06/03 职场文书
回复函格式及范文
2015/07/14 职场文书
人代会简报
2015/07/21 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL