开发微信小程序简单搜索功能带PHP后端

微信小程序火热得不行，很多代理商也开始疯狂卖模板。但是对于部分需要定制的客户，就需要针对性开发。马氪软件带大家了解一下给小程序增加搜索功能，网站后台采用PHP开发。

　　一、小程序部分

　　1、搜索的前端

　　<!--search.wxml-->

　　<form bindsubmit="formSubmit">

　　<!--提交按钮  -->

　　<input type="text" name="id" placeholder='输入关键词' style='border:1px solid #ccc;height:30px;'/>

　　<button formType="submit" class="btn">搜索</button>

　　</form>

　　<view>搜索结果</view>

　　<view wx:for="{{re}}" wx:key="re">

　　<view style='color:#f00;'>{{item.result}}</view>

　　<view style='color:green;'>{{item.title}}</view>

　　</view>

　　form表单要加一个bindsubmit="formSubmit"接着就是search.js

　　2、js代码部分

　　//获取应用实例

　　const app = getApp()

　　Page({

　　/**

　　* 页面的初始数据

　　*/

　　data: {

　　result:'',

　　state:''

　　},

　　formSubmit: function (e) {

　　var that = this;

　　var formData = e.detail.value.id; //获取表单所有name=id的值

　　wx.request({

　　url: '你的网址/search.php?id=' + formData,

　　data: formData,

　　header: { 'Content-Type': 'application/json' },

　　success: function (res) {

　　console.log(res.data)

　　that.setData({

　　re: res.data,

　　})

　　wx.showToast({

　　title: '已提交',

　　icon: 'success',

　　duration: 2000

　　})

　　}

　　})

　　},

　　})

　　var that = this;

　　var formData = e.detail.value.id;

　　先把表单name=id的值获得，然后赋给formData这个变量

　　然后，在url进行拼接，用+号拼接这个变量即可...然后，提交到接口，后端进行处理即可，后端处理后返回json格式的数据，然后通过  that.setData({    re: res.data,  })

　　进行打印在控制台，你也可以渲染在search.wxml

　　二、PHP网站后端-search.php

　　1、PHP搜索 为了方便大家研究，马氪软件把搜索的php代码也给大家一个示例。

　　<?php

　　header("Content-type:text/json;charset=utf8");

　　//定义参数

　　$id = $_GET["id"];

　　//表单验证

　　if(empty($id)){

　　echo "[{\"result\":\"表单为空...\"}]";

　　}else{

　　//连接数据库

　　$con = mysql_connect("数据库链接","账号","密码");

　　//设置数据库字符集

　　mysql_query("SET NAMES UTF8");

　　//查询数据库

　　mysql_select_db("数据库名", $con);

　　$result = mysql_query("SELECT * FROM test WHERE id like '%$id%'");

　　$results = array();

　　while($row = mysql_fetch_assoc($result))

　　{

　　$results[] = $row;

　　}

　　// 将数组转成json格式

　　echo json_encode($results);

　　//关闭数据库连接

　　mysql_close($con);

　　}

　　?>

　　数据库表名为test,里面一共有两个字段，一个是id，一个是title所以index.wxml里面有两个值

　　2、小程序搜索结果页面

　　<view wx:for="{{re}}" wx:key="re">

　　<view style='color:#f00;'>{{item.result}}</view>

　　<view style='color:green;'>{{item.title}}</view>

　　</view>

　　wx:for="{{re}}"指的是循环数组，在js代码中，我们把所有服务端取得的数据，存进了re的数组然后，{{item.result}}指的是服务端返回表单为空的结果。{{item.title}}返回的是搜索结果，这个结合你的数据库吧，你想展示什么结果，你就把title改成你数据库的相关字段。