一 概述
- 小程序与服务器交互说明
- 利用Express框架,快速搭建HTTP服务器
- 小程序端编写代码响应HTTP请求
二 小程序与服务器交互说明
将用户提交的表单提交到服务器,可以通过小程序中的网络API wx.request()来实现。需要注意的是,对于正式上线的项目,小程序要求服务器域名必须在小程序管理后台中添加,域名必须经过ICP备案,且只支持HTTPS和WSS协议
对于开发人员来说,为了方便学习,可以在微信开发者工具中关闭这些验证,从而利用本地网络来测试网络功能。单击工具栏中的详情按钮,选中下图所示的选项:
三 利用Express框架,快速搭建HTTP服务器
3.1 搭建说明
本节利用Node.js+express在本地搭建一个HTTP服务器
- Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用
- 将Node.js安装成功后,创建一个空目录作为项目目录,稍后执行搭建命令
3.2 搭建过程
-
初始化项目,将会自动创建package.json配置文件
1
npm init -y
-
安装Express框架,用于快速搭建HTTP服务器
1
npm install express --save
-
安装nodemon监控文件修改
1
npm install nodemon -g
3.3 编写接口文件,并启动服务
-
在项目目录下创建index.js文件,编写代码
1 2 3 4 5 6 7 8 9 10 11 12 13
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) }) //监听300接口 app.listen(3000,()=>{ console.log('server running at http://localhost:3000') })
上述代码用于搭建一个监听3000端口的HTTP服务器,支持POST请求,
console.log
用于将接收到的数据输出到命令行,res.json
用于将收到的数据响应给客户端 -
在命令行执行如下命令,启动服务器
1
nodemon index.js
上述命令执行后,如果看到server running at http://127.0.0.1:3000,表示启动成功
四 小程序端编写代码响应HTTP请求
4.1 搭建说明
将服务器搭建完成后,在小程序pages/index/index.js文件中编写表单提交的事件处理函数,利用wx.request()向本地HTTP服务器发送POST请求
4.2 小程序端POST请求代码
1 2 3 4 5 6 7 8 9 10 11 12 | submit:function(e) { wx.request({ method:'post', url: 'http://localhost:3000/', data:e.detail.value, success:function(res) { console.log(res) } }) } |
4.3 小程序代码说明
- method:表示请求方法
- url:表示服务器接口地址
- data:表示请求的参数
- success:表示接口调用成功的回调函数,其参数res表示服务器响应信息
4.4 点击按钮,提交请求
- data:服务器的响应数据
- errorMsg:成功或失败的信息
- header:服务器的响应头
- statusCode:服务器的响应状态码