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

在这里插入图片描述


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

👨‍💻 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)
  }
})
  }
})

🦖 结果未显示的解决方法

在这里插入图片描述

🦖成功效果展示图:

在这里插入图片描述

结束语🥇

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506605.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【设计】6种ID生成策略描述,优点 ,缺点 ,适用场景

1.数据库自增ID 描述 自增Id是在设计表时将id字段的值设置为自增的形式&#xff0c;这样当插入一行数据时无 需指定id会自动根据前一字段的Id值1进行填充 优点 主键自动增长&#xff0c;不用手工设值、数字型&#xff0c;占用空间小、检索非常有利、有顺序&#xff0c;不会…

08、JS实现:数组两数之和算法的两种解决方案(一步一步剖析,很详细)

数组两数之和的算法 Ⅰ、数组两数之和算法的方案一&#xff1a;1、题目描述&#xff1a;2、解题思路&#xff1a;3、实现代码&#xff1a; Ⅱ、数组两数之和算法的方案二&#xff1a;1、实现代码&#xff1a; Ⅲ、小结&#xff1a; Ⅰ、数组两数之和算法的方案一&#xff1a; …

51单片机学习笔记11 使用DS18B20温度传感器

51单片机学习笔记11 使用DS18B20温度传感器 一、DS18B20简介1. 主要特点2. 工作原理3. 引脚说明4. ROM 二、1-wire协议简介1. 总线结构&#xff1a;2. 通信方式&#xff1a;3. 数据传输&#xff1a;4. 设备识别&#xff1a;5. 供电方式&#xff1a;6. 应用场景&#xff1a;7. 优…

vue页面实现旋转饼图

一、示例图片 二、参考 3D饼图-半透明 - ECharts图表集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com 三、实现 1、自定义组件RotatingPieChart.vue <template><div>【旋转饼图】</div><div ref"chart" class"chart-c…

C语言单链表的窗口化操作

#include <stdio.h> #include <stdlib.h>// 定义链表的节点结构 struct Node {int data;struct Node* next; };// 初始化链表 void initialize(struct Node** head) {*head NULL; }// 在链表末尾插入节点 void insert(struct Node** head, int value) {// 创建新节…

基于BEV的自动驾驶会颠覆现有的自动驾驶架构吗

基于BEV的自动驾驶会颠覆现有的自动驾驶架构吗 引言 很多人都有这样的疑问–基于BEV(Birds Eye View)的自动驾驶方案是什么&#xff1f;这个问题&#xff0c;目前学术界还没有统一的定义&#xff0c;但从我的开发经验上&#xff0c;尝试做一个解释&#xff1a;以鸟瞰视角为基础…

Web框架开发-Form组件和ajax实现注册

一、注册相关的知识点 1、Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面建一个forms.py的文件来存放 2、局部钩子函数 1 2 3 4 5 6 7 # 局部钩子函数 def clean_username(self): userna…

《QT实用小工具·六》代码行数统计工具

1、概述 源码放在文章末尾 该项目实现了对不同编程语言文件的代码行数的统计 统计的内容包含&#xff1a; 1、代码行数 2、注释行数 3、空白行数 下面是demo演示&#xff1a; 项目部分代码如下所示&#xff1a; #pragma execution_character_set("utf-8")#inclu…

区块链食品溯源案例实现(一)

引言&#xff1a; 食品安全问题一直是社会关注的热点&#xff0c;而食品溯源作为解决食品安全问题的重要手段&#xff0c;其重要性不言而喻。传统的食品溯源系统往往存在数据易被篡改、信息不透明等问题&#xff0c;而区块链技术的引入&#xff0c;为食品溯源带来了革命性的变革…

【ProComponents】解决 ProTable 中 params 参数改变,request 函数未触发问题

文章目录 先建议自查下官方文档&#xff0c;了解params和request直接的关系 确定params绑定的参数是否改变&#xff0c;例如 user_name 参数 import { ProTable, WxIcon } from /components; import { getSearchParams } from ice; import { useEffect, useMemo, useRef, useS…

智慧公厕是什么?智慧公厕的主要功能、特点?

智慧公厕&#xff0c;顾名思义&#xff0c;是指应用了智能科技的公共厕所&#xff0c;旨在提供更加便捷、舒适、智能化的卫生服务。相比传统的公厕&#xff0c;智慧公厕不仅拥有更加智能化的设备&#xff0c;还配备了远程监控与管理系统&#xff0c;以及节能环保技术&#xff0…

优化页面加载时间:改善用户体验的关键

✨✨ 祝屏幕前的您天天开心&#xff0c;每天都有好运相伴。我们一起加油&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一、为什么页面加载时间重要&#xff1f; 二、如何减少页面加载时间&#xff1f; …

SiLM824x系列SiLM8244 配置为高、低边驱动 支持死区可编程,隔离双通道门级驱动器

SiLM824x系列SiLM8244是一款具有不同配置的隔离双通道门极驱动器。SiLM8244配置为高、低边驱动&#xff0c;SiLM8244可提供4A的输出源电流和6A的灌电流能力&#xff0c;并且其驱动输出电压可以支持到33V。支持死区可编程&#xff0c;通过调整DT脚外部的电阻大小&#xff0c;调整…

基于单片机汽车超声波防盗系统设计

**单片机设计介绍&#xff0c;基于单片机汽车超声波防盗系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机汽车超声波防盗系统设计概要主要涉及利用超声波传感器和单片机技术来实现汽车的安全防盗功能。以下是对…

注册接口和前置SQL及数据生成及封装

注册接口 演示注册接口的三步操作&#xff1a;【注册流程逻辑】 第一步&#xff1a;发送注册短信验证码接口请求 请求方法&#xff1a; put 请求地址&#xff1a;http://shop.lemonban.com:8107/user/sendRegisterSms 请求参数&#xff1a;{“mobile”:“13422337766”} 请求头…

【面试专题】Mybatis高频面试题

一、介绍下MyBatis中的工作原理 1。介绍MyBatis的基本情况&#xff1a;ORM 2。原理&#xff1a; MyBatis框架的初始化操作处理SQL请求的流程 1.系统启动的时候会加载解析全局配置文件和对应映射文件。加载解析的相关信息存储在 Configuration 对象 Testpublic void test1(…

C++算法补充---STL

这里写目录标题 CSTL容器字符串函数(string容器函数)字符串转字符 算法交换函数拿到容器或者数组的第一个最大&#xff08;小&#xff09;值元素的下标或者值排序函数求字符数组的有效长度atoi函数&#xff08;将字符串类型的数字转为真正的int型数字&#xff09;string转字符 …

STM32八种I/O口模式

STM32八种I/O口模式 文章目录 STM32八种I/O口模式前言一、stm32八种I/O类型二、区别1.模拟输入2.浮空输入3.上拉输入4.下拉输入5.推挽输出6.开漏输出7.复用推挽输出8.复用推挽输出 总结 前言 作为两年嵌入式软件攻城狮&#xff0c;还没仔细去理解过STM32的GPIO的八种使用模式&…

企业招聘,应用MBTI来做人才测评招聘测评

每年的校招季都是企业争抢优秀应届毕业生人才的忙碌季。只有精准识人用人&#xff0c;才能不断为企业注入新鲜活力和青春智慧。但是随着毕业生数量越来越多&#xff0c;企业如何在招聘中精准发现自己最需要的人才&#xff0c;成为摆在人力资源部门的大难题。人才测评是各企业都…

springboot在线学习做题答题统计系统-可视化分析系统

系统阐述的是使用可视化的学习系统的设计与实现&#xff0c;对于java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计&#xff0c;描述&#xff0c;实现和分析与测试方面来表明开发的过程。开发中使用了 springboot框架和MySql数据库技术搭建系统的整体架构。…