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

景天科技苑

已于 2024-05-24 11:00:59 修改

阅读量2.3w

点赞数 89

分类专栏：微信小程序开发零基础教学，难点与应用实战总结文章标签：小程序微信小程序前后端交互小程序网络请求微信小程序开发 python django

于 2024-05-22 07:15:00 首次发布

本文链接：https://blog.csdn.net/littlefun591/article/details/139097998

版权

微信小程序开发零基础教学，难点与应用实战总结专栏收录该内容

11 篇文章 15 订阅

订阅专栏

在这里插入图片描述

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

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

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

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

文章目录

发送网络请求

发送网络请求

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

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

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

    }
})