微信小程序入门4--网络请求数据显示

湖畔科技

小程序调用wx.request(Object object)方法发起网络请求，域名必须使用HTTPS/WSS协议。默认超时时间和最大超时时间都是60S。

官方示例代码：

1. wx.request({
   
2.   url: 'test.php', //仅为示例，并非真实的接口地址
   
3.   data: {
   
4.     x: '',
   
5.     y: ''
   
6.   },
   
7.   header: {
   
8.     'content-type': 'application/json' // 默认值
   
9.   },
   
10.   success (res) {
    
11.     console.log(res.data)
    
12.   }
    
13. })
    

复制代码

在微信开发者工具中，可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。

下面是举例说明通过微信小程序网络请求查看湖畔科技的demo设备数据。

打开建立的pages/demo/demo.wxml 将以下代码完全替换。

1. <view>时间戳：{{timestamp}}</view>
   
2. <view>设备数据：{{value}}</view>

复制代码

打开建立的pages/demo/demo.js将以下代码完全替换。

1. Page({
   
2.   data: {
   
3.     'timestamp': null, //初始值
   
4.     'value':null,
   
5.   },
   
6.   onLoad: function (options) {
   
7.     var that = this;//把this对象复制到临时变量that
   
8.     const wxreq = wx.request({
   
9.       url: 'https://www.nnhpiot.com/v1/datapoints/device/86/sensor/83',
   
10.       data: {},
    
11.       success: function (res) {
    
12.         console.log(res);
    
13.         that.setData({
    
14.           timestamp: res.data.timestamp,
    
15.           value: res.data.value
    
16.           });//和页面进行绑定可以动态的渲染到页面
    
17.       },
    
18.       fail: function (res) {
    
19.         console.log(res);
    
20.       }
    
21.     })
    
22.   },
    
23. })

复制代码

通过URL访问所需链接；通过回调函数success，查看开发者服务器返回的数据(data)；通过console.log(res)打印；通过that.setData( )进行赋值；完成动态页面渲染。