1、wx.request

微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下:
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
method: "POST",
data: {
param1: '',
param2: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data)
}
})
14
 
1
wx.request({ 
2
    url: 'test.php', //仅为示例,并非真实的接口地址
3
    method: "POST",
4
    data: {
5
        param1: '',
6
        param2: ''
7
    },
8
    header: {
9
        'content-type': 'application/json' // 默认值
10
    },
11
    success: function (res) {
12
        console.log(res.data)
13
    }
14
})

值得注意的有如下几点
  • 希望在获取数据之后进行的操作,切记一定要写在success回调中,因为wx.request是异步方法
  • wx.request发送出去的请求头中referer属性是微信设置好的且无法修改(这意味着如果有服务器屏蔽了微信的referer,你无力改变)
  • wx.request只能请求https的url

2、来张妹纸图

现在,我们结合wx.request和第三方的一个api接口,来返回一些妹纸的图片,显示在小程序里。先提供一下接口的说明:
https://gank.io/api/random/data/福利/{count}

请求:GET
参数:count(返回的图片数量)
x
 
1
https://gank.io/api/random/data/福利/{count}
2

3
请求:GET
4
参数:count(返回的图片数量)

还是接着我们之前的例子,在welcome页面直接增加一个image组件:
 
我们提前设置好了动态绑定的参数名称,这意味着我们在welcome.js中的data中要将图片的url传给参数imgUrl:
 
上面这个过程注意两点:
  • this的指向性问题,也是JS中经典的容易犯错的引用问题,注意处理
  • wx.request返回的json数据中,会将接口返回的数据封装在re.data属性中

编译一下吧,看看结果:
 
欸,不错哦~

下个章节,我们实际做个简单的刷新看妹纸养眼的小程序。

微信小程序开发 [05] wx.request发送请求和妹纸图的更多相关文章

  1. 【微信小程序】调用wx.request接口需要注意的问题

    写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...

  2. 微信小程序开发——使用mock数据模拟api请求

    前言: 微信小程序开发中,后端提供了接口设计文档,前端可以先mock数据模拟api请求进行开发调试,而且可以根据需要设计mock文件的格式和内容,这样在后端接口开发完成之前,前端可以最大限度的完成前端 ...

  3. 微信小程序开发调试阶段不校验请求域名

    在微信小程序开发官网上有说明: 在开发者工具的右上角有详情选项,可以勾选不校验合法域名,之后就可以与本地ip进行通信了!

  4. 关于微信小程序遇到的wx.request({})问题

    域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...

  5. 一,前端---关于微信小程序遇到的wx.request({})问题

    域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...

  6. 微信小程序:使用wx.request()请求后台接收不到参数

    问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'applic ...

  7. 微信小程序 在使用wx.request时显示加载中

    微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...

  8. 微信小程序--后台交互/wx.request({})方法/渲染页面方法 解析

    小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) data: { logs:[] }, onLoad:function(){ this.getdata(); } ...

  9. 微信小程序填坑,wx.request() 内调用setData()方法错误的解决办法

    再方法内添加一行代码,把this对象赋值给给一个变量供success()方法内调用 核心代码: var v = this.txt; 完整示例 abc:function(e){//该函数用于和后台交互 ...

随机推荐

  1. 设计模式(18)--Memento(备忘录模式)--行为型

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.模式定义: 备忘录模式又叫做快照模式(Snapshot Pattern)或Token模式,是对象的行为模式. ...

  2. 数据库查询字段为null 时,返回0

    oracle select nvl(字段名,0) from 表名; sqlserver select isnull(字段名,0) from 表名; mysql select ifnull(字段名,0) ...

  3. PHP-隐藏手机号中间四位

    substr_replace('手机号', '****', 3, 4);

  4. hadoop在zookeeper上的高可用HA

    (参考文章:https://www.linuxprobe.com/hadoop-high-available.html) 一.技术背景 影响HDFS集群不可用主要包括以下两种情况:一是NameNode ...

  5. [基础知识]在PeopleSoft中SMTP设置不生效如何查找问题

    在PeopleSoft中如果配置了工作流邮件或者标准页面的通知,都是可以发送出邮件的,这些邮件都是由SMTP服务器发送.SMTP需要在APP服务器和PRCS服务器中配置. 如果无法从PeopleSof ...

  6. Ubuntu16.04.2 LTS下使用编译安装程序(使用configure、make、 make install)

    以安装vim为例. (vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面). 1.获取源文件 首先进入/usr/local下(只是为了方便处理安装文件,位置随意) 用git ...

  7. 免费的局域网协作办公方式—onlyoffice文档协作

    局域网内想享受协作办公的乐趣,请移步到这里按照步骤部署.https://blog.csdn.net/hotqin888/article/details/79337881 它是免费开源的,经过作者的一些 ...

  8. apache web服务器安全配置

    尽管现在购买的云服务器很多都有一键web环境安装包,但是如果是自己配置web环境则需要对各种安全配置十分了解,今天我们就来尝试这做好web服务器安全配置.这里的配置不尽完善,若有纰漏之处还望指出. 修 ...

  9. bootstrap使用基础

    1.为了适应跨屏浏览,Bootstrap为单元格预定义了4种class ,分别对应于手机.ipad.笔记本电脑.台式机. <div class="row"> <d ...

  10. wordpress使用七牛云加速

    一.准备工作. wordpress搭建的网站 七牛云账号 二.简要步骤 1.wordpress安装七牛云插件. WordPress七牛镜像存储插件已经被WordPress官方收录,可以直接在wordp ...