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

news2025/1/15 16:49:48

在这里插入图片描述

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

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

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

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

文章目录

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

发送网络请求

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

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

1.微信发送网络请求

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

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

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

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

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

2.后端接口

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

视图层：

from django.shortcuts import render

from django.http import JsonResponse

import time

import 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 path

from app import views

urlpatterns = [
    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.text
    data = 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.coloradmin.cn/o/1691192.html

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

相关文章

【计算机视觉（1）】

【计算机视觉（1）】

基于Python的OpenCV基础入门——图像的处理 计算机视觉简介OpenCV介绍图像的读取图像的显示图像窗口等待时间图像窗口的全部销毁图像的保存 图像的基本操作代码实现 计算机视觉简介 计算机视觉是人工智能 (AI) 的一个领域&#xff0c;是指让计算机和系统能够从图像、视频和其他…
阅读更多...
Logstash笔记

Logstash笔记

目录​​​​​​​ 一、简介 二、单个输入和输出插件 三、多个输入和输出插件 四、pipeline结构 五、队列和数据弹性 六、内存队列 七、持久化队列 八、死信队列 (DLQ) 九、输入插件 1)、beats 2)、dead_letter_queue 3)、elasticsearch 4)、file 5)、redis 十、…
阅读更多...
LESS IS MORE: ONE-SHOT-SUBGRAPH LINK PREDICTION ON LARGE-SCALE KNOWLEDGE GRAPHS

LESS IS MORE: ONE-SHOT-SUBGRAPH LINK PREDICTION ON LARGE-SCALE KNOWLEDGE GRAPHS

LESS IS MORE: ONE-SHOT-SUBGRAPH LINK PREDICTION ON LARGE-SCALE KNOWLEDGE GRAPHS&#xff08;ICLR2024&#xff09; 论文地址&#xff1a;https://arxiv.org/html/2403.10231v1 源码地址&#xff1a;https://github.com/tmlr-group/one-shot-subgraph ABSTRACT 为了推断知…
阅读更多...
2024最新 Jenkins + Docker 实战教程（六）- Jenkins配置邮箱接收构建通知

2024最新 Jenkins + Docker 实战教程（六）- Jenkins配置邮箱接收构建通知

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…
阅读更多...
软件设计：基于 python 代码快速生成 UML 图

软件设计：基于 python 代码快速生成 UML 图

1. 官方文档 PlantUML Language Reference Guide Comate | 百度研发编码助手 百度 Comate (Coding Mate Powered by AI) 是基于文心大模型的智能代码助手&#xff0c;结合百度积累多年的编程现场大数据和外部优秀开源数据&#xff0c;可以生成更符合实际研发场景的优质代码。…
阅读更多...
element-plus表格的表单校验如何实现，重点在model和prop

element-plus表格的表单校验如何实现，重点在model和prop

文章目录 vue&#xff1a;3.x element-plus&#xff1a;2.7.3 重点&#xff1a; 1) tableData放到form对象里 2) form-item的prop要写成tableData.序号.属性 <!--table-表单校验--> <template><el-form ref"forms" :model"form"><e…
阅读更多...
【Linux系列】软链接使用

【Linux系列】软链接使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
基于自抗扰控制器和线性误差反馈控制律(ADRC-LSEF)的控制系统simulink建模与仿真

基于自抗扰控制器和线性误差反馈控制律(ADRC-LSEF)的控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 ADRC原理 4.2 线性误差反馈控制律(LSEF) 4.3 ADRC-LSEF融合系统 5.完整工程文件 1.课题概述 基于自抗扰控制器和线性误差反馈控制律(ADRC-LSEF)的控制系统simulink建模与仿真。 2.系统仿真结果 …
阅读更多...
基于Java的地震震中附近城市分析实战

基于Java的地震震中附近城市分析实战

目录 前言 一、空间数据说明 1、空间查询 二、Java后台开发 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、附近城市展示 3、成果展示 总结 前言 随着全球气候变化和地壳活动的不断演变&#xff0c;地震作为一种自然灾害&…
阅读更多...
“AIGC行业投资时机分析：评估当前市场发展阶段与未来需求趋势“

“AIGC行业投资时机分析：评估当前市场发展阶段与未来需求趋势“

文章目录 每日一句正能量前言行业前景当前发展前景相关领域的发展趋势行业潜力竞争情况结论 市场需求人才需求情况机会挑战结论 选择与规划自我评估行业调研职业规划风险管理个人陈述示例 后记 每日一句正能量 胖了就减&#xff0c;没钱就赚&#xff0c;不会就学&#xff0c;不…
阅读更多...
rtk技术的使用， test ok

rtk技术的使用， test ok

1. 什么是gnss 2 rtk定位
阅读更多...
记录使用 Vue3 过程中的一些技术点

记录使用 Vue3 过程中的一些技术点

1、自定义组件&#xff0c;并使用 v-model 进行数据双向绑定。 简述&#xff1a; 自定义组件使用 v-model 进行传参时&#xff0c;遵循 Vue 3 的 v-model 机制。在 Vue 3 中&#xff0c;v-model 默认使用了 modelValue 作为 prop 名称&#xff0c;以及 update:modelValue 作为…
阅读更多...
初始化新建vue3

初始化新建vue3

阅读更多...
Linux-笔记 应用编程函数总结

Linux-笔记 应用编程函数总结

之前一直没做总结&#xff0c;这里总结一下。 一、文件I/O open #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open(const char *pathname, int flags); 例子&#xff1a; int fd; fd open("./test_kondon", O_WRONLY …
阅读更多...
10.2.k8s的附加组件-Metrics-server组件与hpa资源pod水平伸缩

10.2.k8s的附加组件-Metrics-server组件与hpa资源pod水平伸缩

目录 一、概述 二、安装部署Metrics-Server组件 1.下载Metrics-Server资源清单 2.编辑Metrics-Server的资源清单 3.验证Metrics-Server是否成功安装 4.使用top命令测试是否管用 三、hpa资源实现pod水平伸缩&#xff08;自动扩缩容&#xff09; 1.编写deploy资源清单 2.…
阅读更多...
java实现List对象转geojson文本返回前端

java实现List对象转geojson文本返回前端

1.业务需求 查询带有经纬度数据的list列表&#xff0c;将其转为geojson格式给前端。 2.GeoJson格式说明 GeoJSON是一种对各种地理数据结构进行编码的格式&#xff0c;基于Javascript对象表示法(JavaScript Object Notation, 简称JSON)的地理空间信息数据交换格式。GeoJSON对…
阅读更多...
每日练习之深度优先搜索——最大的湖

每日练习之深度优先搜索——最大的湖

最大的湖 题目描述 运行代码 #include<iostream> using namespace std; bool mp[102][102]; int sum,num; int N,M,K; int dfs(int x,int y ) {if( mp[x][y] ){mp[x][y]0;sum;dfs(x1,y);dfs(x-1,y);dfs(x,y1);dfs(x,y-1);}return 0; } int main() {cin>>N>>…
阅读更多...
ubuntu 源码安装 cloudcompare

ubuntu 源码安装 cloudcompare

1.系统环境&#xff1a; ubuntu18 cmake&#xff1a;3.10.2 官方安装指导&#xff1a;https://github.com/CloudCompare/CloudCompare/blob/master/BUILD.md (注&#xff1a;查看cmake版本&#xff1a; cmake --version) 2.安装依赖 sudo apt-get update sudo apt-get insta…
阅读更多...
Android 屏保开关

Android 屏保开关

设置-显示-屏保&#xff0c; 打开关闭 设置代码在 ./packages/apps/Settings/src/com/android/settings/dream/DreamMainSwitchPreferenceController.java &#xff0c; Overridepublic boolean isChecked() {return mBackend.isEnabled();}Overridepublic boolean setChecke…
阅读更多...
【云原生】Kubernetes----POD基本管理

【云原生】Kubernetes----POD基本管理

目录 引言 一、Pod基础概念 &#xff08;一&#xff09;Pod简介 &#xff08;二&#xff09;Pod的分类 1.自主式Pod 2.控制器管理的Pod &#xff08;三&#xff09;Pod使用方式 1.单容器pod 2.多容器Pod 3. 注意事项 二、Pod容器的分类 &#xff08;一&#xff09;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023