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

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

clipboard.png

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

下面是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"":""表单为空...""}]"";

脚本宝典为你提供优质服务
脚本宝典 » 微信小程序开发搜索功能(前端+后端+数据库)

发表评论

提供最优质的资源集合

立即查看 了解详情
Copyright © 2020 脚本宝典 豫ICP备15014364号-1
脚本宝典