本文内容简单,文中附上源代码。
在微信开发者工具中,可以临时开启开发环境不校验请求域名、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( )进行赋值;完成动态页面渲染。
以上就是微信小程序网络请求数据显示的全部步骤,感谢您的观看!