微信小程序如何与服务器进行数据交互，以调查问卷来讲解

本文主要是介绍微信小程序如何与服务器进行数据交互，以调查问卷来讲解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

开发小程序除了大家能看到的客户端，前端小程序是如何与后端服务器进行数据交互的呢？

本文将通俗易懂的讲一下。这里以nodejs为例来进行讲解

1.首先要在服务器上安装nodejs服务器：

wget https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.xz    // 下载
tar xf node-v12.18.1-linux-x64.tar.xz                                   // 解压
cd node-v12.18.1-linux-x64                                              // 进入解压目录

解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以修改linux系统的环境变量（profile）来设置直接运行命令：

老规矩先备份，养成修改重要文件之前先备份的好习惯。

cp /etc/profile /etc/profile.bak

然后 vim /etc/profile，在最下面添加 export PATH=$PATH: 后面跟上 node 下 bin 目录的路径

export PATH=$PATH:/root/node-v12.18.1-linux-x64/bin

立即生效

source /etc/profile
[root@localhost ~]# node -v
v12.18.1

接下来在服务器文件中找到域名目录


cd /wwwroot   //进入wwwroot目录下
mkdir index   //新建文件夹

在此目录下新建一个目录，把index.js放在这个目录下。(并且记住这个文件路径)

//nodejs源代码const express=require('express')
const bodyParser=require('body-parser')
const app=express()
app.use(bodyParser.json())app.post('/',(req,res)=>{console.log(req.body)res.json(req.body)
})app.listen(3000,()=>{console.log('server running at http:域名:3000')
})

进入服务器命令行窗口,并且进入到刚才记住的index目录下

初始化项目:

npm init -y

安装Express框架，用于快速搭建HTTP服务器:

npm install express –save

安装npm install nodemon监控文件修改:

npm install express –save

接下来就是小程序客户端的编码，源代码如下：

<!--index.wxml-->
<view class="container"><form bindsubmit="submit"><view><text>姓名：</text><input name="name" value="张三" /></view><view><text>学号：</text><input name="nunber" value="" /></view><view><text>性别：</text><radio-group name="gender"><label><radio value="0" checked />男</label><label><radio value="1" />女</label></radio-group></view><view><text>专业技能：</text><checkbox-group name="skills"><label><checkbox value="html" checked />HTML</label><label><checkbox value="css" checked />CSS</label><label><checkbox value="js" />JavaScript</label><label><checkbox value="ps" />Photoshop</label><label><checkbox value="photo" />摄影</label></checkbox-group></view><view><text>您的意见</text><textarea name="opinion" value="测试"/></view><button form-type="submit">提交</button></form></view>

//index.js
//获取应用实例
const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},submit: function(e){wx.request({method:'POST',url: 'http://域名',data:e.detail.value,success:function(res){console.log(res)}})
},})

/**index.wxss**/
.container{margin: 50rpx;}
view{margin-bottom: 30rpx;}
input{width: 600rpx;margin-top: 10rpx;border-bottom:2rpx solid #ccc;}
label{display: block;margin: 8rpx;}
textarea{width: 600rpx;height: 100rpx;margin-top: 10rpx;border: 2rpx solid #eee}

安装好这些模块后，启动服务器: