微信小程序+Node服务器

秒速五厘米 2022-11-05 13:51 176阅读 0赞

> 将数据提交到服务器，通过小程序中的网络API wx.request()实现
> 
> 对于正式上线的项目，小程序要求服务器域名必须在小程序管理后台中添加
> 
> 域名必须经过ICP备案，且只支持HTTPS和WSS协议。
> 
> 需要在本地搭建一个HTTP服务器，选择Node.js进行搭建
> 
> 安装成功后，创建一个空目录作为项目目录，在目录下执行命令

1、初始化项目，自动创建package.json配置文件

> sudo npm init -y

2、安装Express框架，快速搭建HTTP服务器

> sudo npm install express --save
> 
> or
> 
> npm install express --save
> 
> or
> 
> cnpm insatll express --save
> 
> 后期安装request模块
> 
> cnpm install request --save

3、安装nodemon监控文件修改

> sudo npm install nodemon -g
> 
> or
> 
> npm install -g nodemon
> 
> or
> 
> cnpm install nodemon -g

4、执行命令以后，node项目目录下创建index.js文件

搭建一个监听3000端口的HTTP服务器，支持POST请求

用于将收到的数据输出到命令行

用于将收到的数据响应给客户端

const express = require('express')
    const bodyParser = require('body-parser')
    const app = express()
    app.use(bodyParser.json())
    
    // 处理POST请求
    app.post('/', (req, res) => {
        console.log(req.body)
        res.json(req.body)
    })
    
    var data = {
      name: '张三',
      gender: [
        { name: '男', value: '0', checked: true },
        { name: '女', value: '1', checked: false }
      ],
      skills: [
        { name: 'HTML', value: 'html', checked: true },
        { name: 'CSS', value: 'css', checked: true },
        { name: 'JavaScript', value: 'js', checked: false },
        { name: 'Photoshop', value: 'ps', checked: false },
      ],
      opinion: '测试'
    }
    
    // 处理GET请求
    app.get('/', (req, res) => {
      res.json(data)
    })
    
    // 监听3000端口
    app.listen(3000, () => {
      console.log('server running at http://127.0.0.1:3000')
    })

5、启动

> nodemon index.js
> 
> 直接在 VsCode 右键运行 Run Code 也可以

6、利用wx.request()向本地HTTP服务器发送POST请求

method表示请求方式

url表示服务器接口地址

data表示请求的参数

success表示接口调用成功的回调函数

其参数res表示服务器响应信息

//生命周期函数--监听页面加载
    onLoad: function(options) {
    /*
      var that = this
      wx.request({
        url: 'http://127.0.0.1:3000/',
        success: function (res) {
          that.setData(res.data)
        }
    	})
    */
      wx.request({
        url: 'http://127.0.0.1:3000/',
        success: res => {
          console.log(res.data)
          this.setData(res.data)
        }
      })
    },
    submit: function(e) {
      wx.request({
        method: 'post',
        url: 'http://127.0.0.1:3000/',
        data: e.detail.value,
        success: function(res) {
        	console.log(res)
        }
      })
    }