【微信小程序】-- 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 项目-- 购物车 – 首页 - 轮播图效果的介绍,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

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

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

相关文章
|
7天前
|
小程序 搜索推荐 JavaScript
引入小程序平台对app有啥好处
引入小程序平台对app有啥好处
22 1
|
27天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
3月前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
198 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
3月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
235 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
3月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
148 0
|
4月前
|
存储 数据库
《仿盒马》app开发技术分享-- 购物车功能完善(14)
上一节我们实现了购物车商品列表的状态切换,已添加商品数量的增减,已添加商品滑动删除,已添加商品在选中情况下的价格计算。这一节我们在这些功能的基础上实现云端记录,因为我们现在只有数据的查询是从云端获取的,其他的操作虽然都实现了相对应的功能,但是当我们操作完,关闭app,再打开不会有对应的记录,有的同学可能会说,那我们把数据用首选项或者数据库的形式存储就可以了吧? 那如果我更换了另一个设备那这些添加的数据是不是就又不能使用了?所以我们的每个操作,最好都是提交到云端,这样我们在其他设备,在退出应用,切换账号这些情况下都能很好的保存我们操作后的购物车状态。
97 0
|
4月前
|
前端开发
《仿盒马》app开发技术分享-- 购物车基础功能实现(13)
上一节我们实现了加入购物车和购物车列表的简单展示。对一个电商类的应用来说,这很显然是不够的,我们的购物车内容应该更加的丰富,他需要用户能自主的去选择想要结算的商品,删除一些不需要的商品,或者取消掉一些本次不结算的商品,同时根据选择的不同,我们需要把相对应的价格和选择的数量等信息传递给用户,帮助用户节省更多的时间。
84 0
|
22天前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
63 0
|
3月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。

热门文章

最新文章