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

开发需求

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

流程

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

界面

代码

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({//URLurl: '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;}//输出JSONecho json_encode($results);//当查询无结果的时候}else{//构建数组$arr = array("noresult" => "暂无结果");//把数组转换为json$data = json_encode($arr);echo "[$data]";
}//断开数据库连接
mysql_close($con);
}
?>

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

演示

作者：TANKING

网站：http://likeyunba.com

学习交流微信：face6009

（学习交流可以加我）

另外，本人喜欢研究支付，如果想要了解支付接口，微信支付，支付宝的个人免签约支付接口方案，可以看看我这个：

http://www.likeyunba.com/pay/

微信小程序搜索功能！附：小程序前端+PHP后端 1相关推荐

html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
小程序搜索框_小程序直播有了搜索入口这波微信公域流量你要不要抓？
[亿邦动力讯]日前,微信"搜一搜"上线直达小程序直播功能.这意味着,微信小程序直播有了一个搜索入口. 亿邦动力体验发现,在微信"搜一搜"输入美妆品牌名称&quo ...
Win10系统小娜搜索不到应用程序？小娜无法搜索本地应用
参照[http://www.xitongcheng.cc/xtjc/12276.html] Win10自带的语音助手Cortana小娜可以帮我们省下很多文件或功能操作时间,小娜经常被用于搜索本地文件或 ...
微信小程序搜索功能！附：小程序前端+PHP后端
开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收 ...
微信小程序搜索功能系列一套全
今天说一下小程序首页的搜索功能吧这个搜索功能我是建了一个组件,用组件写的: 上代码: wxml代码 <view class="search"><input pl ...
【详细】小程序搜索功能实现
搜索功能是app,小程序中非常常见的一个需求,作为常见的需求,如何高效地完成该需求的实现,就异常关键.那么小程序中如何从0到1实现搜索功能呢?请看本文效果展示历史记录跳转到详情页面(详情页面开发 ...
如何开发微信小程序（全解过程包括前端、后端）
微信小程序开发基础知识: (1)手机的屏幕宽度的最大为750rpx(数据与rpx连写): (2)ctrl+s 保存即可运行新写的代码: (3)新建项目的过程: 1. 创建时不要选择云开发: 2. 生成 ...
开放小程序插件功能，小程序插件的使用
米多客新增小程序插件功能,但很多小伙伴可能还不明白小程序插件到底是什么?又该怎么用? 今天就来解读一下米多客小程序插件的定义. 米多客小程序插件,是可被添加到小程序内直接使用的会话功能组件.小程序开发 ...
还不会小程序开发？适用于新手、前端、后端、全栈的小程序开发保姆级教程！
2017年,那个男人微信之父"龙哥",在公开课上提出"小程序".那时大家都还在享受移动互联网所带来的便捷体验,对于微信这个庞然大物所倡导的新物种显然是有点不知所 ...

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

开发需求

流程

界面

代码

服务端

演示

微信小程序搜索功能！附：小程序前端+PHP后端 1相关推荐

最新文章

热门文章