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

Code4App 發(fā)布于2019-07-01 11:24 / 1693人閱讀

摘要：開發(fā)需求微信小程序已經(jī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


小程序搜索





  
  
    
        
  





  {{item.empty}}
  
  {{item.resname}}
  
  {{item.noresult}}

index.js
其中里面的
http://localhost/search.php?k...
是服務器后端接口，用于接收小程序傳過去的關鍵詞的，下面會有這個后端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)

        //把所有結(jié)果存進一個名為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

 "表單不能為空"
        );

    //把數(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);

    //當查詢無結(jié)果的時候
    }else{

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

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

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

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

演示

作者：TANKING
網(wǎng)站：http://likeyunba.com
微信：face6009
（學習交流可以加我）

云服務器 GPU云服務器微信小程序功能微信小程序的功能微信小程序有什么功能 php做微信小程序

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/30197.html

微信小程序評論/留言功能，附：前端+后端代碼+視頻講解！

前端界面： showImg(https://segmentfault.com/img/bVbg2QH?w=386&h=679); 演示： showImg(https://segmentfault.com/img/bVbg2QN?w=685&h=720); 授權登錄留言 {{item.result}} 以下是留言內(nèi)容 {{item.nickname}} ...

zhangrxiang 2019-07-01 12:31 評論0 收藏0
微信小程序獲取用戶頭像+昵稱+openid，小程序登錄！附前端后端源碼！

摘要：做一款小程序，如果需要判斷用戶，當然要獲取一些基本信息，例如頭像，昵稱，。所以本次案例就直接上代碼了。做一款小程序，如果需要判斷用戶，當然要獲取一些基本信息，例如頭像，昵稱，openid。所以本次案例就直接上代碼了。小程序前端 index.wxml 獲取頭像昵稱 {{userInfo.nickName}} ...

joy968 2019-07-01 11:00 評論0 收藏0
微信小程序發(fā)送模板消息！附前端+后端源碼~

摘要：前端，填寫填寫填寫模板模板的第個關鍵詞模板的第個關鍵詞模板的第個關鍵詞模板的第個關鍵詞模板的第個關鍵詞推送域名接口地址，我學習就用，建議用后端，參數(shù)此處開始處理數(shù)據(jù)發(fā)送一個常規(guī)的請求捕抓異常至于和怎么獲取，自己另外學習咯推送前端，index.wxml 推送 index.js // pages/mubanxiaoxi/mubanx...

yanbingyun1990 2019-08-23 13:53 評論0 收藏0
微信小程序發(fā)送模板消息！附前端+后端源碼~

摘要：前端，填寫填寫填寫模板模板的第個關鍵詞模板的第個關鍵詞模板的第個關鍵詞模板的第個關鍵詞模板的第個關鍵詞推送域名接口地址，我學習就用，建議用后端，參數(shù)此處開始處理數(shù)據(jù)發(fā)送一個常規(guī)的請求捕抓異常至于和怎么獲取，自己另外學習咯推送前端，index.wxml 推送 index.js // pages/mubanxiaoxi/mubanx...

張漢慶 2019-07-01 11:01 評論0 收藏0
微信小程序wx.login()獲取openid，附：前端+后端代碼

摘要：微信小程序開放了微信登錄的，無論是個人還是企業(yè)申請的小程序均可使用。開始寫服務端，也很容易。微信小程序開放了微信登錄的api，無論是個人還是企業(yè)申請的小程序均可使用。首先創(chuàng)建一個項目，把這些代碼都清空，我們自己寫！ showImg(https://segmentfault.com/img/bVbco8j?w=1022&h=860); 然后，開始寫了！首先index.wxml，寫一個...

tigerZH 2019-07-01 10:09 評論0 收藏0