微信小程序+Node服务器

将数据提交到服务器,通过小程序中的网络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)
    }
  })
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网小队

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值