微信小程序开发搜索功能实现(前端+后端+数据库)
92 浏览量
2020-10-15
14:01:12
上传
评论 2
收藏 66KB PDF 举报
微信小程序开发搜索功能实现微信小程序开发搜索功能实现(前端前端+后端后端+数据库数据库)
主要介绍了微信小程序开发搜索功能实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一
定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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>
*跟前端差不多，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({
资源评论
