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 | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
代码实例:
注:通过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中声明。
注:多个数据时用到for循环来输出
d、js中的方法需要触发,可以根据自己的需要情况,通过点击事件触发,或者打开页面时加载。
1、通过点击事件:
2、打开页面时加载onload方法(通过onload方法调用生命的方法)
页面加载方法onload,直接调用team()。
不正之处还望大家指正,共同进步。写文章的出发点是,整理自己的思路。