【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)

简介: 【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)



一、首页

  前面已经给项目页面配置了 tabBar 效果。接下来就来实现首页相关的功能。话不多说,让我们原文再续,书接上回吧。

1、创建 home 分支

  还是老样子,跟前面一样,创建一个分支来改动存储首页的改动,运行如下的命令,基于 master 分支在本地创建 home 子分支,用来开发和 home 首页相关的功能:

git checkout -b home

2、配置网络请求

  由于平台的限制,小程序项目中不支持 axios,而且原生的 wx.request() API 功能较为简单,不支持拦截器等全局定制的功能。因此,建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用

官方文档:https://www.npmjs.com/package/@escook/request-miniprogram

安装

  首先来安装第三方包,在此之前需要初始化 npm 包管理配置文件:

npm init -y

  然后运行安装指令即可。

npm install @escook/request-miniprogram

  安装成功之后就能看到这个文件夹了。

导入

  在小程序中最高级对象为 wx,而在 nui-app 中也有最高级对象 uni,安装完成之后接下来就是如何使用了。

// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'
// 将按需导入的 $http 挂载到 wx 顶级对象之上,方便全局调用
wx.$http = $http
// 在 uni-app 项目中,可以把 $http 挂载到 uni 顶级对象之上,方便全局调用
uni.$http = $http

请求拦截器

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // do somethimg...
}

响应拦截器

// 请求完成之后做一些事情
$http.afterRequest = function () {
  // do something...
}

  详细使用方法可以参考上面给的官方文档。最终,在项目的 main.js 入口文件中,通过如下的方式进行配置:

main.js

import {$http} from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求拦截器
$http.beforeRequest = function(options){
  uni.showLoading({
    title:'数据加载中...'
  });
}
// 响应拦截器
$http.afterRequest = function(){
  uni.hideLoading();
}

  在 uni-app 项目里一般不推荐用 wx 这个对象去调用 API ,建议用 uni 去调用小程序的相关的 APIwx 里面包含的 API 都可以被 `uni`` 调用。

注意:这里有个坑点,需将导入的包和接口相关操作放在代码最前面,一定放在最前面!一定放在最前面!一定放在最前面!不然请求数据的时候会出现报错 TypeError: Cannot read property ‘get‘ of undefined。

二、轮播图区域

1、请求轮播图的数据

  具体实现步骤可分为以下三步:

  • Step 1、在 data 中定义轮播图的数组。
  • Step 2、在 onLoad 生命周期函数中调用获取轮播图数据的方法。
  • Step 3、在 methods 中定义获取轮播图数据的方法。

home.vue

export default {
    data() {
      return {
        // 1. 轮播图的数据列表,默认为空数组
        swiperList:[],
      };
    },
    onLoad() {
      // 2. 在小程序页面刚加载的时候,调用获取轮播图数据的方法
      this.getSwiperList();
    },
    methods:{
      // 3. 获取轮播图数据的方法
      async getSwiperList(){
        // 发起请求
        const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata');
        console.dir(res)
        // 请求失败
        if(res.meta.status !== 200){
          return uni.showToast({
            title: '数据请求失败!',
            duration: 1500,
            icon: 'none',
          })
        }
        //  请求成功,为 data 中的数据赋值
        this.swiperList = res.message;
      }
    }
  }

  这样就能在微信开发者工具上看到请求到数据了。

  这里有个点注意一下,就是 swiperList 只有在被使用的时候,才会在 AppData 上显示出来,不使用的情况下,去 AppData 查看是没有显示的

2、渲染轮播图的 UI 结构

  获取到数据,接下来利用for循环将数据渲染到页面上:

home.vue

<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i" >
        <view class="swiper-item">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src = "item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

  最后美化 UI 结构:

<style lang="scss">
  swiper{
    height: 330 rpx;
    .swiper-item,
    image{
      width: 100%;
      height: 100%;
    }
  }
</style>

  到这里基本上就完成了整个轮播图效果,可以来看一下运行效果:


总结

  感谢观看,这里就是 uni-app 项目-- 购物车 – 首页 - 轮播图效果的介绍,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
12天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
1天前
|
小程序 JavaScript 数据库
微信小程序轮播图实现(超简单)
本文介绍了微信小程序使用内置swiper组件实现轮播图的简单方法。对于普通开发,示例代码展示了在wxml中配置swiper组件和嵌套image标签,以及相应的wxss样式设置。采用云开发时,wxml利用wx:for绑定数据列表,js部分展示如何从云端数据库获取数据并设置到list中。只需替换image的src为实际图片路径,即可完成轮播图功能。
8 0
|
10天前
|
移动开发 监控 供应链
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
一开始接触MES系统,很多人会和博主一样,对MES细节的应用不了解,这样很正常,因为MES系统相对于其他系统来讲应用比较多!
26 1
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
|
12天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
19 1
|
12天前
|
新零售 小程序 搜索推荐
认养模式小程序系统开发|成熟技术|项目案例
随着新零售的发展,我们设想更多创新的商业模式和营销方式。
|
12天前
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
12天前
|
小程序 开发者
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
18 0
|
12天前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
36 0
|
12天前
|
监控 数据可视化 安全
智慧工地SaaS可视化平台源码,PC端+APP端,支持二开,项目使用,微服务+Java++vue+mysql
环境实时数据、动态监测报警,实时监控施工环境状态,有针对性地预防施工过程中的环境污染问题,打造文明生态施工,创造绿色的生态环境。
23 0
智慧工地SaaS可视化平台源码,PC端+APP端,支持二开,项目使用,微服务+Java++vue+mysql
|
12天前
|
移动开发 小程序 前端开发
使用uni-app开发(h5、小程序、app)步骤
使用uni-app开发(h5、小程序、app)步骤

热门文章

最新文章