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