欢迎登录

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

:2018-10-14    :760 次   :2846 字   

前言:

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


什么是一言:

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


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


image.png


一言API


源地址:https://xygeng.cn/?id=170   


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


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


介绍


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

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

参数

Object object

属性类型默认值是否必填说明
支持版本
urlstring
开发者服务器接口地址
datastring/object/ArrayBuffer
请求的参数
headerObject

设置请求的 header,header 中不能设置 Referer

content-type 默认为 application/json

methodstringGETHTTP 请求方法
dataTypestringjson返回的数据格式
responseTypestringtext响应的数据类型
successfunction
接口调用成功的回调函数
failfunction
接口调用失败的回调函数
completefunction
接口调用结束的回调函数(调用成功、失败都会执行)


object.dataType 的合法值

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


object.responseType 的合法值

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


object.success 回调函数

Object res

属性类型说明
datastring/Object/Arraybuffer开发者服务器返回的数据
statusCodenumber开发者服务器返回的 HTTP 状态码
headerObject开发者服务器返回的 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/dailywd/api/get.php',
method: 'GET',
dataType: 'json',
success: function(res) {
that.setData({
moto: res.data
})
},
fail: function(err) {}, //请求失败
complete: function() {} //请求完成后执行的函数
})
},
})

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

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

image.png

后台显示:

image.png


    暂无评论,快来抢沙发吧!
×