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

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

创始人
2025-01-17 03:03:14
0次
在这里插入图片描述
👨‍💻个人主页：@开发者-曼亿点
👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍💻 本文由曼亿点原创
👨‍💻 收录于专栏：微信小程序开发
⭐🅰⭐

— 请添加图片描述
文章目录

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

小程序前端和后端服务器之间进行数据的传输和交换
🎶（1）微信小程序调查问卷的制作

🐤 编写表单页面：

🐛在微信开发者工具中创建一个新项目，然后在项目中创建 pages/index/index页面，在该页面的index.wxml 文件中编写调查问卷的表单，具体代码如下:
   姓名：      性别      男   女      专业技能：   HTML  CSS  javascript  photoShop    你的建议：  </view> <button form-type="submit">提交 </button> </form> </view> </code></pre> <p>在上述代码中，radio-group组件表示将其包裹的所有元素当成一个单选框组，组内只能有一个元素可以被选中;同样组件表示将其包裹的所有元素当成一个复选框组。<label>组件的作用类似于 HTML中的同名标签用于单击文本时也可以被选中对应的单选框或复选框。在和标签中value 属性表示该项选中时提交的值，checked 属性表示该项为选中状态。</label></p><h4>🐤wxss 美化表单页面</h4><p>🐛 pages/index/index.wxss 文件中编写样式，具体代码如下:</p> <pre><code>.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; }  </code></pre> <p>在上述代码中，通过 display:block 将<label>标签设为块元素，用于使单选框和复框中的每一项都单独占一行。</label></p><p>🐛 pages/index/index.json 文件中设置导航栏标题，具体代码如下<br /> 定义一组数组：</p> <pre><code>{   "usingComponents": {   },   "navigationBarTitleText": "调查问卷" }  </code></pre> <p>🦖 运行结果的显示：<br /><img src="/uploadfile/202501/47439cdbf158144.png" alt="在这里插入图片描述" /></p><hr /><h3>🎶（<mark>2</mark>）<font color="green"> 服务器的数据交互配置</font></h3><hr /><ul><li>将用户提交的表单提交到服务器，可以通过小程序中的网络 APwx.request()来实现。需要注意的是，对于正式上线的项目，小程序要求服务器域名必须在小程序管理后台中添加，域名必须经过ICP备案，且只支持 HTTPS和WSS协议<br /> 对于开发人员来说，为了方便学习，可以在微信开发者工具中关闭这些验证，从而利用本地服务器来测试网络功能。单击工具栏中的详情按钮，选中“不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS 证书”的选项即可。<br /> 接下来在本地搭建一个HTTP服务器，本任务选择使用node.js进行搭建;将 node.j安装成功后。</li></ul><blockquote><p>nodejs安装步案:<br /> 官网下载：nodejs<br /> 1.进入cmd;<mark>切换到D:盘:cdWeb-test</mark>;如果报错需要配置环境变量<br /> 2.在用户变呈添加 NODE PAIH 值为安装路径:D:Program Files\nodejs<br /> 在path中添加%NODEPATH%; 执行<mark>npm-v</mark>没问题代表执行成功<br /> 3.<mark>npminit-y</mark> 之后会自动生成package.json可重文件<br /> 4.安装Express框架，用于创建HIP服务器。<mark>Npm install express -save</mark> (npm insta -g npm@9.6.1不成功替换这个<br /> 安装nodemon监控文件<mark>npm install nodemon -q</mark>(npm install -g nodemon<br /> 替换换安装方式)<br /> 5.创理indexis文件<br /> 6.运行nodemonindex.js打印提示语句即表示成功</p></blockquote><h4>🦖进入cmd配置演示：</h4><p><strong>1.npm-v命令的输入</strong><br /><img src="/uploadfile/202501/27745613e4d6dcf.png" alt="在这里插入图片描述" /><br /><strong>2.npminit-y命令的输入</strong><br /><img src="/uploadfile/202501/b767ed8bcca62c3.png" alt="在这里插入图片描述" /><br /><strong>3.npm install nodemon -q 命令的输入</strong><br /><img src="/uploadfile/202501/57ed8bd0031fd4d.png" alt="在这里插入图片描述" /></p><p><strong>👀👀<font color="red">注意：进入cmd是以管理员身份进入</font></strong></p><hr /><h4>🦖搭建一个监听3000端口的HTTP服务器：</h4><blockquote><p>启动服务器，在命令提示符中输入:nodemon index.js<br /> 若看到 <mark>server running at http://127.0.0.1:3000</mark>，表示启动成功。</p></blockquote><p><img src="/uploadfile/202501/1002505fb3aa68b.png" alt="在这里插入图片描述" /></p><ul><li>🦖将服务器搭建完成后，在小程序pages/index/index.js文件中编写表单提交的事件处理函数，利用wx.request()向本地HTTP服务器发送POST请求，具体代码如下:</li></ul> <pre><code>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)   } })   } }) </code></pre> <h4>🦖 结果未显示的解决方法</h4><p><img src="/uploadfile/202501/dc84a2a724bc84.png" alt="在这里插入图片描述" /></p><h4>🦖成功效果展示图：</h4><p><img src="/uploadfile/202501/b9986d109c25e12.png" alt="在这里插入图片描述" /></p><h5>结束语🥇</h5><p>以上就是微信小程序之服务器的数据交互<br /> 持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序<br /> 你们的支持就是曼亿点创作的动力💖💖💖<br /><img src="/uploadfile/202501/cd4d20a715d5233.gif" alt="请添加图片描述" /></p><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-f23dff6052.css" rel="stylesheet"><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet">                <!--end::Text-->
            </div>
            <!--end::Description-->
            <div class="mt-5">
                <!--关键词搜索-->
                            </div>
            <div class="mt-5">
                <p class="fc-show-prev-next">
                    <strong>上一篇：</strong><a href="/kaifa/713628.html">【Python】使用 Python 监测服务器状态并发送邮件通知</a><br>
                </p>
                <p class="fc-show-prev-next">
                    <strong>下一篇：</strong><a href="/kaifa/713633.html">Python传文件到服务器</a>                </p>
            </div>
            <!--begin::Block-->
            <div class="d-flex flex-stack mb-2 mt-10">
                <!--begin::Title-->
                <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>
                <!--end::Title-->
            </div>
            <div class="separator separator-dashed mb-9"></div>
            <!--end::Block-->
            <div class="row g-10">
               

            </div>


        </div>
        <!--end::Table widget 14-->
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-xl-4 mt-0">
        <!--begin::Chart Widget 35-->
        <div class="card card-flush h-md-100">
            <!--begin::Header-->
            <div class="card-header pt-5 ">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <!--begin::Statistics-->
                    <div class="d-flex align-items-center mb-2">
                        <!--begin::Currency-->
                        <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>
                        <!--end::Currency-->
                    </div>
                    <!--end::Statistics-->
                </h3>
                <!--end::Title-->
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-3">

                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202501/088ff4871152d3c.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714896.html" class="text-dark fw-bold text-hover-primary fs-6">2022版软件！wpk微扑克真...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">2022版软件！wpk微扑克真的有插件（软件透明挂）Wepoke插件其实确实是有挂（2024已更新）...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202408/e163e9b387cc0.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714888.html" class="text-dark fw-bold text-hover-primary fs-6">三分钟辅助器wepoke科技(...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">三分钟辅助器wepoke科技(辅助透视)解说技巧(2025已更新)(哔哩哔哩)；超受欢迎的wepok...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202412/8d9f79730e30cef.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714885.html" class="text-dark fw-bold text-hover-primary fs-6">七分钟识别！德州ai人工智能软...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">七分钟识别！德州ai人工智能软件下载（软件透明挂）WPK插件其实确实真的是有挂（2023已更新）（哔...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202501/09b396559604665.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714875.html" class="text-dark fw-bold text-hover-primary fs-6">五分钟辅助aa扑克可以调胜率(...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">【福星临门，好运相随】；五分钟辅助aa扑克可以调胜率(透明挂)实用技巧(2022已更新)(哔哩哔哩)...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202408/71ea34de9a3c82f.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714873.html" class="text-dark fw-bold text-hover-primary fs-6">六次app！德州wpk德州真的...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">六次app！德州wpk德州真的假的（软件透明挂）Wepoke小程序原来确实是有挂（2023已更新）（...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202411/12c9a6ca4d0c523.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714866.html" class="text-dark fw-bold text-hover-primary fs-6">七分钟ai代打(Wepoke机...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">亲，这款游戏可以开挂的，确实是有挂的，很多玩家在这款游戏中打牌都会发现很多用户的牌特别好，总是好牌，...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202501/8d3a7e76581c382.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714862.html" class="text-dark fw-bold text-hover-primary fs-6">1个系统德扑之星是机制(透明挂...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">您好，德扑之星这款游戏可以开挂的，确实是有挂的，需要了解加微【439369440】很多玩家在这款游戏...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202501/cb4e92ad5910e97.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714861.html" class="text-dark fw-bold text-hover-primary fs-6">9分钟中牌率！德扑ai助手软件...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">9分钟中牌率！德扑ai助手软件（软件透明挂）Wepoke实测其实真的是有挂（2023已更新）（哔哩哔...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/uploadfile/202501/81ebb121e7b3df1.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714855.html" class="text-dark fw-bold text-hover-primary fs-6">3分钟私人房(大厅wpk)透明...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">您好，大厅wpk这款游戏可以开挂的，确实是有挂的，需要了解加微【757446909】很多玩家在这款游...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202408/71ea34de9a3c82f.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/kaifa/714850.html" class="text-dark fw-bold text-hover-primary fs-6">六分钟胜率！微扑克用模拟器（软...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">六分钟胜率！微扑克用模拟器（软件透明挂）Wepoke AI其实确实是真的有挂（2025已更新）（哔哩...</span>
                    </div>
                    <!--end::Title-->
                </div>
                
            </div>
            <!--end::Body-->
        </div>
        <!--end::Chart Widget 35-->
    </div>
    <!--end::Col-->
</div>



</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
<!--begin::Footer-->
<div id="kt_app_footer" class="app-footer">
    <!--begin::Footer container-->
    <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
        <!--begin::Copyright-->
        <div class="text-dark order-2 order-md-1">
            <span class="text-muted fw-semibold me-1">2025 ©</span>
            一品科技<a href="http://www.weishitang.cn/">唯识网</a><a href="http://news.weishitang.cn/">唯识资讯</a><a href="http://www.mj938.cn/">民间生活网</a><a href="http://code.shayuweb.com/">鲨鱼编程</a>        </div>
        <!--end::Copyright-->
        <!--begin::Menu-->
        <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                        <li class="menu-item">
                <a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a>
            </li>
                        <li class="menu-item">
                <a href="/kaifa/" target="_blank" class="menu-link px-2">开发测试</a>
            </li>
                        <li class="menu-item">
                <a href="/jishu/" target="_blank" class="menu-link px-2">技术分享</a>
            </li>
                    </ul>
        <!--end::Menu-->
    </div>
    <!--end::Footer container-->
</div>
<!--end::Footer-->
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
    <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
    <span class="svg-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
            <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
        </svg>
    </span>
    <!--end::Svg Icon-->
</div>
<!--begin::Javascript-->
<script>var hostUrl = "/static/default/pc/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="/static/default/pc/plugins/global/plugins.bundle.js"></script>
<script src="/static/default/pc/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->

<!--end::Javascript-->
</body>
<!--end::Body-->
</html>
微信小程序【从入门到精通】——服务器的数据交互

⭐🅰⭐

文章目录

⭐前言⭐

🎶（1） 微信小程序调查问卷的制作

🐤 编写表单页面：

🎶（1）微信小程序调查问卷的制作
