So rufen Sie die Backend-Schnittstelle des Applets korrekt auf

Vorher geschrieben:

Als ich kürzlich lernte, wie man die Backend-Schnittstelle anfordert, hatte ich ursprünglich geplant, die im Projekt verwendete Schnittstelle anzufordern, aber das WeChat-Applet ließ dies nicht zu. Die offizielle Erinnerung ist, dass die Schnittstelle einen Domänennamen haben und registriert sein muss, aber unsere Schnittstellen sind alle IP-Adressen, sodass wir nichts dagegen tun können.

Wir müssen jedoch nicht frustriert sein, als Referenz die offizielle Anfrageschnittstellenmethode.

1. Offizielle Methode

Diese Methode ist einfach und leicht zu verstehen, aber die Codemenge ist zu groß. Ich schlage vor, sie zu kapseln.

wx.request({
  url: 'test.php', // 仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log(res.data)
  }
})

2. Kapselung der Anforderungsmethode (erstellen Sie einen neuen Ordner util, Tool-Datei, erstellen Sie die Datei request.js unter dem Ordner, der zum Kapseln der Methode verwendet wird). request.js lautet wie folgt:

var app = getApp();
//项目URL相同部分，减轻代码量，同时方便项目迁移
//这里因为我是本地调试，所以host不规范，实际上应该是你备案的域名信息
var host = 'http://localhost:8081/demo/';

/**
 * POST请求，
 * URL：接口
 * postData：参数，json类型
 * doSuccess：成功的回调函数
 * doFail：失败的回调函数
 */
function request(url, postData, doSuccess, doFail) {
  wx.request({
    //项目的真正接口，通过字符串拼接方式实现
    url: host + url,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    data: postData,
    method: 'POST',
    success: function (res) {
      //参数值为res.data,直接将返回的数据传入
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

//GET请求，不需传参，直接URL调用，
function getData(url, doSuccess, doFail) {
  wx.request({
    url: host + url,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    method: 'GET',
    success: function (res) {
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

/**
 * module.exports用来导出代码
 * js文件中通过var call = require("../util/request.js")  加载
 * 在引入引入文件的时候"  "里面的内容通过../../../这种类型，小程序的编译器会自动提示，因为你可能
 * 项目目录不止一级，不同的js文件对应的工具类的位置不一样
 */
module.exports.request = request;
module.exports.getData = getData;

(Lernvideofreigabe: Einführung zum Programmieren

3. Erstellen Sie einen Ordner auf der Seite, erstellen Sie vier Arten von Dateien, fügen Sie

1 //引入代码
 2 var call = require("../util/request.js")
 3 
 4 Page({
 5   data: {
 6     pictureList: [],
 7   },
 8   
 9   onLoad: function () {
10     var that = this;
11     //调用封装的方法，为了方便我直接在页面加载的时候执行这个方法
12     call.getData('lunbo.do', this.shuffleSuc, this.fail);
15   },
16   shuffleSuc: function (data) {
17     var that = this;
18     that.setData({
19       pictureList: data.rows
20     })
21     //我后面测试了一下，直接this.setData也可以，但是因为我在没有使用封装方法的时候
22     //this.setData报过错，不能直接用this，所以我在赋值的时候一般都会加上var that = this;
23     //这句话算是一个不是习惯的习惯
24   },
25   fail: function () {
26     console.log("失败")
27   },
28 })

in js hinzu und schreiben Sie die Rückruffunktion über diesen Methodennamen in die Seite. um sicherzustellen, dass die.setData-Methode funktioniert.

Verwandte Empfehlungen:

Mini-Tutorial zur Programmentwicklung

Das obige ist der detaillierte Inhalt vonSo rufen Sie die Backend-Schnittstelle des Applets korrekt auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!