微信小程序开发搜索功能(前端+后端+数据库)

zsirfs 发布于2019-07-01 12:29 / 2612人阅读

摘要：返回的是搜索结果，这个结合你的数据库吧，你想展示什么结果，你就把改成你数据库的相关字段。

界面比较丑，主要实现逻辑...

超级简单的界面，表单，提交按钮，搜索结果展示区域...

下面是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云服务器云服务器微信小程序开发微信小程序开发语言微信小程序开发免费微信小程序开发步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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