小程序学习(2)——一言API和wx.request({})的运用

前言：

---

一开始折腾小程序的时候，突然发现了一个好玩的API，可以随机在网站推荐一句美言，我想能不能把他接入小程序里面，其实就是简单的wx.request({})运用，开始折腾。

什么是一言：

相信大家都有或曾经有过自己的摘抄本。「一言」就好似一个公开的摘抄本，我们在此记录那些让人感怀的，让人振奋的，让人感动的，让人一眼就有所感触的短句，并通过公共 API 的形式使你能够在自己的项目中调用它们。 我们希望通过一言，链接大家对各方文字的美好记忆，伴你踩碎迷茫，走过时光。

如图所示：因为只是测试，具体样式还没有美化

 

API

源地址：https://xygeng.cn/post/200.html

原文介绍了网页的接入，小程序殊途同归，一样用的是GET的获取数据

如果是微信小程序开发可以接下来看：

介绍

小程序的后台获取数据方式get/post具体函数格式如下：wx.request({})

先介绍wx.request({})各个参数，具体参数可以参考小程序开发官方文档

参数

Object object

属性	类型	默认值	是否必填	说明 支持版本
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer 。content-type 默认为 application/json
method	string	GET	否	HTTP 请求方法
dataType	string	json	否	返回的数据格式
responseType	string	text	否	响应的数据类型
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.dataType 的合法值

值	说明
json	返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse
其他	不对返回的内容进行 JSON.parse

object.responseType 的合法值

值	说明
text	响应的数据为文本
arraybuffer	响应的数据为 ArrayBuffer

object.success 回调函数

Object res

属性	类型	说明
data	string/Object/Arraybuffer	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header

返回值

RequestTask

支持版本 >= 1.4.0

请求任务对象

data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

• 对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化

• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

示例代码

wx.request({  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {    x: '',    y: ''
  },  
  header: {    'content-type': 'application/json' // 默认值
  },
  success (res) {    console.log(res.data)
  }
})

 

---

以上是wx.request(){}具体参数

我们接入的api比较简单，用不上这么多参数简单的几个参数，直接贴上js代码

var app = getApp()
Page({
data: {
moto:[],//参数
},
onLoad: function () {
this.getdata();

},

//自定义参数名字
getdata: function() {
var that = this;
wx.request({
url: 'https://api.xygeng.cn/one',
method: 'GET',
dataType: 'json',
success: function(res) {
that.setData({
moto: res.data
})
},
fail: function(err) {}, //请求失败
complete: function() {} //请求完成后执行的函数
})
},
})

 

前台显示代码，比较简单，就一行，wxml代码贴上

<view bindtap='getdata'>{{moto}}</view>