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

这篇具有很好参考价值的文章主要介绍了微信小程序【从入门到精通】——服务器的数据交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云


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

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

👨‍💻 本文由 曼亿点 原创

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

⭐🅰⭐

微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云



⭐前言⭐

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


🎶(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": "调查问卷"
}

🦖 运行结果的显示:
微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云


🎶(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命令的输入
微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云
2.npminit-y命令的输入
微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云
3.npm install nodemon -q 命令的输入
微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云

👀👀注意:进入cmd是以管理员身份进入


🦖搭建一个监听3000端口的HTTP服务器:

启动服务器,在命令提示符中输入:nodemon index.js
若看到 server running at http://127.0.0.1:3000,表示启动成功。

微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云

  • 🦖将服务器搭建完成后,在小程序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)
  }
})
  }
})

🦖 结果未显示的解决方法

微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云

🦖成功效果展示图:

微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云

结束语🥇

以上就是微信小程序之服务器的数据交互
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
微信小程序服务器数据交互,微信小程序开发,微信小程序,服务器,notepad++,CSDN开发云文章来源地址https://www.toymoban.com/news/detail-851688.html

到了这里,关于微信小程序【从入门到精通】——服务器的数据交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序上传头像的临时路径,持久化保存到服务器与数据库(nodejs后台开发)

    从微信小程序中返回的用户头像临时地址 http://tmp/H0GP7BW5HTQs846c0d9deef32d42f2203340efc4a5c3.jpeg 会失效,且只能一段时间内在微信访问,并且无法在公网访问用户头像临时地址avatarUrl。 所以需要将临时地址avatarUrl转成实际可用的地址保存到mysql数据库的wxusers表的avatarUrl列中,同时将

    2024年02月14日
    浏览(60)
  • 微信小程序配置服务器域名

    在开发微信小程序实现导出功能时用到了微信小程序的API--downloadFile,发现在开发工具上正常,但是在真机上不起作用,后来发现是这个api需要在后台配置服务器域名,下面是配置域名的步骤。 1、登录微信公众平台:https://mp.weixin.qq.com/ 2、在开发目录下选择开发管理中的开发

    2024年02月11日
    浏览(45)
  • 微信小程序如何配置服务器域名

    要在微信小程序中配置服务器域名,您需要按照以下步骤进行操作: 登录微信公众平台(https://mp.weixin.qq.com/)。 进入小程序管理后台。 在左侧菜单中选择\\\"开发\\\",然后选择\\\"开发设置\\\"。 在\\\"服务器域名\\\"一栏中,点击\\\"修改\\\"按钮。 在\\\"request 合法域名\\\"一栏中,点击\\\"+\\\"按钮添加您

    2024年02月21日
    浏览(45)
  • 微信小程序请求本地服务器测试成功

    在测试阶段,微信小程序是可以请求本地服务器的,这里有如下好处: 1.测试不需要经过网络,暂时可以不配置域名等,服务器也不用上线 2.可以看到小程序和服务器的打印,方便调试和找出问题 3.服务器不用频繁修改上架,更改非常方便 1.勾选上不检测域名: 2.修改请求网

    2024年02月10日
    浏览(68)
  • 13、微信小程序:上传图片到服务器

    1、上传图片到服务器,有两个步骤:     1.1  拿到可上传的图片 wx.chooseImage     1.2  将图片上传到服务器  wx.uploadFile 2、代码实现 button bindtap=\\\"upload\\\"点击上传/button image src=\\\"{{imgPath}}\\\" mode=\\\"\\\"/

    2024年02月12日
    浏览(50)
  • 微信小程序请求服务器地址报错

    {\\\"errno\\\":600009,\\\"errMsg\\\":\\\"request:fail invalid url \\\"/home/swiperdata\\\"\\\"} 1、基地址没写 2、基地址或者接口地址没写对,可能多了空格或者字符等 3、使用了第三方封装的请求方法没有在main.js引入注册 注意: 需在根目录的main.js 的new Vue()和app.$mount()之间引入此文件。 在new Vue()后面的原因是,

    2024年02月11日
    浏览(43)
  • 服务器更换SSL证书,微信小程序报600001

    某政府单位项目的SSL证书一直使用免费华为SSL证书,一年到期,需要重新申请。因此,服务器需要更换SSL证书。 在nginx组件中成功替换到最新证书并重启,测试使用浏览器访问系统一切正常,成功使用了最新证书进行TLS握手协议。但是,存在部分用户在使用小程序时会出现问

    2023年04月21日
    浏览(48)
  • 微信小程序之本地网络服务器配置

    我们开发小程序的时候一般都会用到后台服务,为了调试方便都希望可以使用本地服务器来进行网络通讯,本篇就介绍一下该如何配置,其实非常简单: 1. 去你的小程序管理平台-开发管理-开发设置,添加网络中真实可用的https域名 ,比如https://www.baidu.com(但是不推荐用百度

    2024年02月11日
    浏览(53)
  • 微信小程序搭载node.js服务器(简)

    此文章用到的是用node.js搭载的服务器! 检测电脑是否安装node.js,可以用【 cmd/Power shell 】命令检测,也可以用【git-bash】,这里就用git-bash进行演示,没有git-bash可以安装一下。 如果有对应的版本号即为已经安装完成! 未安装的附上链接了: node.js安装 : Download | Node.js Gi

    2023年04月08日
    浏览(50)
  • 微信小程序获取头像昵称 保存头像到服务器

    微信官方推荐的替代做法: 头像昵称填写 | 微信开放文档 (qq.com)  wxml js wxss

    2024年02月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包