微信小程序如何與服務器進行數據交互，以調查問卷來說解

開發小程序除了你們能看到的客戶端，前端小程序是如何與後端服務器進行數據交互的呢？

本文將通俗易懂的講一下。這裏以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.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.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}

 

 

 

 

安裝好這些模塊後，啓動服務器:

nodemon index.js

若是看到server running at http://域名，表示啓動成功

 

成功測試截圖