【微信小程序开发】小程序前后端交互--发送网络请求实战解析

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：微信小程序开发零基础教学，难点与应用实战总结
景天的主页：景天科技苑

文章目录

  • 发送网络请求
    • 1.微信发送网络请求
    • 2.后端接口
    • 3.发送请求
    • 4.loading提示框
    • 5.结合爬虫实战案例

发送网络请求

在之前的小程序开发章节中，全是在微信小程序端操作，没有加入后端内容。

本文将详细讲讲如何从后端获取数据，需要在微信小程序端，发送网络请求，获取数据，显示在小程序上

1.微信发送网络请求

注意：发送网络请求的域名，必须在微信公众平台配置

  • 本地环境去除，只适用于开发版和体验版

配置域名：
登录小程序后台–开发管理
必须配置在工信部备案的域名
在这里插入图片描述

未备案的域名不能填写
在这里插入图片描述

我们本地开发，不需要域名，只需要在开发者工具中，详情配置里面，勾选不校验合法域名即可
这样，开发和体验的微信号就不用域名也可以访问
在这里插入图片描述

2.后端接口

  • 使用django后端：写个接口，返回用户信息
  • 微信小程序端：发送请求，获取数据，显示在微信小程序端

视图层：

from django.shortcuts import renderfrom django.http import JsonResponseimport timeimport json
import requests# Create your views here.#写个接口，返回数据def index(request):# time.sleep(3)return JsonResponse({"name":"彭于晏","age":39,"hobby":"抽烟"})

在这里插入图片描述

url路由

from django.contrib import admin
from django.urls import pathfrom app import viewsurlpatterns = [path('admin/', admin.site.urls),path('index/', views.index),

在这里插入图片描述

浏览器访问，得到响应数据
在这里插入图片描述

3.发送请求

###js###
在这里插入图片描述

  user:{}handleLoadUser(){// 发送请求之前 loading效果wx.showLoading({title: '加载中~~',mask:true  // 显示透明蒙层，设置后，框后的按钮都不能点击了})wx.request({url: 'http://127.0.0.1:8000/index/',method:'GET',//如果是get请求，data就是请求参数，如果是post请求，data就是请求体数据data:{},header:{},success:(res)=>{//请求成功console.log("请求成功，结果为：",res.data)//将请求结果更新到页面对象user中this.setData({user:res.data})},fail:(error)=>{console.log(error)},complete:(res)=>{// 关闭加载，无论成功与否都会执行wx.hideLoading()}})},

在这里插入图片描述

##wxml###

<view>---发送网络请求-----</view>
<view>用户名：{{user.name}}</view>
<view>爱好：{{user.hobby}}</view>
<view>年龄：{{user.age}}</view>
<button type="primary" bindtap="handleLoadUser">加载用户信息</button>

在这里插入图片描述

4.loading提示框

 wx.showLoading({title: '加载中，稍后',mask:true  // 显示透明蒙层})

在这里插入图片描述

#关闭–必须手动关闭，在complete中写的，如论请求成功与否，都会执行

 wx.hideLoading()

在这里插入图片描述

模拟网络请求延迟，在后台延迟3秒再响应
在这里插入图片描述

点击加载，出现加载中模态框
在这里插入图片描述

5.结合爬虫实战案例

卖座电影网数据展示
https://m.maizuo.com/v5/#/films/nowPlaying
在这里插入图片描述

通过代码调试，得知返回的响应是在这个接口
https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=7329328
在这里插入图片描述

我们使用爬虫得到数据，拿到小程序上展示

将该页面展示到小程序上
django接口代码

#返回电影接口def films(request):cookies = {'aliyungf_tc': '3b04bdddc2fcc08a2e07b5c05804eeb7f3559c2c0c84bea844e7c501a2c93bf6','acw_tc': 'ac11000117162716286612753e74b1e14e614cc55223c8721d0381c2eba53e','co': 'mzmovie','DEVICE_ID': '17162716284574994868731905','gr_user_id': 'f9c0d6d0-e26b-44f9-be62-d939767554ff','ac641e22637cd956_gr_session_id': 'c6136a17-7e24-4344-bd43-ba4216e3a7f8','ac641e22637cd956_gr_session_id_sent_vst': 'c6136a17-7e24-4344-bd43-ba4216e3a7f8','ac641e22637cd956_gr_last_sent_sid_with_cs1': 'c6136a17-7e24-4344-bd43-ba4216e3a7f8','ac641e22637cd956_gr_last_sent_cs1': 'undefined','_bl_uid': 'g8ldjw2hfeLz4ktFwed4oL96OgzU','COOKIE_CITY_ID': '440300','COOKIE_CITY_NAME': '%E6%B7%B1%E5%9C%B3','COOKIE_BUSINESS_CITY': '440300','COOKIE_SERVICE_TIME': '1716271699','ac641e22637cd956_gr_cs1': 'undefined',}headers = {'Accept': 'application/json, text/plain, */*','Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8','Cache-Control': 'no-cache','Connection': 'keep-alive',# 'Cookie': 'aliyungf_tc=3b04bdddc2fcc08a2e07b5c05804eeb7f3559c2c0c84bea844e7c501a2c93bf6; acw_tc=ac11000117162716286612753e74b1e14e614cc55223c8721d0381c2eba53e; co=mzmovie; DEVICE_ID=17162716284574994868731905; gr_user_id=f9c0d6d0-e26b-44f9-be62-d939767554ff; ac641e22637cd956_gr_session_id=c6136a17-7e24-4344-bd43-ba4216e3a7f8; ac641e22637cd956_gr_session_id_sent_vst=c6136a17-7e24-4344-bd43-ba4216e3a7f8; ac641e22637cd956_gr_last_sent_sid_with_cs1=c6136a17-7e24-4344-bd43-ba4216e3a7f8; ac641e22637cd956_gr_last_sent_cs1=undefined; _bl_uid=g8ldjw2hfeLz4ktFwed4oL96OgzU; COOKIE_CITY_ID=440300; COOKIE_CITY_NAME=%E6%B7%B1%E5%9C%B3; COOKIE_BUSINESS_CITY=440300; COOKIE_SERVICE_TIME=1716271699; ac641e22637cd956_gr_cs1=undefined','EagleEye-SessionID': 'undefined','EagleEye-TraceID': '69708c621716271709032100044555','Pragma': 'no-cache','Referer': 'https://m.maizuo.com/v5/','Sec-Fetch-Dest': 'empty','Sec-Fetch-Mode': 'cors','Sec-Fetch-Site': 'same-origin','User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36','X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17162716284574994868731905","bc":"440300"}','X-Host': 'mall.film-ticket.film.list','X-Requested-With': 'XMLHttpRequest','X-Token': 'undefined','sec-ch-ua': '"Not_A Brand";v="8", "Chromium";v="120", "Google Chrome";v="120"','sec-ch-ua-mobile': '?0','sec-ch-ua-platform': '"Windows"',}params = {'cityId': '440300','pageNum': '1','pageSize': '10','type': '1','k': '7329328',}response = requests.get('https://m.maizuo.com/gateway', params=params, cookies=cookies, headers=headers)data = response.textdata = json.loads(data)films_data = data['data']['films']print(films_data,type(films_data))return JsonResponse(films_data,safe=False)

小程序 wxml

<!--pages/now/now.wxml--><view wx:for="{{filmsList}}" wx:key="index"  style="display: flex;">
<view style="flex: 1; margin-right: 20rpx;"><image src="{{item.poster}}" mode="aspectFit" style="width: 130px;"/> 
</view><view style="flex: 2; margin-top: 100rpx;"><view style="font-weight: 900;"> {{item.name}} <text style=" color: white; font-weight: 400; background-color: rgb(168, 159, 159)"> {{item.filmType.name}}   </text>  </view><view>观众评分 <text style="color: orange">{{item.grade}}</text></view> <view>主演: <text wx:for="{{item.actors}}" wx:key="index"> {{item.name}}</text></view><view style="font-size: 35rpx;">{{item.nation}}| {{item.runtime}}分钟</view></view></view>

小程序wxjs

// pages/now/now.js
Page({/*** 页面的初始数据*/data: {filmsList:[],},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 发送请求之前 loading效果wx.showLoading({title: '加载中~~',mask:true  // 显示透明蒙层，设置后，框后的按钮都不能点击了})wx.request({url: 'http://127.0.0.1:8000/films/',method:'GET',//如果是get请求，data就是请求参数，如果是post请求，data就是请求体数据data:{},header:{},success:(res)=>{//请求成功console.log("请求成功，结果为：",res.data)//将请求结果更新到页面对象user中this.setData({filmsList:res.data})},fail:(error)=>{console.log(error)},complete:(res)=>{// 关闭加载，无论成功与否都会执行wx.hideLoading()}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

小程序展示效果，大功告成，成功将数据展示到小程序上
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

三、自定义信号和槽函数（无参和有参）

三、自定义信号和槽函数（无参和有参）

需求&#xff1a; 下班后&#xff0c;小明说请小红吃好吃的&#xff0c;随便吃&#xff0c;吃啥买啥 无参&#xff1a;小红没有提出吃啥 有参&#xff1a;小红提出自己想吃的东西&#xff0c;吃啥取决于一时兴起&#xff08;emit触发&#xff09; 思路&#xff1a; 1&#xff…
阅读更多...
Unreal Engine5 Landscape地形材质无法显示加载

Unreal Engine5 Landscape地形材质无法显示加载

UE5系列文章目录 文章目录 UE5系列文章目录前言一、解决办法 前言 在使用ue5做地形编辑的时候&#xff0c;明明刚才就保存的Landscape地形完全消失不见&#xff0c;或者是地形的材质不见了。重新打开UE5发现有时候能解决&#xff0c;但大多数时候还是没有解决&#xff0c;我下…
阅读更多...
如何在 ASP.NET Core 中实现中间件管道

如何在 ASP.NET Core 中实现中间件管道

概述：借助 ASP.NET Core，中间件流水线可以作为一种轻量级、灵活的机制，使开发人员能够在请求流水线的不同阶段插入功能。这些中间件组件可以执行各种任务，例如日志记录、身份验证、授权、异常处理等。它们提供了一种封装和组织代码的方法，促进了更简洁、更易于维护的应用程…
阅读更多...
聚观早报 | 华为畅享 70S真机图赏；vivo Y200 GT开售

聚观早报 | 华为畅享 70S真机图赏；vivo Y200 GT开售

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 5月25日消息 华为畅享 70S真机图赏 vivo Y200 GT开售 一加13部分细节曝光 马斯克谈AI未来 三星Galaxy Z Fold6将…
阅读更多...
有一个3x4的矩阵，要求编写程序求出其中值最大的那个元素，以及其所在的行号和列号

有一个3x4的矩阵，要求编写程序求出其中值最大的那个元素，以及其所在的行号和列号

解题思路&#xff1a; 先考虑解此问题的思路。从若干数中求最大数的方法很多&#xff0c;现在采用"打擂台"的算法。如果有若干人比武&#xff0c;先有一人站在台上&#xff0c;再上去一人与其交手&#xff0c;败者下台&#xff0c;胜者留在台上。第3个人再上…
阅读更多...
Font shape `U/rsfs/m/n‘ in size ＜29.86＞ not available size ＜24.88＞

Font shape `U/rsfs/m/n‘ in size ＜29.86＞ not available size ＜24.88＞

解决方法&#xff1a;mathrsfs 删除这个包 其他可以参考&#xff1a;koma script - Size substitution with fontsize14 - TeX - LaTeX Stack Exchange
阅读更多...
【C语言】深入理解指针（一）（中）

【C语言】深入理解指针（一）（中）

2、指针变量和解引用操作符&#xff08;*&#xff09; &#xff08;1&#xff09;指针变量 我们通过取地址操作符&#xff08;&&#xff09;拿到的地址是一个数值&#xff0c;比如&#xff1a;0x006FFD70&#xff0c;这个数值有时候是需要存储起来&#xff0c;方便后期再…
阅读更多...
详解最新版RabbitMQ 基于RPM 方式的安装

详解最新版RabbitMQ 基于RPM 方式的安装

如何选择安装版本 已经不支持的发布系列 版本最后补丁版本首次发布时间停止更新时间3.73.7.282017年11月28日2020年09月30日3.63.6.162015年12月22日2018年05月31日3.53.5.82015年03月11日2016年10月31日3.43.4.42014年10月21日2015年10月31日3.33.3.52014年04月02日2015年03…
阅读更多...
Mybatis Cache（一）MybatisCache+Redis

Mybatis Cache（一）MybatisCache+Redis

前面提到了&#xff0c;使用mybatis cache&#xff0c;一般是结合redis使用。 一、demo 1、数据表 create table demo.t_address (id int auto_incrementprimary key,address_name varchar(200) null,address_code varchar(20) null,address_type int n…
阅读更多...
计算机毕业设计Python+Scrapy+Vue.js机器学习招聘推荐系统 招聘数据可视化 招聘爬虫 招聘数据分析 大数据毕业设计 大数据毕设

计算机毕业设计Python+Scrapy+Vue.js机器学习招聘推荐系统 招聘数据可视化 招聘爬虫 招聘数据分析 大数据毕业设计 大数据毕设

桂林学院 本科生毕业论文&#xff08;设计、创作&#xff09;开题报告 二级学院 理工学院 专业 数据科学与大数据技术&#xff08;专升本&#xff09; 年级 2022级 姓名 徐彬彬 学号 202213018222 指导教师 沈岚岚 职称/学位 高级实验师 第二 导师 职称/学…
阅读更多...
【ZYNQ】AXI-Quad-SPI SDK 开发记录 测试

【ZYNQ】AXI-Quad-SPI SDK 开发记录 测试

前人工作 如前人工作&#xff0c;在Navigate to BSP Settings中找到历例程 file:///F:/Xilinx/Vitis/2019.2/data/embeddedsw/XilinxProcessorIPLib/drivers/spi_v4_5/doc/html/api/example.html使用XSpi_LowLevelExample例子&#xff0c;源代码的AI解析 int XSpi_LowLeve…
阅读更多...
Java使用apache.poi生成word

Java使用apache.poi生成word

加油&#xff0c;打工人&#xff01; 工作需求&#xff0c;将现有的word模板有段落和表格&#xff0c;从数据库中查出数据并填充&#xff0c;word里面也有表格数据&#xff0c;需要将excel表格数据单独处理&#xff0c;然后插入到生成好的word文档中。 下面代码模拟从数据库查出…
阅读更多...
Kubernetes——Kubectl详解

Kubernetes——Kubectl详解

目录 前言 一、陈述式资源管理方法 二、Kubectl命令操作 1.查 1.1kubectl version——查看版本信息 1.2kubectl api-resources——查看资源对象简写 1.3kubectl cluster-info——查看集群信息 1.4配置Kubectl补全 1.5journalctl -u kubelet -f——查看日志 1.6kubec…
阅读更多...
物联网应用开发--STM32与机智云通信（ESP8266 Wi-Fi+手机APP+LED+蜂鸣器+SHT20温湿度传感器）

物联网应用开发--STM32与机智云通信（ESP8266 Wi-Fi+手机APP+LED+蜂鸣器+SHT20温湿度传感器）

实现目标 1、熟悉机智云平台&#xff0c;会下载APP 2、熟悉新云平台创建产品&#xff0c;项目虚拟调试 3、掌握云平台生成MCU代码&#xff0c;并移植。机智云透传固件的下载 4、具体目标&#xff1a;&#xff08;1&#xff09;注册机智云平台&#xff1b;&#xff08;2&…
阅读更多...
148.【Windows DOS命令脚本文件】

148.【Windows DOS命令脚本文件】

Window待处理脚本 (一)、批处理编程初步体验1.什么是批处理程序&#xff1f;(1).批处理程序的定义(2).如何编辑批处理程序 2.批处理程序可以做什么&#xff1f;(1).匹配规则删除文件(2).新建文件&#xff0c;日志等(3).创建计算机病毒等 3.一个基本的批处理文件(1).带盘符的输出…
阅读更多...
[深入理解DDR5] 2-1 封装与引脚

[深入理解DDR5] 2-1 封装与引脚

3500字&#xff0c;依公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《深入理解DDR》 1 DDR5 颗粒 X4 X8 X16 这里的 X8 or X16&#xff0c; 可以理解为一个DRAM芯片有几个存储阵列。“X几”。进行列寻址时会同时从几个阵列的同一个坐标位置读出数据bit来&a…
阅读更多...
前端中 dayjs 时间的插件使用(在vue 项目中)

前端中 dayjs 时间的插件使用(在vue 项目中)

Day.js中文网 这是dayjs的中文文档 里面包括了使用方法 下面我来详细介绍一下这个插件的使用 Day.js 可以运行在浏览器和 Node.js 中。 一般咱直接是 npm 安装 npm install dayjs 目前应该使用的是Es6 的语法 import dayjs from dayjs 当前时间 直接调用 dayjs() 将返回…
阅读更多...
【飞桨AI实战】基于PP-OCR和ErnieBot的智能视频问答

【飞桨AI实战】基于PP-OCR和ErnieBot的智能视频问答

前言 本次分享将带领大家从 0 到 1 完成一个基于 OCR 和 LLM 的视频字幕提取和智能视频问答项目&#xff0c;通过 OCR 实现视频字幕提取&#xff0c;采用 ErnieBot 完成对视频字幕内容的理解&#xff0c;并回答相关问题&#xff0c;最后采用 Gradio 搭建应用。本项目旨在帮助初…
阅读更多...
小猫咪的奇幻冒险：一个简单的Python小游戏

小猫咪的奇幻冒险：一个简单的Python小游戏

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、游戏简介与演示 二、游戏开发与运行 1. 环境搭建 2. 代码解析 3. 加速机制 三、游戏…
阅读更多...
Jeecg | 完成配置后，如何启动整个项目？

Jeecg | 完成配置后，如何启动整个项目？

前端启动步骤&#xff1a; 1. 以管理员身份打开控制台&#xff0c;切换到前端项目目录。 2. 输入 pnpm install 3. 输入 pnpm dev 4. 等待前端成功运行。 可以看到此时前端已经成功启动。 后端启动步骤&#xff1a; 1. 启动 mysql 服务器。 管理员身份打开控制台&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023