昨天讲到了网络api的使用，这里有自己服务器的同学可以使用spring boot自己写一写api然后部署到服务器上使用，没有的同学可以跟我这里一起操作一下。
一、新建一个项目
需求：一个搜索框+一个搜索按钮
大家可以自己尝试写一下
下面是我写的（比较简陋，只是为了讲解api这一块的使用，虽然文档很容易懂，但是过程中还是会碰到不少问题，这里带大家一起解决一下）
<!--pages/test/test.wxml-->
<input placeholder='请输入搜索内容' bindinput='inputBtn' style='border:solid 1px black'/>
<button bindtap='sousuo'>搜索</button>
<text>{{ret}}</text>
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
input:null,
ret:""
},
inputBtn: function(e){
this.setData({
input:e.detail.value
})
},
sousuo:function(){
console.log(this.data.input);
}
})
二、api使用
首先做了最基本的需求，那么我们的搜索怎么来使用呢？
因为我们没有现成的api可以使用，那就去蹭一下别人的吧。这里给大家找了一个免费的测试接口供大家学习使用。
淘宝商品搜索建议:
url： http://suggest.taobao.com/sug
get:
* code 强制为utf-8
* q 商品关键字
* callback 强制为cb
return:
cb({
"result":[
["卫衣女","14953757"],
["卫衣男","11459945"],
["卫衣男潮","20194993"],
["卫衣加厚加绒女","9774198"],
["卫衣女加绒","14761593"],
["卫衣女宽松","10757887"],
["卫衣女中长款","3707116"],
["卫衣男连帽","16890363"],
["卫衣连衣裙","870723"],
["卫衣女连帽","13681857"]
]
})
示例：
http://suggest.taobao.com/sug?code=utf-8&q=卫衣&callback=cb
这里大概解释一下url地址吧。
URL的结构：
基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
这里通过前一天的学习了解了wx.request今天来用一下
上代码：
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
input:null,
ret:""
},
inputBtn: function(e){
this.setData({
input:e.detail.value
})
},
sousuo:function(){
var that = this;
var input = this.data.input;
wx.request({
url: 'http://suggest.taobao.com/sug',
data:{
code:'utf-8',
q: input,
callback:'cb'
},
header: {
'content-type': 'application/x-www-form-urlencoded; charset=utf-8'
},
success(res) {
console.log(res.data);
that.setData({
ret:res.data
})
}
})
}
})
这里要注意的一点：
- 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
- 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string
所以我这里使用了application/x-www-form-urlencoded，如果不使用的话，传参的时候会出现数据（data）无法成功附着在url后面进而导致无法构成正确的请求的问题。简单的说就是json格式的data无法直接拼接在url之后，所以会出现返回参数异常的情况。
大家可以参照这个代码去尝试一下别的api。
效果图
对了，这里要注意一下，因为我们没注册域名（上一节中有提到），所以需要打开不校验域名这个功能，因为小程序对域名使用这块把控比较严格，但是测试的话，就先关闭这里进行测试，更加方便一些，正式上线时需要去注册域名（上一节的某个文档中有讲到）
修改不校验域名
有兴趣的同学还可以把结果整理一下，用更好看的方式打印出来，我这里就不做修改了~
扫描二维码关注公众号，回复：
5238691 查看本文章
好了今天就到这里吧！