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

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

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

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

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

发送网络请求

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

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

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() {}
})

小程序展示效果，大功告成，成功将数据展示到小程序上