微信小程序開發搜索功能(前端+后端+數據庫)

zsirfs 發布于2019-07-01 12:29 / 2541人閱讀

摘要：返回的是搜索結果，這個結合你的數據庫吧，你想展示什么結果，你就把改成你數據庫的相關字段。

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

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

下面是index.wxml





    

搜索結果

  {{item.result}}
  {{item.title}}

*跟前端差不多，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

*數據庫表名為test,里面一共有兩個字段，一個是id，一個是title

所以index.wxml里面有兩個值


  {{item.result}}
  {{item.title}}

wx:for="{{re}}"指的是循環數組，在js代碼中，我們把所有服務端取得的數據，存進了re的數組

然后，{{item.result}}指的是服務端返回表單為空的結果。{{item.title}}返回的是搜索結果，這個結合你的數據庫吧，你想展示什么結果，你就把title改成你數據庫的相關字段。

作者：TANKING

云服務器 GPU云服務器微信小程序開發微信小程序開發語言微信小程序開發免費微信小程序開發步驟

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/30808.html

微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

Lowky 2019-08-30 11:07 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

elina 2019-08-02 15:15 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

voyagelab 2019-08-23 18:02 評論0 收藏0
Java 初學者做的第一個微信小程序總結--關于Java基礎

摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。為什么學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點；也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。項目展示本...

mudiyouyou 2019-08-16 14:30 評論0 收藏0