微信小程序如何连接后端

Question

做了体格微信小程序，用node.js作为后端编写。
小程序前端如何访问到后端的接口？

Answer 1

引自免费微信小程序：皆我百晓生

1. 配置后端接口

首先，你需要在后端编写接口，并在后端服务运行的地址上设置允许跨域访问（Access-Control-Allow-Origin）。

例如，你可以在后端的node.js中使用express框架来编写接口，并设置跨域访问：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); // 设置允许跨域的域名，*代表所有域名
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/api/data', (req, res) => {
  // 处理前端请求并返回数据
  const data = { message: 'Hello from backend!' };
  res.json(data);
});

app.listen(3000, () => {
  console.log('Backend server is running on port 3000');
});

这样，你的node.js后端就会监听3000端口，并在访问/api/data时返回一个包含消息的JSON数据。

2. 小程序前端访问接口

在小程序前端中，你可以使用wx.request来发送请求到后端接口。

例如，你可以在小程序的页面中添加以下代码来发送GET请求并处理返回的数据：

wx.request({
  url: 'http://localhost:3000/api/data', // 后端接口地址
  method: 'GET',
  success: function(res) {
    console.log(res.data); // 输出后端返回的数据
    // 在这里处理后端返回的数据
  },
  fail: function(err) {
    console.error(err); // 输出请求失败的错误信息
    // 在这里处理请求失败的情况
  }
});

这样，当小程序页面加载时，它会发送GET请求到后端接口，并在成功时打印后端返回的数据。你可以根据需求在success回调函数中处理后端返回的数据。

注意，上述代码中的http://localhost:3000/api/data是后端接口的地址，你需要将其替换为你实际的后端地址。

此外，请确保你的小程序项目在"微信开发者工具"中的"详情"里，将"不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书"的勾选状态取消，以便能够访问到你的后端接口。

希望以上信息能够帮助你顺利连接小程序前端和后端接口。如有任何疑问，请随时提问。