微信小程序--服务器数据交互

最新推荐文章于 2024-09-16 05:45:54 发布

河里的草

最新推荐文章于 2024-09-16 05:45:54 发布

阅读量2.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：前端

本文链接：https://blog.csdn.net/W_yichenyang/article/details/118877424

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中实现表单数据收集，通过wx.request发送到本地服务器，并在服务器窗口显示。包括app.json、index.json、index.wxml和index.js的编写，以及如何配置本地Node.js服务器进行数据接收和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过收集用户填写的表单信息提交给服务器。在窗口显示中能够看到提交的信息。

小程序：

服务器窗口：

代码结构：

编写app.json设置index页面-->编写index.json设置导航栏的标题文字和背景颜色-->编写index.wxml设置表单结构-->编写index.js设置表单的提交事件（wx.request()请求网络连接）-->设置本地服务器监听
页面结构：

编写app.json

{

  "pages": [

    "pages/index/index"

  ],

  "sitemapLocation": "sitemap.json"

}

编写index.json

{

"navigationBarTitleText": "调查问卷",

"navigationBarTextStyle": "white"

}

编写index.wxml

<view>

  <form bindsubmit="onSubmit">

    <view>

      <text>姓名：</text>

      <input type="text" name="name" placeholder="请输入文字"/>

    </view>

    <view>

      <text>性别：</text>

      <radio-group name="radioGroup">

        <radio checked="checked" value="nan">男</radio>

        <radio value="nv">女</radio>

      </radio-group>

    </view>

    <view>

      <checkbox-group name="checkboxGroup">

      <checkbox checked="checked" value="html">HTML</checkbox>

      <checkbox checked="checked" value="css">CSS</checkbox>

      <checkbox value="javascript">JavaScript</checkbox>

    </checkbox-group>

    </view>

    <view>

      <text>您的意见：</text>

      <input type="text" name="text" />

    </view>

    <button form-type="submit">提交</button>

  </form>

</view>

编写index.js

Page({

  onSubmit:(e)=>{

    wx.request({

      method:'post',

      url:'http://127.0.0.1:3000/',

      data:e.detail.value,

      success:res=>{

        console.log(res);

      }

    })

  }

})

设置本地服务器监听：

在微信开发者工具的右上角的详情中选中不校验合法域名选项，之后开始配置本地服务器。

安装Node.js服务器-->安装后按Win+R进入窗口-->node -v查看是否安装成功-->新建一个空白目录作为项目目录并在窗口中切换到该目录-->npm init -y（初始化项目并创建package.json）-->npm install express --save（安装Express框架）-->npm install nodemon -g （安装nodemon监控文件修改）-->在服务器目录下创建index.js文件并编写-->nodemon index.js（启动服务器查看是否安装成功）

服务器目录的index.js文件：

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)
})
//监听3000端口
app.listen(3000,()=>{
   console.log('server running ');
})

窗口显示服务器收到的信息：

小程序控制台显示服务器的响应信息：