微信小程序Https请求wx.request教程

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

在一个网站里面发起https请求是很常见的，但是，由于微信小程序是腾讯内部的产品，不能直接打开一个外部的链接，例如，您在微信小程序里面无法直接打开www.phpos.net网站，但是，在做小程序开发的时候，如果想调用这个网站的一个接口，这时，如何使用？因为，微信小程序里面不能直接使用浏览器，所以，只有使用腾讯给我们封装好的API wx.request(object)。

wx.request其实是腾讯封装好的一个request请求的函数，类似php语言里面的函数，在php程序里面的函数是由开发php程序的公司用c语言封装好的一个一个的函数，我们做php开发的，只需要拿过来这些函数使用即可，不需要关心函数底层代码，同样，wx.request是腾讯给我们封装好的“函数”直接拿过来用就行了，只要理解了这个“函数”里面的参数的使用即可。

下面我们将结合一个实例来详细分析wx.request的参数的含义以及使用，最后，我们将分别用两个实例来实践使用一下这个函数。

参数：

1）接口地址url：

微信小程序里面的数据就是由这个url来获取的，所以，这个url接口非常重要，一般这个接口url返回的是json数据格式，这样不仅处理起来方便，而且，传输安全稳定，容易保存。所以，一般的第三方提供的接口返回的数据都是以json格式形式返回的。

小程序手册上说url是开发者服务器的接口，其含义是开发者自己的服务器和调用第三方的服务器上面上的接口url。

也就是说url接口地址有两大来源分别是：开发者自己的服务器上面的接口和第三方服务器提供我们使用的接口。

可能会有问为什么会有这两个来源呢？例如，您要开发一个快递查询小程序，这时一般都会调用第三方提供的快递接口，因为，我们不可能为了开发一个小程序而去开发一套快递系统，并添加上快递数据，但是，我们又不是做快递公司的，所以，无法实时动态的获取用户的数据信息，这些信息都掌握在好些快递公司里面，所以，要获取这样的大数据，我们只能使用这些快递公司提供的接口，来获取快递的数据。

如果对于一些小数据，例如，查询唐诗宋词，我们完全可以自己创建一个网站，然后，自己开发一个接口url自己进行调用，因为，这些数据网上多的是，可以自己采集到网站，当然，如果您的流量获取不是从百度等搜索引擎而来的话，可以采集数据放到自己网站上面，然后，写一个接口在小程序里面使用。

上面介绍的是url两种接口，我们举例子也是以这两种接口来举例子。

2）请求参数data：

当我们对url进行https请求时，实际上跟在浏览器打开一个网址是一个道理，在浏览器打开网址http://www.phpos.net/index.php?id=9（此url为模拟用的），实际上是向这个域包所在的服务器发送了一个https请求，在这个请求里面使用了参数id=9，也就是请id为9的内容，这里的id=9就是这个url请求时的参数。

data值就是使用wx.request时，url里面的参数，也就是问号后面的参数。

格式：

  url:'http://www.phpos.net/index.php',
  data: {
     id: '2' ,
     name: 'lili'
  }

上面等价于：

url:'http://www.phpos.net/index.php?id=2&name=lili',

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

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

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

3) 请求的 header:

https请求的头部header是在用户打开小程序，然后，请求url时一起传到url所在的服务器时的头部信息，如果学过http协议的话，这个就好理解了。

例如，我在火狐上面打开www.phpos.net,就相当于对这个网址所在的服务器作了https请求，在请求这个网址所在的服务器时，会通过http协议把头部信息一起传递到这个网址所在的服务器，如下图所示：

请求头包括host、User-Agent、Accept、Accpt-Language、Referer等，请注意这些头部信息与您请求某个网址是不尽相同是有差别的。

在使用wx.request时，我们就可以使用header来添加请求头部信息，把请求头信息一起传递给服务器（例如，请求www.phpos.net时，就会把这个请求头发送给这网站所在的网址）。

也就是说我们请求一个网址，实际上一起跟着这个网址传递到服务器的还有“请求头”，只是我们看不到罢了，但是，实际上是发生了，如上图所示。

当请求完信息后，服务器再通过http协议把请求的信息返回给请求的用户（也就是打开网址的用户），此时，有一个“响应头”返回给用户，只是用户感觉不到看不到罢了。

从上面可以知道请求头和响应头是用户在打开一个url时，相当于向url所在的服务器发送了带有“请求头”的请求，等服务器处理完数据（例如，查询数据库数据）后，就会通过一个“响应头”把一些重要信息返回给用户，当然，用户不知道这些信息，也看不到。

请求的 header格式：

  header: {
      'content-type': 'application/json'
  },

请注意：小程序规定header中不能设置 Referer，因为，这个请求头的参数表示网址从哪里来，而在小程序里面并没有哪个网址从哪里来，只有一个接口url，所以，这个请求头的参数实际上没有什么用处，您写上也不会起作用。

4）函数success：

当一个https请求成功时，小程序就会自动触发这个返回成功信息的函数，这个函数是腾讯自己封装好的，而不是我们自己去写的。

这个函数获取的是从开发者服务器返回的数据（一般为json格式），因为，获取到的数据就是我们要渲染到小程序页面的数据，所以，这个非常重要，下面举例来说明获取到的“数据”。

示例：

  //request.wxml
    <view class="btn-area">
      <button bindtap="makeRequest" type="primary" disabled="{{buttonDisabled}}" loading="{{loading}}">request</button>
    </view>
  </view>

 //request.js
 Page({
  makeRequest: function() {
    var self = this
    wx.request({
      url:'https://www.v2ex.com/api/topics/show.json?id=520',
      data: {
        noncestr: Date.now()
      },
      success: function(result) {
        console.log('request success', result)
      }
    })
  }
})

上面我们使用url接口是：https://www.v2ex.com/api/topics/show.json?id=520

这个url接口可以返回json格式的数据，您可以直接在浏览器上面打开看一下，结果如下所示：

请求成功后获取到的数据就是success函数的参数result,打印这个数据如果如下所示：

从上图可以知道，result是一个对象，在这个对象里面有一个data数组，在这个数组里面下标为0的元素是一个对象，在这个对象里面是从接口获取到的数据。

所以，通过result.data[0]就可以获取从接口url获取到的数据了，这些数据您可以使用函数setData({...})来动态添加到小程序视图层。

5）其它两个函数fail和complete：

fail函数：如果接口调用失败的话，那么，小程序就会触发这个函数，返回错误信息。

complete函数：接口调用结束的回调函数（调用成功、失败都会执行）

使用第三方接口url示例：

//request.wxml
  <view class="page-body">
    <view class="page-body-wording">
      <text class="page-body-text">
        点击向服务器发起请求
      </text>
    </view>
    <view class="btn-area">
      <button bindtap="makeRequest" type="primary" disabled="{{buttonDisabled}}" loading="{{loading}}">request</button>
    </view>
  </view>

//request.js
Page({
  makeRequest: function() {
    var self = this

    self.setData({
      loading: true
    })
    wx.request({
     // url: requestUrl,
     url:'https://www.v2ex.com/api/topics/show.json?id=520',
      data: {
        noncestr: Date.now()
      },
      success: function(result) {
        wx.showToast({
          title: '请求成功',
          icon: 'success',
          mask: true,
          duration: duration
        })
        self.setData({
          loading:false
        })
        console.log('request success', result)
      },

      fail: function({errMsg}) {
        console.log('request fail', errMsg)
        self.setData({
          loading: false
        })
      }
    })
  }
})

开发自己的接口url

有时候我们需要自己开发一个接口，来调用我们自己的服务器上面的数据，例如，一个企业的数据，一般来说第三方不会开发这样的数据，所以，此时，企业就应当开发自己的接口，而且，开发自己的接口比使用第三方接口的例子要多很多。

下面将开发一个我们自己的接口，调取的数据是从安装在本地的织梦系统搭建的网站里面获取的数据。

我们的目标是获取网站里面的内容的id和标题，然后，把id和id对应的标题显示在小程序里面，这其实是一个简单的小程序开发，我们在小程序里面看到的数据(图片，文字，音频等）都是通过这样获取的。

接口url的php文件代码：

//phpos.php
<?php
require('./dedecms/include/common.inc.php');
$db->Execute('al','SELECT id ,title FROM `dede_archives`  order by id desc limit 0,10');
while ($row=$db->GetArray('al')) {
    $arr[]=$row;
}
echo json_encode($arr);

?>

上面是获取最新10条更新的数据接口url，返回的数据是json格式，如下所示：

[{"id":"107","title":"PHP\u6b63\u5219\u8868\u8fbe\u5f0f\u7684\u51e0\u5219\u4f7f\u7528\u6280\u5de7"},
{"id":"106","title":"{dede:\u62db\u8058\u542f\u4e8b \u6807\u9898='\u7ec7\u68a6\u5927\u5bb6\u5ead\u65b0\u5e74\u62db\u52df\u7b2c\u4e00\u6ce2'}"},
{"id":"98","title":"DedeCMS\u4ea7\u54c1\u6388\u6743\u5728\u7ebf\u8d2d\u4e70"},
{"id":"97","title":"DedeCMS \u6700\u7ec8\u7528\u6237\u6388\u6743\u534f\u8bae"},
{"id":"96","title":"\u6211\u7684\u773c\u754c-\u4e00\u4e9b\u5173\u4e8e\u82b1\u7684\u7167\u7247"},
{"id":"95","title":"\u539f\u521b\u98ce\u666f\u56fe\u7247"},
{"id":"94","title":"\u6b66\u5937\u5c71\u7684\u7f8e\u666f\u771f\u662f\u4e0d\u9519"},
{"id":"93","title":"\u6d77\u5c9b\u98ce\u5149"},
{"id":"92","title":"DedeCMS V5.6 \u5f00\u53d1\u65e5\u5fd7\u53ca\u65b0\u5efa\u8bae\u63d0\u4ea4\u8d34"},
{"id":"91","title":"DedeCMS\u4ea7\u54c1\u76f8\u5173\u622a\u56fe"}]

这样在小程序里面成功调用接口url文件phpos.php后，在函数success里面获取到的数据就是上面的最新10条数据，如下所示：

小程序里面的.wxml和.js代码分别是：

//index.wxml
<view class="container">
  <block wx:for="{{contents}}">
    <view>
      <text>{{item.id}}---{{item.title}}</text>
    </view>
  </block>
</view>

//index.js
var app = getApp()
Page({
  data: {
    contents:{}
  },

  onLoad: function (option) {
    var self = this
    wx.request({
      url: 'http://localhost/phpos.php',
      data: {},
      method: 'GET',
      success: function(res){
        // success
        self.setData({
         contents:res.data
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }
})

结果：

上面结果表示：我们成功从我们自己网站里面获取数据并显示在小程序里面了，虽然，显示的结果的排版不美观，但是，我们主要实现的是这个功能至于排版，只需要写上wxss就可以了，这里就不写样式代码了

原文地址：http://www.360doc.com/content/18/0122/17/44615940_724196623.shtml