一 概述

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

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

  1. 微信小程序开发之——调查问卷-案例分析(2.2.1)

    一 概述 本节通过开发一个"调查问卷"的案例来学习常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器,或者从服务器获取数据后显示在表单中 二 原型图 2.1 原型图 2 ...

  2. 微信小程序开发之——调查问卷-编写表单页面(2.2.2)

    一 概述 本节介绍表单页面相关的内容: 编写调查问卷表单页面 编写调查问卷样式 设置导航栏标题 二 编写调查问卷表单页面 在微信开发者工具中创建一个新项目,然后在项目中创建pages/index/in ...

  3. 微信小程序链接后台接口，进行数据交互

    微信小程序链接后台接口,进行数据交互 新手学微信小程序,设计页面还可以,有没有让进行数据交互的时候就不知道怎么弄了,下面就记录一下我是怎么进行交互的 1.登陆微信小程序平台,进入首页,点击开发设置 2 ...

  4. 微信小程序开发（六）——服务器

    目录 建立一个简单的本地服务器 现在可以使用VS Code,如果没有就在终端中操作 微信小程序调用网易云API 服务器百度网盘提取地址: 建立一个简单的本地服务器 新建一个文件夹fuwu 然后在该页面 ...

  5. 微信小程序做一个调查问卷

    用微信小程序做了一个调查问卷 功能描述: 用户一天只能进行一次问卷调查=>用户登录功能 获取用户意见信息 题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项 多选题选择个数设置 ...

  6. 微信小程序做一个调查问卷（二）

    即将不定期的开放代码 核心代码呈现 源码下载 在微信小程序如何展示富文本编辑器设置的内容 多使用缓存技术,防止过多无效的访问 题目分为单选题.多选题.简答题 设置有其他选项,可进行手动输入选项 多选题 ...

  7. 微信小程序开发之——用户登录-开放数据校验与解密(6)

    一 概述 小程序端获取到的用户信息通过wx.request发送给开发者服务器 开发者服务器无法辨别数据的真伪(如发送虚假用户信息) 小程序提供了开发数据的校验和解密机制 二 获取用户信息 2.1 代码 ...

  8. 四十九、微信小程序开发页面样式WXSS和页面交互JS

    @Author:Runsen 一天不写博客,混身不爽.今天继续复习小程序中的WXSS和JS. 文章目录 WXSS JS WXSS WXSS(WeiXin Style Sheets)是一套样式语言,用于 ...

  9. 微信小程序 通过nodeJs操作MySQL进行数据交互

    下面的操作,我是通过phpStudy和Navicat for MySQL搭建起来的开发环境 我提供一个Navicat for MySQL的安装和破解方法:https://blog.csdn.net/m ...

最新文章

  1. 解决“无法找到运行搜索助理需要的一个文件”
  2. 物流管理论文实现：基于遗传算法的带时间窗和载重约束的车辆路径优化
  3. ios学习Day3xiawu
  4. 【文章】孝心无价 作者：毕淑敏
  5. c语言数据结构字符串匹配,C语言数据结构之模式匹配字符串定位问题
  6. 解决ASP.NET在IE10中Session丢失问题
  7. 68个Python内置函数详解，进阶必备!
  8. 截至20161212中国公司在美上市名单
  9. 【AI视野·今日CV 计算机视觉论文速览 第226期】Thu, 24 Jun 2021
  10. 服务器防火墙的作用是什么？如何设置？
  11. 塑料壳上下扣合的卡扣设计_塑胶件结构设计之止口与扣位的设计
  12. 【记录问题】vs2017连接sql2008数据库时显示该文件正在使用
  13. 《孙悟空是个好员工》对《心经》的注解（摘抄）
  14. java一个月学习成果
  15. 使用 Window print() 方法 实现打印文件
  16. 基于嵌入式系统的电动汽车交流充电桩设计
  17. R语言（三）——多重共线性情况（岭回归、[适应性]lasso回归、偏最小二乘回归）
  18. 到底什么是“云手机”？
  19. 基于上证金融数据的情感分析和走势预测 代码+数据
  20. csp怎么给线条描边_CSP优动漫PAINT中基本功能详细介绍

热门文章

  1. 【css画圆圈用线连接】
  2. adb连接华为手机-菜鸡教程
  3. DIN EN ISO 4589-2塑料 用氧指数法测定燃烧行为 第2 部分：室温试验
  4. C语言定积分 tan(x) e^x
  5. 职业价值观确认表? What is really important to you?
  6. Activiti7工作流入门和基本使用-工作流引擎介绍
  7. ddr老化测试_【鼎阳硬件智库原创︱DDR 】 DDR硬件调试篇：DDR硬件设计调试测试 之二...
  8. Python数据分析处理（一）——处理剔除异常值 以全国数学建模（CUMCM 2011 A题）为实例
  9. PHP程序员面试经历分享，做好开发软件工作要做到这几点
  10. jsp onpropertychange