微信小程序之网络请求数据显示

LCIOT

一、跳过域名校检
在微信开发者工具中，可以临时开启开发环境不校验请求域名、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, returnArr);
25.  }
26.
27.  return format;
28.}

打开建立的wxml 文件将以下代码完全替换。
1.<view>时间：{{times}}</view>
2.<view>设备数据：{{value}}</view>

打开建立的js文件将以下代码完全替换。
1. 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( )进行赋值；完成动态页面渲染。

以上就是微信小程序网络请求数据显示的全部步骤，感谢观看！

河河河

这种贴不封号？连水贴都不是