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

本文内容简单,文中附上源代码。

在微信开发者工具中,可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书 选项,跳过服务器域名的校验。
在这里插入图片描述
小程序调用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.	})

下面是举例说明通过微信小程序网络请求查看湖畔科技的demo设备数据。
打开utils文件的utils.js文件,为了方便可以将以下代码完全替换,用于时间戳的转换。
在这里插入图片描述

1.	 const formatNumber = n => {
2.	  n = n.toString()
3.	  return n[1] ? n : '0' + n
4.	}
5.	
6.	module.exports = {
7.	  formatTime: formatTime
8.	}
9.	
10.	function formatTime(number, format) {
11.	  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
12.	  var returnArr = [];
13.	
14.	  var date = new Date(number * 1000);
15.	  returnArr.push(date.getFullYear());
16.	  returnArr.push(formatNumber(date.getMonth() + 1));
17.	  returnArr.push(formatNumber(date.getDate()));
18.	
19.	  returnArr.push(formatNumber(date.getHours()));
20.	  returnArr.push(formatNumber(date.getMinutes()));
21.	  returnArr.push(formatNumber(date.getSeconds()));
22.	
23.	  for (var i in returnArr) {
24.	    format = format.replace(formateArr[i], returnArr[i]);
25.	  }
26.	
27.	  return format;
28.	}

打开建立的wxml 文件,添加如下代码。

1.	<view>时间:{
   
   {times}}</view>
2.	<view>设备数据:{
   
   {value}}</view>

打开建立的js文件,添加如下代码。

const time = require('../../utils/util.js');  //引用utils.js进行时间戳转换
2.	  Page({
3.		  data: {
4.		    'times': null, //初始值
5.		    'value': null,
6.		  },
7.		  onLoad: function(options) {
8.		    var that = this; //把this对象复制到临时变量that
9.		    const wxreq = wx.request({
10.	        url: 'https://www.nnhpiot.com/v1/datapoints/device/86/sensor/83',  //请求数据的链接
11.		      data: {},
12.		      success: function(res) {
13.		        console.log(res);
14.		        that.setData({
15.	          times: time.formatTime(parseInt(res.data.timestamp), 'Y/M/D h:m:s'), //时间戳转换
16.		        value: res.data.value
17.		        }); //和页面进行绑定可以动态的渲染到页面
18.		      },
19.		      fail: function(res) {
20.		        console.log(res);
21.		      }
22.		    })
23.		  },
24.		})

通过URL访问所需链接;通过回调函数success,查看开发者服务器返回的数据(data);通过console.log(res)打印;通过that.setData( )进行赋值;完成动态页面渲染。
在这里插入图片描述
以上就是微信小程序网络请求数据显示的全部步骤,感谢您的观看!

おすすめ

転載: blog.csdn.net/hao1__/article/details/113961402