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

【导读】微信小程序火热得不行,很多代理商也开始疯狂卖模板。但是对于部分需要定制的客户,就需要针对性开发。马氪软件带大家了解一下给小程序增加搜索功能,网站后台采用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改成你数据库的相关字段。


本文链接:http://mkapps.cn/news/weixin/257.html

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章