微信小程序小程序与服务端的http通信

2024-12-05 约 683 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=109464100

【微信小程序】小程序与服务端的http通信

文章目录

搭建服务端

npm install -save-dev express

// server.js
const express = require("express");
const server = express();

server.use("/test",function(req,res){
    const obj = {
        foo:"hello",
        bar:"world"
    }
    res.end(JSON.stringify(obj));
})
server.use("/",function(req,res){
    res.end("<h1>hello world</h1>");
})

server.listen(3000,function(){
    console.log("listening on *:3000");
})

node server.js 启动服务器，浏览器便可访问网址 http://localhost:3000/ 。

小程序

<!-- index.wxml -->
<view>
    <button bind:tap="handleClick">click me</button>
</view>

// index.js
Page({
    handleClick:function(){
        wx.request({
            url:"http://localhost:3000/test",
            success:function(res){
                const {data} = res;
                console.log(data);
            }
        })
    }
})

点击 click me ，出现如下错误警告：

解决方法是，设置>项目设置>勾选“不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”。

点击 click me ，控制台打印出响应数据。

小程序与服务端通信

get请求

小程序向服务端发送数据

小程序向服务端发送数据，有两种方式。

第一种：数据以查询字符串的形式放在url中

// index.js
Page({
    handleClick:function(){
        wx.request({
            url:"http://localhost:3000/test?id=1&version=1.0.0",
            success:function(res){
                const {data} = res;
                console.log(data);
            }
        })
    }
})

第二种：数据放到 data 字段中

// index.js
Page({
    handleClick:function(){
        wx.request({
            url:"http://localhost:3000/test",
            data:{
                id:1,
                version:"1.0.0"
            },
            success:function(res){
                const {data} = res;
                console.log(data);
            }
        })
    }
})

服务端接收小程序发送过来的数据

服务端通过 req.query 获取小程序发送过来的数据

// server.js
const express = require("express");
const server = express();

server.use("/test",function(req,res){
    const {id,version} = req.query;
    console.log("id:"+id+",version:"+version);
    const obj = {
        foo:"hello",
        bar:"world"
    }
    res.end(JSON.stringify(obj));
})
server.use("/",function(req,res){
    res.end("<h1>hello world</h1>");
})

server.listen(3000,function(){
    console.log("listening on *:3000");
})

post请求

小程序向服务端发送数据

// index.js
Page({
    handleClick:function(){
        wx.request({
            url:"http://localhost:3000/test",
            method:"post",
            header:{"content-type":"application/json"},
            data:{
                foo:{
                    idx:1,
                    title:"hello"
                },
                bar:{
                    idx:2,
                    title:"world"
                }
            },
            success:function(res){
                const {data} = res;
                console.log(data);
            }
        })
    }
})

服务端接收小程序发送过来的数据

npm install --save-dev body-parser

// server.js
const express = require("express");
const server = express();
const bodyParser = require("body-parser");
server.use(bodyParser.json());
server.use("/test",function(req,res){
    const {foo,bar} = req.body;
    console.log("foo",foo);
    console.log("bar",bar);
    const obj = {
        foo:"hello",
        bar:"world"
    }
    res.end(JSON.stringify(obj));
})
server.use("/",function(req,res){
    res.end("<h1>hello world</h1>");
})

server.listen(3000,function(){
    console.log("listening on *:3000");
})

请求前后的状态处理

success
只要服务器返回响应，无论http状态码是多少都会进入success回调
fail
接口调用失败的回调函数
complete
接口调用结束的回调函数，无论调用成功或失败都会执行

// index.js
var hasClick = false;
Page({
    handleClick:function(){
        if(hasClick) return;
        hasClick = true;
        wx.showLoading();

        wx.request({
            url:"http://localhost:3000/test",
            method:"post",
            header:{"content-type":"application/json"},
            data:{
                foo:{
                    idx:1,
                    title:"hello"
                },
                bar:{
                    idx:2,
                    title:"world"
                }
            },
            success:function(res){
                if(res.statusCode === 200){
                    console.log(res.data);
                }
            },
            fail:function(){
                wx.showToast({
                    title:"系统错误",
                    icon:"none",
                    duration:1000
                })
            },
            complete:function(){
                wx.hideLoading();
                hasClick = false;
            }
        })
    }
})

// server.js
const express = require("express");
const server = express();
const bodyParser = require("body-parser");
server.use(bodyParser.json());
server.use("/test",function(req,res){
    const {foo,bar} = req.body;
    console.log("foo",foo);
    console.log("bar",bar);
    const obj = {
        foo:"hello",
        bar:"world"
    }
    setTimeout(function(){
        res.end(JSON.stringify(obj));
    },500)
})
server.use("/",function(req,res){
    res.end("<h1>hello world</h1>");
})

server.listen(3000,function(){
    console.log("listening on *:3000");
})