跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 工具系统 > 防关联工具 > 微信小程序【从入门到精通】——服务器的数据交互

微信小程序【从入门到精通】——服务器的数据交互

时间:2024-04-17 19:35:33 来源:网络cs 作者:胡椒 栏目:防关联工具 阅读:

标签: 服务  数据  交互  精通  程序  入门 

在这里插入图片描述


👨‍💻个人主页:@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏:微信小程序开发

⭐🅰⭐

请添加图片描述


文章目录

⭐🅰⭐⭐前言⭐🎶(==1==) 微信小程序调查问卷的制作🐤 编写表单页面:🐤wxss 美化表单页面 🎶(==2==) 服务器的数据交互配置🦖进入cmd配置演示:🦖搭建一个监听3000端口的HTTP服务器:🦖 结果未显示的解决方法🦖成功效果展示图:结束语🥇


⭐前言⭐

小程序前端和后端服务器之间进行数据的传输和交换


🎶(1) 微信小程序调查问卷的制作


🐤 编写表单页面:

🐛在微信开发者工具中创建一个新项目,然后在项目中创建 pages/index/index页面,在该页面的index.wxml 文件中编写调查问卷的表单,具体代码如下:

<view class="container"><form bindsubmit="submit"><view><text>姓名:</text><input nam="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>

在上述代码中,radio-group组件表示将其包裹的所有元素当成一个单选框组,组内只能有一个元素可以被选中;同样组件表示将其包裹的所有元素当成一个复选框组。

🐤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)  }})  }})

🦖 结果未显示的解决方法

在这里插入图片描述

🦖成功效果展示图:

在这里插入图片描述

结束语🥇

以上就是微信小程序之服务器的数据交互
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

本文链接:https://www.kjpai.cn/news/2024-04-17/159876.html,文章来源:网络cs,作者:胡椒,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论