小程序 - 问卷调查

 小程序交互练习 - 问卷调查小程序开发笔记

目录

问卷调查

功能描述

准备工作

创建项目

配置页面

配置导航栏

启动服务器

设置不校验合法域名

页面开发

脚本处理

页面样式

功能截图

总结

问卷调查

调查问卷又称调查表或询问表，是以问题的形式系统地记载调查内容的一种印件。传统的调查问卷是纸质的，发布和收集都不太方便，而通过微信小程序制作调查问卷，可以在短时间内快速收集反馈信息，相比纸质调查问卷极大地提高了效率。假设有一位大学老师，想通过调查问卷来了解同学们的专业技能、对开设公开课的意见等信息，从而根据同学们的建议制订下一步的教学计划。本节将会根据老师的需求，完成“调查问卷”微信小程序的制作。

功能描述

调查问卷需要填写的信息包括姓名、性别、专业技能和您的意见。其中，​“姓名”通过单行输入框填写，​“性别”通过单选框选择；​“专业技能”通过多选框选择；​“您的意见”通过多行输入框填写。页面底部的“提交”按钮用于将用户输入的信息提交。

准备工作

创建项目

创建小程序，选择测试号，不使用模版。

配置页面

项目创建完成后，在app.json文件中配置1个form页面，具体代码如下：

"pages": [
    "pages/form/form"
  ],

配置导航栏

在pages/form/form.json文件中配置页面导航栏，具体代码如下：

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar"
    },
    "navigationBarTitleText": "调查问卷"
}

启动服务器

启动nginx服务器，并准备好服务端文件，判断请求类型进行分别响应。

<?php

// 小程序 问卷调查服务端

$method = $_SERVER['REQUEST_METHOD'];
if ($method === 'GET') {
    // 返回小程序渲染信息
    $res = [
        'name' => '张三',
        'gender' => [
            ['name' => '男', 'value' => 0, 'checked' => true],
            ['name' => '女', 'value' => 1, 'checked' => false]
        ],
        'skills' => [
            ['name' => 'html', 'value' => 'html', 'checked' => true],
            ['name' => 'css', 'value' => 'css', 'checked' => false],
            ['name' => 'php', 'value' => 'html', 'checked' => true],
            ['name' => 'javascript', 'value' => 'javascript', 'checked' => false],
        ]
    ];
} else {
    // 接收小程序post数据 返回成功
    $name = $_POST['name'] ?? '';
    $gender = $_POST['gender'] ?? '0';
    $skills = $_POST['skills'] ?? [];
    $res = ['state' => 'success', 'msg' => '成功', 'data' => $_POST];
}

echo json_encode($res);

设置不校验合法域名

记得设置本地项目不校验合法域名。

页面开发

在pages/form/form.wxml文件中编辑页面内容。

具体代码如下：

<!--pages/form/form.wxml-->
<navigation-bar title="调查问卷" back="{{false}}"></navigation-bar>
<view class="container">
    <!-- 姓名区域 -->
    <view class="name">
        <text>姓名：</text>
        <input type="text" model:value="{{ name }}" />
    </view>
    <!-- 性别区域 -->
    <view class="gender">
        <text>性别：</text>
        <radio-group bindchange="radioChange">
            <label wx:for="{{ gender }}" wx:key="value">
                <radio value="{{ item.value }}" checked="{{ item.checked }}" />
                {{ item.name }}
            </label>
        </radio-group>
    </view>
    <!-- 专业技能区域 -->
    <view class="skills">
        <text>专业技能：</text>
        <checkbox-group bindchange="checkboxChange">
            <label wx:for="{{ skills }}" wx:key="value">
                <checkbox value="{{ item.value }}" checked="{{ item.checked }}" />
                {{ item.name }}
            </label>
        </checkbox-group>
    </view>
    <!-- 意见区域 -->
    <view class="proposal">
        <text>建议：</text>
        <textarea model:value="{{ opinion }}" />
    </view>
    <button type="primary" bindtap="submit">提交</button>
</view>

脚本处理

在pages/form/form.js中编辑初始数据请求并渲染页面，

具体代码如下：

// pages/form/form.js
Page({

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

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        wx.showLoading({
            title: '数据加载中'
        })
        wx.request({
            url: 'http://localhost/form/service.php',
            success: res => {
                // statusCode为HTTP状态码，200表示网络请求成功，数据获取成功
                if (res.statusCode === 200) {
                    this.setData(res.data)
                    console.log(res.data)
                } else {
                    wx.showModal({
                        title: '服务器异常'
                    })
                }
                setTimeout(() => {
                    wx.hideLoading()
                }, 500)
            },
            fail: function () {
                wx.hideLoading()
                wx.showModal({
                    title: '网络异常，无法请求服务器'
                })
            },
        })
    },
    // 单选绑定事件
    radioChange: function (e) {
        var val = e.detail.value
        this.data.gender.forEach((v) => {
            v.value === val ? v.checked = true : v.checked = false
        })
    },
    // 多选绑定事件
    checkboxChange: function (e) {
        var val = e.detail.value
        this.data.skills.forEach((v) => {
            val.includes(v.value) ? v.checked = true : v.checked = false
        })
    },
    // 提交事件
    submit: function () {
        console.log(this.data)
        wx.request({
            url: 'http://localhost/form/service.php',
            method: 'POST',
            data: this.data,
            success: res => {
                wx.showModal({
                    title: '提交完成',
                    showCancel: false
                })
            }
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

页面样式

在pages/form/form.wxss文件中编写对form.wxml页面美化的样式。

具体代码如下：

/* pages/form/form.wxss */
.container {
    margin:0;
    padding:0;
}

.name {
    margin:30rpx 0;
    display: flex;
    flex-direction: row;
}

.name input{
    width:50vw;
    height:3vh;
    border: 5rpx solid red;
}

.gender {
    margin:30rpx 0;
    display: flex;
}

.gender checkbox-group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.skills {
    margin:30rpx 0;
}

.skills checkbox-group {
    display: flex;
    flex-direction: row;
}

.proposal {
    margin:30rpx 0;
    display: flex;
    flex-direction: row;
}

.proposal textarea{
    width:50vw;
    height:20vh;
    border:5rpx solid red;
}

功能截图

总结

小程序交互练习 - 问卷调查小程序开发笔记