目录

微信小程序从PHP后台获取数据用于前端的显示

JAY.LIN 收录于微信小程序开发者工具

2025-01-02 约 944 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=83475737

目录

微信小程序:从PHP后台获取数据用于前端的显示

我们都知道前端的页面布置好以后,要从后台调取数据来填充内容,那我们要怎样从后天调取数据呢.下面我们来展示的时从后台调取图片用于前端网页的轮播图显示.

如果我们把数据存储在前端的JS中的话,那每次更新内容用户都需要更新APP或者程序. 这样很麻烦这样. 我们需要写一个方法从后台调取数据 .我们要更改轮播图片的话,只需要在后台更改数据进行,用户APP或者程序不需要每次更新. 因为每次前端轮播图的显示的图片都是从后台获取数据,所以就不存在后台更新数据 APP或者程序也需要更新了.

WXML:

  //基本的轮播图框架
    <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" indicator-dots="true" autoplay="true" interval="2000" duration="500" bindchange="swiperChange">   
    <block wx:for="{{banner}}" wx:index="{{index}}">  
      <swiper-item class="swiper-item">
        <image mode="aspectFill" src="{{item.imgUrl}}"  class="slide-image {{swiperIndex == index ? 'active' : ''}}" /> 
         //src这里要注意一下后台对图片地址的关键键名是什么                            
      </swiper-item>
    </block>
  </swiper>

WXSS: 这个不重要

//自己设计的样式
.swiper-block {
  height: 480rpx;
  width: 100%;
  background-color: #b36969;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: unset;
}

.slide-image {
  height: 420rpx;
  width: 520rpx;
  border-radius: 9rpx;
  box-shadow: 0px 0px 30rpx rgba(138, 69, 69, 1);
  margin: 0rpx 10rpx;
  z-index: 1;
}

.active {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}

在Utils文件下生产一个新的JS文件,我们这里命名为Base.js,用来写一个公共类,以后调用图片的方式都可以是这个

Base.jS:

let host = "http://192.168.1.111";    //这个网址是你PHP给出的网址的域名.
export default class Base{   //父类Base
  constructor() {}   //构造函数

  request(promer, callBack) {     //传入数据类, 返回函数
    wx.request({
      url: host + promer.url,     //后台地址   域名加文件存储的文件夹名字就可以找到
      data: promer.data,          //后台date
      method: promer.method ? promer.method : 'GET',   //后台方法
      success: function(res) {
        callBack(res.data)       //调用成功返回res.date
      },
      fail: function(res) {
        console.log(err)         //调用失败就在控制台输出错误
      }
    })
  }
}

在JS文件夹下新建一个JS,命名为logs_mobel.js作为图形层和后台链接的模型层

logs_mobel.js:

import Base from "../..//utils/Base.js"     //链接Base.js

export default class Index  extends Base{    //构造一个公开的Index ,基于父类Base
  constructor(){                                //构造函数
    super();                                    //调用父类
  }
  getBanners(callBack){                              //
    let promer = {                              //promer是一个类
      url: "/demo/public/index/banner/getIndex"   //这里是图片存储的文件夹,如果是网上获取的可以相应更改
    }
    this.request(promer, callBack)              //返回值等于调用父类后的结果
  }
}

JS:

import Index from "./logs_model.js";   //链接模型层的js的Index
let index = new Index();               //定义一个新的Index类,命名为index

Page({
  data: {
    banner: [],
    swiperIndex: 0
  },
  swiperChange(e) {
    var that = this;
    that.setData({
      swiperIndex: e.detail.current,
    })
  },
  onLoad: function() {
    this.getBanner()    //小程序启动调用
  },

  getBanner: function()     
  {
    const that = this;    //this指当前
    index.getBanners(function(res){   //调用index这个类的getBanners函数  传入一个匿名函数
      that.setData({                   //在匿名函数中赋值给当前page的banner数组
        banner: res
      })
    })
  }
})