小程序案例：调查问卷

案例分析

调查问卷效果展示：

实现步骤：

1)填写表单数据；

2)提交发送到服务器；

3)后台数据渲染到页面

前端页面编写

WXML

<view class="container">
  <form bindsubmit="submit">
    <view>
      <text>姓名：</text>
      <input name="name" 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>
      </checkbox-group>
    </view>
    <view>
      <text>您的意见：</text>
      <textarea name="opinion" value="测试" />
    </view>
    <button form-type="submit">提交</button>
  </form>
</view>

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;
}

在前端页面渲染

WXML

修改pages/index/index.wxml文件中<form>标签内的代码，

<view class="container">
  <form bindsubmit="submit">
    <view>
      <text>姓名：</text>
      <input name="name" value="{{name}}" />
    </view>
    <view>
      <text>性别：</text>
      <radio-group name="gender">
        <label wx:for="{{gender}}" wx:key="value">
          <radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
        </label>
      </radio-group>
    </view>
    <view>
      <text>专业技能：</text>
      <checkbox-group name="skills">
        <label wx:for="{{skills}}" wx:key="value">
          <checkbox value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
        </label>
      </checkbox-group>
    </view>
    <view>
      <text>您的意见：</text>
      <textarea name="opinion" value="{{opinion}}" />
    </view>
    <button form-type="submit">提交</button>
  </form>
</view>

值得一提的是，由于wx.request()参数中的method属性的默认值为GET，因此在发送GET请求时可以省略method属性。

WXSS

/* pages/test4/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;
}

JS

  data: {
    name: '张三',
    gender: [
      { name: '男', value: '0', checked: true },
      { name: '女', value: '1', checked: false }
    ],
    skills: [
      { name: 'HTML', value: 'html', checked: true },
      { name: 'CSS', value: 'css', checked: true },
      { name: 'JavaScript', value: 'js', checked: false },
      { name: 'Photoshop', value: 'ps', checked: false },
    ],
  
  },

（以下部分先不用做）服务器配置

服务器域名

提交到服务器，可以通过小程序中的网络API wx.request()来实现，需要注意的是，

对于正式上线的项目，小程序要求服务器域名必须在管理后台添加，域名必须经过ICP备案，且只支持HTTPS和WXSS协议

开发者：可以在开发者工具中关闭这些验证，工具栏->详情

本地服务器的安装

Node.js、npm的介绍和安装

服务器数据交互

Express安装和使用流程：

1)初始化项目

2)安装Express框架

3)安装nodemon监控文件修改

4)创建服务；

5)启动服务

安装nodejs环境

下载地址 :https://nodejs.org/zh-cn/

安装验证：

在命令行中输入 node -v

C:\Users\maxin>node --version
v6.9.1

在命令行中将当前目前切换到你想存放项目的目录

C:\Users\maxin>d:

D:\>cd D:\Game\工匠工坊\2021-2022-1\文档\123\

在此目录下，初始化项目：

npm init -y

Wrote to D:\Game\工匠工坊\2021-2022-1\文档\123\package.json:

{
  "name": "123",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"

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

npm install express --save

安装nodemon监控文件修改：

npm install nodemon -g

服务器端代码编写

编写后台代码

在刚才初始化项目的那个目录（我这里是D:\Game\工匠工坊\2021-2022-1\文档\123\）

新建文件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)
})

var data = {
  name: '张三',
  gender: [
    { name: '男', value: '0', checked: true },
    { name: '女', value: '1', checked: false }
  ],
  skills: [
    { name: 'HTML', value: 'html', checked: true },
    { name: 'CSS', value: 'css', checked: true },
    { name: 'JavaScript', value: 'js', checked: false },
    { name: 'Photoshop', value: 'ps', checked: false },
  ],
  opinion: '测试'
}

// 处理GET请求
app.get('/', (req, res) => {
  res.json(data)
})

// 监听3000端口
app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})

上述代码用于搭建一个监听3000端口的HTTP服务器，支持POST请求，

第7行用于将接受到的数据输出到命令行，第8行用于将接受到的数据响应给客户端。

启动服务器

在命令符中执行：

nodemon index.js

执行上述命令，如果看到server running at http://127.0.0.1:3000 ，表示启动成功。

小程序前后台交互

请求接口获取后台数据

小程序端： index/index.js:

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    /*
    var that = this
    wx.request({
      url: 'http://127.0.0.1:3000/',
      success: function (res) {
        that.setData(res.data)
      }
    })
    */
    wx.request({
      url: 'http://127.0.0.1:3000/',
      success: res => {
        console.log(res.data)
        this.setData(res.data)
      }
    })
  },

})

在网页上显示后台数据

修改pages/index/index.wxml文件中<form>标签内的代码，

<view class="container">
  <form bindsubmit="submit">
    <view>
      <text>姓名：</text>
      <input name="name" value="{{name}}" />
    </view>
    <view>
      <text>性别：</text>
      <radio-group name="gender">
        <label wx:for="{{gender}}" wx:key="value">
          <radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
        </label>
      </radio-group>
    </view>
    <view>
      <text>专业技能：</text>
      <checkbox-group name="skills">
        <label wx:for="{{skills}}" wx:key="value">
          <checkbox value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
        </label>
      </checkbox-group>
    </view>
    <view>
      <text>您的意见：</text>
      <textarea name="opinion" value="{{opinion}}" />
    </view>
    <button form-type="submit">提交</button>
  </form>
</view>

值得一提的是，由于wx.request()参数中的method属性的默认值为GET，因此在发送GET请求时可以省略method属性。

向后台发送POST请求

利用wx.request()向本地HTTP服务器发送POST请求：

Page({
  submit: function (e) {
    wx.request({
      method: 'post',
      url: 'http://127.0.0.1:3000/',
      data: e.detail.value,
      success: function (res) {
        console.log(res)
      }
    })
  }

})

小程序案例：调查问卷

目录

案例分析

前端页面编写

WXML

WXSS

在前端页面渲染

WXML

WXSS

JS

（以下部分先不用做）服务器配置

服务器域名

本地服务器的安装

服务器数据交互

安装nodejs环境

服务器端代码编写

编写后台代码

启动服务器

小程序前后台交互

请求接口获取后台数据

在网页上显示后台数据

向后台发送POST请求

导航菜单

个人工具

命名空间

变种

视图

更多

搜索

导航

工具