界面比较丑,主要实现逻辑...
超级简单的界面,表单,提交按钮,搜索结果展示区域...
下面是 index.wxml
*跟前端差不多,form 表单要加一个 bindsubmit="formSubmit"
接着就是 index.js
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 里面有两个值
wx:for="{{re}}"指的是循环数组,在 js 代码中,我们把所有服务端取得的数据,存进了 re 的数组,
然后,{{item.result}}指的是服务端返回表单为空的结果。{{item.title}}返回的是搜索结果,这个结合你的数据库吧,你想展示什么结果,你就把 title 改成你数据库的相关字段。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.