微信小程序搜索功能(附:小程序前端+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 相关文章推荐
js 数组操作代码集锦
Apr 28 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
express.js中间件说明详解
Mar 19 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 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 Pear 安装及使用
2009/03/19 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python fabric使用笔记
2015/05/09 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
《木笛》教学反思
2014/03/01 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
调研座谈会发言材料
2014/08/23 职场文书
2015年行政部工作总结
2015/04/28 职场文书
教师调动申请报告
2015/05/18 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server