界面比較醜，主要實現邏輯...

超級簡單的界面，表單，提交按鈕，搜索結果展現區域...

下面是index.wxml

<!--index.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"

接着就是index.js

//index.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: 'http://localhost/2018-5-24/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
        })
      }
    })
  },
})

* url: 'http://localhost/2018-5-24/search.php?id=' + formData,

這個很容易理解
var that = this;
var formData = e.detail.value.id;
先把表單name=id的值得到，而後賦給formData這個變量
而後，在url進行拼接，用+號拼接這個變量便可...

而後，提交到接口，後端進行處理便可，後端處理後返回json格式的數據，而後經過

that.setData({
    re: res.data,
  })

進行打印在控制檯，你也能夠渲染在index.wxml

爲了方便你們研究，我把後端的php源碼也貼出來。

search.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裏面有兩個值

<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改爲你數據庫的相關字段。

做者：TANKING