对于新手的我来说，花了我太多时间才把调查问卷搞明白！！！

一.官网下载node并检查是否安装成功

1.官网下载

进入网址https://nodejs.org/en/download/

下载安装自己电脑所对应版本（安装时选项为默认即可）

2.检查是否安装成功

（1）windows+r 然后输入cmd 回车

（2）输入node -v 回车如果出现版本号则安装成功

二.环境配置

1.新建文件夹

2.搭建环境

windows+r 然后输入cmd 回车

进入该目录后

初始化项目

npm init -y

安装express框架

npm install express --save

安装nodemon

npm install nodemon -g

3.在server文件夹下创建index.js文件写入代码

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())//处理POST请求
app.get('/',(req,res)=>{console.log(req.body)res.json(req.body)
})//监听3000端口
app.listen(3000,()=>{console.log('server running at http://127.0.0.1:3000')
})

保存后在命令窗口输入

nodemon index.js

执行成功会显示server running at http://127.0.0.1:3000

三.新建小程序

编写index.wxml

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

编写index.wxss

.container{padding-top: 30rpx;margin: 10rpx 50rpx;
}
view{margin-bottom: 20rpx;
}
input{width: 600rpx;margin-top: 20rpx;border-bottom: 2px solid #363636;
}
label{display: block;margin: 8rpx;
}
textarea{width: 600rpx;height: 150rpx;margin-top: 10rpx;border: #363636 solid 2rpx;
}
button{background-color: aqua;margin-top: 30rpx;
}

编写index.js

Page({
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:'测试'
},
submit:function(e){wx.request({method:'post',url: 'http://127.0.0.1:3000/',data:e.detail.value,success:function(res){console.log(res)}})
},
onLoad:function(options){wx.request({url:'http://127.0.0.1:3000/',success:res=>{this.setData(res.data)}})
}
})

编写index.json

{"navigationBarTitleText": "调查问卷","navigationBarTextStyle": "black"
}

最后将部分内容添加到server下的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:false},{name:'女',value:'1',checked:false},],skills:[{name:'HTML',value:'html',checked:false},{name:'CSS',value:'cs',checked:false},{name:'JavaScript',value:'js',checked:false},{name:'PS',value:'ps',checked:false},],opinion:'测试',};
app.get('/',(req,res)=>{res.json(data);});
//监听3000端口
app.listen(3000,()=>{console.log('server running at http://127.0.0.1:3000');
});

四.注意事项

1.如果更改index.js里面的内容会自动重新启动

2.在详情->本地设置中勾选不校验合法域名

3.每次电脑开机后使用此小程序必须启动服务器

进入server目录输入:

nodemon index.js

启动后不能关闭此窗口

4.127.0.0.1为ip地址 3000为端口

此处也可用ipv4地址 (ipv4是ip地址的版本号)

查看ipv4地址的方法：

windows+r 输入cmd 回车

输入：ipconfig

电脑用的有线网络就用上面那个

无线网络就用下面那个

5.真机调试时的网络问题

(1).电脑和手机连接同一个wifi

(2).电脑开热点手机连接

(3).手机开热点电脑连接

微信小程序调查问卷避坑相关推荐

微信小程序调查问卷案例
微信小程序调查问卷案例通过开发一个"调查问卷"的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中.参考界面如图1所示. 步 ...
（已解决）微信小程序调查问卷所有题放在一个页面上
最近做一个调查问卷的小程序改需求时遇到了一个问题: 要将所有单选题放在一个页面上,我用了双层循环嵌套将每道题的下标以及每个题对应的选项下标循环出来但是每个单选的radioChange绑定事件都是同一 ...
微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...
微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑如何使用第二个坑如何使用微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
微信小程序做问卷——前端部分(生成问卷)
文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码 que ...
微信小程序做问卷——前端部分(回答问卷)
文章目录实现效果实现单选部分多选部分问答部分全部代码 item.wxml item.wxss item.js 生成问卷的部分参考微信小程序做问卷--前端部分(生成问卷) 实现效果界面如 ...
会员卡券领取小程序_微信小程序会员卡开发跳坑
微信小程序会员卡开发跳坑最近看好多人问,小程序里面怎么显示会员卡,然客户领取后,去对应店铺核销. 本身以为会很简单,最后费了好大心思才找到对应文档. 会员卡是见过微信最差的文档了,没说明参数从哪里获 ...
微信小程序开发的那些坑，你踩过吗？
微信小程序开发的那些坑,你踩过吗? textarea组件value不显示 textarea组件默认值绑定data数据真机不显示问题 |?链接使用.switchTab跳转到tabbar页传递参数问题 ...
微信小程序等待几秒、_微信小程序—setTimeout定时器的坑
背景实验室需要将项目的app搬到微信的小程序上,终于知道为什么程序员是手艺人了,只要有需求,就要想方设法去填充这种需求,去年是小程序的元年了可以说,去年冬天一个叫跳一跳的小程序游戏出现在我的微信中, ...

微信小程序调查问卷避坑

一.官网下载node并检查是否安装成功

1.官网下载

2.检查是否安装成功

二.环境配置

1.新建文件夹

2.搭建环境

3.在server文件夹下创建index.js文件写入代码

三.新建小程序

四.注意事项

微信小程序调查问卷避坑相关推荐

最新文章

热门文章

微信小程序调查问卷避坑

一.官网下载node并检查是否安装成功

1.官网下载

2.检查是否安装成功

二.环境配置

1.新建文件夹

2.搭建环境

3.在server文件夹下创建index.js文件 写入代码

三.新建小程序

四.注意事项

微信小程序调查问卷避坑相关推荐

最新文章

热门文章

3.在server文件夹下创建index.js文件写入代码