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. SpringBoot简介、特点

    ##SpringBoot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包.SpringBoot整合了所有的框架,并通过一行简单的main方法启动应用. ##微框 ...

  2. VMware Linux虚拟机与WIN7操作系统共享无线网络上网配置

    Linux虚拟机与WIN7操作系统共享无线网络上网配置 by:授客 QQ:1033553122 测试环境: CentOS-7-x86_64-DVD-1503-01.iso Vmware 9 实践操作: ...

  3. VMware Linux下拖拽补丁vmtools的安装和卸载

    Linux下拖拽补丁vmtools的安装和卸载 by:授客 QQ:1033553122 Vmware 8.0.4为例子 步骤1.VM->Install Vmware Tools... 步骤2.查 ...

  4. She Left Her Shoes

    She left her shoes, she took everything else, her toothbrush, her clothes, and even that stupid litt ...

  5. Sql server bulk insert

    Bulk Insert Sql server 的bulk insert语句可以高效的导入大数据量的平面文件(txt,csv文件)到数据库的一张表中,其用法如下: bulk insert test fr ...

  6. 参观阿拉斯加进行产品培训[My representation]

    I  suggest to visit Alaska for product training. Alaska is one of the best places to spend a trainin ...

  7. PgSQL基础之 pgsql与mysql的简单区别

    1.支持的booloan类型的值 mysql并不支持boolean类型,即便当我们创建了boolean的字段属性之后,mysql会自动将其转化为tinyint(1)类型.当插入“true”的时候,其值 ...

  8. 3.2Python的循环结构语句:

    返回总目录 目录: 1.while循环 2.for循环 3.循环保留字:break与continue 循环总览: (一)while循环: (1)单个while循环: while 条件:     循环体 ...

  9. 抓取js动态生成的数据分析案例

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  10. APP性能测试,网易Emmagee工具

    APK地址:https://github.com/NetEase/Emmagee/releases/download/V1.2.1/Emmagee-1.2.1.apk 开源代码github地址:htt ...