个人主页:@开发者-曼亿点
hallo 欢迎 点赞 收藏⭐ 留言 加关注✅!
本文由 曼亿点 原创
收录于专栏:微信小程序开发
⭐⭐
—
文章目录
⭐⭐⭐前言⭐(==1==) 微信小程序调查问卷的制作 编写表单页面:wxss 美化表单页面
(==2==) 服务器的数据交互配置練进入cmd配置演示:練搭建一个监听3000端口的HTTP服务器:練 结果未显示的解决方法練成功效果展示图:结束语磊
⭐前言⭐
小程序前端和后端服务器之间进行数据的传输和交换
(1) 微信小程序调查问卷的制作
编写表单页面:
在微信开发者工具中创建一个新项目,然后在项目中创建 pages/index/index页面,在该页面的index.wxml 文件中编写调查问卷的表单,具体代码如下:
在上述代码中,radio-group组件表示将其包裹的所有元素当成一个单选框组,组内只能有一个元素可以被选中;同样组件表示将其包裹的所有元素当成一个复选框组。组件的作用类似于 HTML中的同名标签用于单击文本时也可以被选中对应的单选框或复选框。在和标签中value 属性表示该项选中时提交的值,checked 属性表示该项为选中状态。
wxss 美化表单页面
pages/index/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;
border: 2rpx solid #ccc;
}
在上述代码中,通过 display:block 将标签设为块元素,用于使单选框和复框中的每一项都单独占一行。
pages/index/index.json 文件中设置导航栏标题,具体代码如下 定义一组数组:
{
"usingComponents": {
},
"navigationBarTitleText": "调查问卷"
}
練 运行结果的显示:
(2) 服务器的数据交互配置
将用户提交的表单提交到服务器,可以通过小程序中的网络 APwx.request()来实现。需要注意的是,对于正式上线的项目,小程序要求服务器域名必须在小程序管理后台中添加,域名必须经过ICP备案,且只支持 HTTPS和WSS协议 对于开发人员来说,为了方便学习,可以在微信开发者工具中关闭这些验证,从而利用本地服务器来测试网络功能。单击工具栏中的详情按钮,选中“不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS 证书”的选项即可。 接下来在本地搭建一个HTTP服务器,本任务选择使用node.js进行搭建;将 node.j安装成功后。
nodejs安装步案: 官网下载:nodejs 1.进入cmd;切换到D:盘:cdWeb-test;如果报错需要配置环境变量 2.在用户变呈添加 NODE PAIH 值为安装路径:D:Program Files\nodejs 在path中添加%NODEPATH%; 执行npm-v没问题代表执行成功 3.npminit-y 之后会自动生成package.json可重文件 4.安装Express框架,用于创建HIP服务器。Npm install express -save (npm insta -g npm@9.6.1不成功替换这个 安装nodemon监控文件npm install nodemon -q(npm install -g nodemon 替换换安装方式) 5.创理indexis文件 6.运行nodemonindex.js打印提示语句即表示成功
練进入cmd配置演示:
1.npm-v命令的输入 2.npminit-y命令的输入 3.npm install nodemon -q 命令的输入
注意:进入cmd是以管理员身份进入
練搭建一个监听3000端口的HTTP服务器:
启动服务器,在命令提示符中输入:nodemon index.js 若看到 server running at http://127.0.0.1:3000,表示启动成功。
練将服务器搭建完成后,在小程序pages/index/index.js文件中编写表单提交的事件处理函数,利用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)
}
})
}
})
練 结果未显示的解决方法
練成功效果展示图:
结束语磊
以上就是微信小程序之服务器的数据交互 持续更新微信小程序教程,欢迎大家订阅系列专栏微信小程序 你们的支持就是曼亿点创作的动力
参考链接
发表评论