微信小程序如何与后台api接口进行数据交互（微信小程序）
微信小程序如何与后台api接口进行数据交互
小程序如何发送 http/https 请求到后台？
小程序请求 http/https 使用 wx.request() 方法，request 的示例如下：
wx.request({
url: 'https://xxx.xxx.x.xx:8300/solar-power-monitor-1.0-SNAPSHOT/loadStation',
header: {
'content-type': 'application/json' // 默认值（固定，开发过程中还没有遇到需要修改header的）
},
//method:POST, 请求方式
success: function(res) {
console.log('电站数据请求成功:', res.data);
if (res.data && res.data.code === 200) {
var dataArray = [];
if (res.data.data) {
if (!Array.isArray(res.data.data)) {
if (typeof res.data.data === 'object') {
dataArray = [res.data.data];
} else {
console.error('无效的数据格式:', res.data.data);
wx.showToast({
title: '数据格式错误',
icon: 'none'
});
self.setData({ isLoading: false });
return;
}
} else {
dataArray = res.data.data;
}
}
var processedData = [];
for (var i = 0; i < dataArray.length; i++) {
var item = dataArray[i];
try {
processedData.push({
deviceId: self.decodeText(item.deviceId || ''),
pvDateTime: self.decodeText(item.pvDateTime || ''),
position: self.decodeText(item.position || ''),
energyToday: Number(item.energyToday || 0).toFixed(1),
energyTotal: Number(item.energyTotal || 0).toFixed(1),
inputPdcTotal: Number(item.inputPdcTotal || 0)
});
} catch (error) {
console.error('数据处理错误:', error, item);
}
}
var start = 0;
var end = self.data.pageSize;
self.setData({
stationList: processedData,
displayList: processedData.slice(start, end),
hasMore: processedData.length > end,
isLoading: false
});
if (processedData.length === 0) {
wx.showToast({
title: '暂无数据',
icon: 'none'
});
}
} else {
console.error('请求返回错误:', res.data);
wx.showToast({
title: '数据加载失败',
icon: 'none'
});
self.setData({ isLoading: false });
}
},
fail: function(err) {
console.error('电站数据请求失败:', err);
self.setData({ isLoading: false });
wx.showToast({
title: '网络请求失败',
icon: 'none'
});
}
});
},
这里 url 即请求的 api 接口地址 ，data 即传递的参数 ，header 设置请求类型 ，success 调用成功返回 res ，而api接口返回的数据存放在 res.data 中 。
data 说明：
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。
header 的 content-type 类型有两种 ：
application/x-www-form-urlencoded 和 application/json
对于 POST 方法且 header'content-type' 为 application/json 的数据，会对数据进行 JSON 序列化 ， 以 json 形式传递到后台 api ，后台 api 接收数据是接收的是 json 数据 。
对于 POST 方法且 header'content-type' 为 application/x-www-form-urlencoded 的数据，是以表单形式传递到后台 api ，后台 api 接收数据将接收具体的请求 form 表单参数 。
// 加载逆变器数据
loadInverterData: function() {
if (this.data.isLoading) return;
this.setData({ isLoading: true });
var self = this;
wx.request({
url: 'https://xxx.xxx.x.xx:8300/solar-power-monitor-1.0-SNAPSHOT/loadInverterData',
success: function(res) {
console.log('逆变器数据请求成功:', res.data);
if (res.data && res.data.code === 200 && Array.isArray(res.data.data)) {
var inverterData = res.data.data;
// 处理数据并转换为站点格式
var stationData = [];
for (var i = 0; i < inverterData.length; i++) {
var item = inverterData[i];
stationData.push({
id: item.deviceId,
name: item.position,
location: item.position,
devices: 1,
dailyPower: Number(item.energyToday || 0).toFixed(1),
totalPower: Number(item.energyTotal || 0).toFixed(1),
inputPower: Number(item.inputPdcTotal || 0),
updateTime: item.pvDateTime,
status: 'normal',
statusText: '运行正常'
});
}
// 生成地图标记点
var markers = self.generateMapMarkers(inverterData);
// 更新统计数据和地图标记
var totalDevices = stationData.length;
var onlineDevices = stationData.length;
self.setData({
stations: stationData,
displayList: stationData.slice(0, self.data.pageSize),
hasMore: stationData.length > self.data.pageSize,
isLoading: false,
'stats.onlineDevices': onlineDevices,
'stats.normalDevices': onlineDevices,
'stats.faultDevices': 0,
mapMarkers: markers
});
}
},
fail: function(err) {
console.error('逆变器数据请求失败:', err);
self.setData({ isLoading: false });
wx.showToast({
title: '数据加载失败',
icon: 'none'
});
}
});
},
// 添加生成地图标记点的方法
generateMapMarkers: function(inverterData) {
var markers = [];
// 广西武宣县中心坐标
var wuxuanCoords = {
latitude: 23.594110,
longitude: 109.663207
};
// 以武宣县为中心，将站点分布在周围
// 创建各个乡镇的大致位置 - 根据数据分布
var locationMap = {
"武宣县金鸡乡": { lat: 23.65, lng: 109.59 },
"武宣县桐岭镇": { lat: 23.58, lng: 109.57 },
"武宣县禄新镇": { lat: 23.52, lng: 109.76 },
"武宣县思灵镇": { lat: 23.45, lng: 109.67 },
"武宣县黄茆镇": { lat: 23.53, lng: 109.52 },
"武宣县二塘镇": { lat: 23.64, lng: 109.70 },
"武宣县通挽镇": { lat: 23.71, lng: 109.63 },
"武宣县东乡镇": { lat: 23.61, lng: 109.75 }
};
// 设置地图中心点为武宣县
this.setData({
mapCenter: {
longitude: wuxuanCoords.longitude,
latitude: wuxuanCoords.latitude
},
mapScale: 10 // 适当放大地图，更清晰展示武宣县区域
});
for (var i = 0; i < inverterData.length; i++) {
var item = inverterData[i];
var position = item.position;
var coords;
// 从位置名称中提取乡镇信息
var townName = null;
for (var key in locationMap) {
if (position.includes(key) || position.includes(key.substring(2))) {
townName = key;
break;
}
}
// 如果找到匹配的乡镇，使用其坐标，否则在武宣县周围随机分布
if (townName && locationMap[townName]) {
coords = locationMap[townName];
} else {
// 在武宣县周围随机分布（±0.05度范围内）
coords = {
lat: wuxuanCoords.latitude + (Math.random() * 0.1 - 0.05),
lng: wuxuanCoords.longitude + (Math.random() * 0.1 - 0.05)
};
}
markers.push({
id: i,
latitude: coords.lat,
longitude: coords.lng,
width: 30,
height: 30,
callout: {
content: item.position,
padding: 5,
borderRadius: 5,
bgColor: '#ffffff',
display: 'ALWAYS'
}
});
}
return markers;
},
// 添加地图标记点点击事件处理
onMarkerTap: function(e) {
var markerId = e.markerId;
var station = this.data.stations[markerId];
if (station) {
wx.showToast({
title: `${station.name}\n今日发电量: ${station.dailyPower}kWh`,
icon: 'none',
duration: 2000
});
}
},
// 加载更多数据
loadMore: function() {
if (!this.data.hasMore || this.data.isLoading) return;
this.setData({ isLoading: true });
var nextPage = this.data.currentPage + 1;
var start = (nextPage - 1) * this.data.pageSize;
var end = start + this.data.pageSize;
var newItems = this.data.stations.slice(start, end);
var currentList = this.data.displayList;
var self = this;
setTimeout(function() {
var updatedList = currentList.concat(newItems);
self.setData({
displayList: updatedList,
currentPage: nextPage,
hasMore: end < self.data.stations.length,
isLoading: false
});
}, 500);
},
在微信小程序中，下拉刷新、加载更多的操作实现起来很简单 ，但是必须掌握， 在 android 和 ios 开发中，很多同学学习下拉刷新、加载更多都无从下手 ，使用的第三方代码库也是参差不齐 。
这一点我认为小程序开发为大家节省了很多时间 。
后台 api 接口如何接收参数？如何返回 json ？
路由的使用我们之前已经讲过，这里不再讲解 ，不理解的同学前往历史文章中查看 。
获取小程序提交的参数，若小程序发送的form表单参数，则使用 request.form.get() 方法获取 ，注意理解这两种接收参数的形式 ，在与其人合作开发的时候 ，按照要求使用 。
浙公网安备 33010602011771号