微信小程序开发之——调查问卷-服务器数据交互(2.2.3)

一 概述

• 小程序与服务器交互说明
• 利用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：服务器的响应状态码