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

2024-05-27 小程序 0

在这里插入图片描述

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

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

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，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 jsonimport requests# Create your views here.#写个接口，返回数据def index(request):    # time.sleep(3)    return JsonResponse({"name":"彭于晏","age":39,"hobby":"抽烟"})

在这里插入图片描述

url路由

from django.contrib import adminfrom 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.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.jsPage({    /**     * 页面的初始数据     */    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() {    }})