微信小程序如何實現(xiàn)搜索功能

這篇文章給大家分享的是有關微信小程序如何實現(xiàn)搜索功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

新干網(wǎng)站建設公司成都創(chuàng)新互聯(lián),新干網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為新干上千多家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設要多少錢，請找那個售后服務好的新干做網(wǎng)站的公司定做！

開發(fā)需求

微信小程序已經(jīng)是非?；鹆?，而且學習也比較容易，但是對于初學者來說還是一件比較傷腦筋的事，接下來給大家分享一下小程序搜索的思路。

流程

1、表單（輸入框、提交按鈕、提交的name值)
2、接收表單數(shù)據(jù)（js獲取表單name=keyword的值）
3、通過wx.request向服務器后端發(fā)起請求查詢數(shù)據(jù)庫
4、返回JSON格式的數(shù)據(jù)給小程序，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: {},

 //執(zhí)行點擊事件
 formSubmit: function (e) {

  //聲明當天執(zhí)行的
  var that = this;

  //獲取表單所有name=keyword的值
  var formData = e.detail.value.keyword;

  //顯示搜索中的提示
  wx.showLoading({
   title: '搜索中',
   icon: 'loading'
  })

  //向搜索后端服務器發(fā)起請求
  wx.request({

   //URL
   url: 'http://localhost/search.php?keyword=' + formData,

   //發(fā)送的數(shù)據(jù)
   data: formData,

   //請求的數(shù)據(jù)時JSON格式
   header: {
    'Content-Type':'application/json'
   },

   //請求成功
   success: function (res) {

    //控制臺打?。ㄩ_發(fā)調(diào)試用）
    console.log(res.data)

    //把所有結果存進一個名為re的數(shù)組
    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');

//獲取表單數(shù)據(jù)
$keyword1 = $_GET["keyword"];

//過濾表單空格
$keyword2 = trim($keyword1);

//當表單提交空白數(shù)據(jù)時
if(empty($keyword2)){
  
  //構建數(shù)組
  $arr = array(
      "empty" => "表單不能為空"
    );

  //把數(shù)組轉(zhuǎn)換為json
  $data = json_encode($arr);
  echo "[$data]";

}else{

//過濾表單特殊字符
$replace = array('!','@','#','$','%','^','&','*','(',')','_','-','+','=','{','}','[',']',';',':','"','<','>','?','/','|');
$keyword3 = str_replace($replace, '', $keyword2);

// 連接數(shù)據(jù)庫
$con = MySQL_connect("數(shù)據(jù)庫地址","數(shù)據(jù)庫賬號","數(shù)據(jù)庫密碼");
if (!$con){die('Could not connect: ' . mysql_error());}

mysql_select_db("數(shù)據(jù)庫名", $con);
mysql_query("SET NAMES UTF8");

//查詢數(shù)據(jù)庫
$result = mysql_query("SELECT * FROM 表名 WHERE 需要查詢的字段 like '%$keyword3%' ORDER BY ID DESC");
$results = array();
//查詢數(shù)據(jù)庫是否存在這條記錄
$exist = mysql_num_rows($result);
if ($exist) {
  //遍歷輸出
  while ($row = mysql_fetch_assoc($result)){
    $results[] = $row;
    }

  //輸出JSON
  echo json_encode($results);

  //當查詢無結果的時候
  }else{

    //構建數(shù)組
    $arr = array(
      "noresult" => "暫無結果"
    );

    //把數(shù)組轉(zhuǎn)換為json
    $data = json_encode($arr);
    echo "[$data]";
}

//斷開數(shù)據(jù)庫連接
mysql_close($con);
}
?>

服務端也是非常簡單的，大家自己把服務端寫好一點，畢竟安全和效率是很重要的。

演示

感謝各位的閱讀！關于“微信小程序如何實現(xiàn)搜索功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享名稱：微信小程序如何實現(xiàn)搜索功能
標題網(wǎng)址：http://muchs.cn/article20/ghodco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、營銷型網(wǎng)站建設、外貿(mào)建站、外貿(mào)網(wǎng)站建設、網(wǎng)站建設、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)