WeChatウィジェット開発検索機能実現（フロントエンド＋バックエンド＋データベース）

2019年5月7日に更新しました。これは最新の文章です。皆さんはこれを読みます。https://www.jb51.net/article/157081.htm
 界面は比較的に醜いです。主に論理を実現します。

 超簡単なインターフェース、フォーム、サブボタン、検索結果の表示エリア…
以下は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>

*フロントエンドと似ています。フォームにはBindybmit=「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をあなたのデータベースの関連フィールドに変えてください。

ここでは、WeChatウィジェットの開発に関する検索機能の実現に関する記事を紹介します。より多くの関連キーワード検索機能の内容は、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。