小程序系列课程之5网络连接获取数据

1、连接前需要做的准备

       小程序是前端，后端可以用Java、php等语言来实现，只作为前端显示的小程序，更多的还是需要后台的数据。

      首先来看一下，微信平台小程序中网络相关API的说明

https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html

重点：

   a、服务器域名配置

    每个微信小程序需要事先设置一个通讯域名，小程序可以跟指定的域名进行网络通信。包括普通的HTTPS请求（request）、上传文件（uploadFile）、下载文件（downloadFile）和WebSocket通信（connectSocket）

   b、配置流程

     

服务器域名请在 小程序后台-设置-开发设置-服务器域名 中进行配置，配置时需要注意：

• 域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议；
• 域名不能使用 IP 地址或 localhost，且不能带端口号；
• 域名必须经过 ICP 备案；
• 出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。开发者应将 appsecret 保存到后台服务器中，通过服务器使用 appsecret 获取 accesstoken，并调用相关 API。

• 对于每个接口，分别可以配置最多 20 个域名

2、如何来实现网络连接

    

a、wx.request(OBJECT)

OBJECT参数说明：

参数名	类型	必填	默认值	说明	最低版本
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer。
method	String	否	GET	（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json	如果设为json，会尝试对返回的数据做一次 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer	1.7.0
success	Function	否		收到开发者服务成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

代码实例：

team: function () {

var THIS= this;

wx.request({

url: 'http://www.xxx.com/getEye',

header:{

"Content-Type": 'application/json'

},

success: function(res){

var data=res.data;

THIS.setData({

requestData:data

});

}

});

注：通过request方法的url来访问路径，success方法返回的res,从res中获得数据res.data，声明变量来存放res.data，然后再次放入requestData中，

  补充：success方法

success返回参数说明：

参数	类型	说明	最低版本
data	Object/String/ArrayBuffer	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header	1.2.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: function(res) {
    console.log(res.data)
  }
})

b、通过http得到数据之后，在js中声明。

  

data: {

requestData:[],

},

注：由于小程序中的数据需要写在data中，所以我们要再data中声明

c、在wxml中显示js中的数据

< view wx:for= "{{requestData}}"> {{item.eyeName}} view >

注：多个数据时用到for循环来输出

d、js中的方法需要触发，可以根据自己的需要情况，通过点击事件触发，或者打开页面时加载。

  1、通过点击事件：

< button bindtap= 'team' type= 'primary'>发送请求 button >

点击事件，执行方法，获取数据。

2、打开页面时加载onload方法（通过onload方法调用生命的方法）

onLoad: function (options) {

var that= this;

that.team();

},

页面加载方法onload，直接调用team（）。

不正之处还望大家指正，共同进步。写文章的出发点是，整理自己的思路。