微信小程序 运行出错 弹出提示框(获取token失败,请重试 或者 请求失败)

news2025/1/10 16:53:14

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

原因是:需要登陆微信公众平台在开发管理 中设置 相应的 服务器域名 中的 request合法域名

// index.js

Page({
  data: {
    products:[],
    cardLayout: 'grid',  // 默认卡片布局为网格模式
    isGrid: true,  // 默认为网格布局
    page: 0, // 当前页码
    size: 10, // 每页大小
    hasMore: true, // 是否还有更多数据
    loading:true,
    hasMore: true, // 是否还有更多数据
    showBottomImage: false, // 控制底部图片的显示状态
    searchValue: '',
    currentFilter: 'all', // 默认选中 all
  },
  // 处理网格视图按钮点击事件
  handleGridViewClick: function() {
    const currentLayout = this.data.cardLayout;
    const newLayout = currentLayout === 'grid' ? 'list' : 'grid';

    this.setData({
      cardLayout: newLayout,
      isGrid: !this.data.isGrid
    });
  },
  onLoad: function () {
    this.fetchData();
  },
  // 发送请求获取数据
  async fetchData(page = 0, size = 10) {
    console.log('Fetching data', 'page:', page, 'size:', size); // 添加日志输出,记录传入的参数
    try {
      const token = wx.getStorageSync('token')
      console.log("获取商品数据前需要携带token=" + token);

      if (!token) {
        wx.showToast({
          title: '获取 token 失败,请重试',
          icon: 'none'
        });
        return;
      }

      const response = await new Promise((resolve, reject) => {
        wx.request({
          url: 'https://api.crossbiog.com/product/admin/list', // 使用配置文件中的URL
          method: 'GET',
          data: { page, size }, // 分页参数
          header: { 
            'token': token,
            'Cache-Control': 'max-age=60' // 设置缓存时间为60秒
          },
          success: resolve,
          fail: reject
        });
      });

      if (response.statusCode === 200) {
        const products = response.data.data.content || [];
        const formattedProducts = products.map(product => ({
          ...product,
          image:  `https://www.crossbiog.com/${product.image}`
        }));

        const filteredProducts = formattedProducts.filter(product =>
          product.status === 1 && product.editAuth === 1
        );

        this.setData({
          products: [...this.data.products, ...filteredProducts],
          loading: false, // 如果有加载指示器,设置为false
          hasMore: filteredProducts.length === size, // 是否还有更多数据
          page:page //更新页面数据中的page值
        });

        console.log('Updated page to:', page); // 添加日志输出,记录更新后的 page 值

        if (filteredProducts.length < size) {
          wx.showToast({
            title: '没有更多数据了',
            icon: 'none'
          });
        }
      } else {
        wx.showToast({
          title: '数据加载失败',
          icon: 'none'
        });
      }
    } catch (error) {
      wx.showToast({
        title: error.message || '请求失败',
        icon: 'none'
      });
    }
  },
  
  //监听页面触底事件,如用于加载更多数据。
  onReachBottom: function() {
    console.log('Current page before fetching more data:', this.data.page); // 添加日志输出,记录当前 page 值
    if (this.data.hasMore) {
      const nextPage = this.data.page + 1;
      this.fetchData(this.data.page + 1, this.data.size);
      console.log('Fetching data for page:', nextPage); // 添加日志输出,方便调试
    } else {
      wx.showToast({
        title: '没有更多数据了',
        icon: 'none'
      });
    }
    // 用户滑动到页面底部时触发
    this.setData({
      showBottomImage: true
    });
  },

  // 扫描二维码
  scanQrcode: function() {
    wx.scanCode({
      onlyFromCamera: false,  // 允许从相机和相册中选择图片
      success: (res) => {
        const jancode = res.result;
        console.log("扫描结果:", jancode);
        this.getProductByJancode(jancode);
      },
      fail: (err) => {
        wx.showToast({
          title: '扫描失败,请重试',
          icon: 'none'
        });
      }
    });
  },

  // 获取 token
  getToken: function() {
    return new Promise((resolve,reject)=>{
      const token = wx.getStorageSync('token')
      console.log('Token:', token);
      resolve(token)
    });
  },
  
  // 根据条码查询产品信息
  getProductByJancode: function(jancode) {
    this.getToken().then((token) => {
      if (!token) {
        wx.showToast({
          title: '获取 token 失败,请重试',
          icon: 'none'
        });
        return;
      }
      wx.request({
        url: `https://api.crossbiog.com/product/admin/detailByJancode`, // 使用配置文件中的URL
        method: 'GET',
        data: {
          jancode: jancode
        },
        header: {
          'token': `${token}`
        },
        success: (res) => {
          console.log("res=" + res);
          console.log("后端返回的数据:", res.data); // 添加日志输出
          if (res.statusCode === 200 && res.data && res.data.data) {
            const product = res.data.data;
            if (product) {
              // 显示产品信息
              this.setData({
                products: [product],
                showNoResultsImage: false // 如果有结果,隐藏无结果图片
              });
            } else {
              // 没有找到产品
              wx.showToast({
                title: '未找到该条码对应的产品',
                icon: 'none'
              });
              this.setData({
                showNoResultsImage: true // 如果没有结果,显示无结果图片
              });
            }
          } else {
            wx.showToast({
              title: '数据加载失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '请求失败',
            icon: 'none'
          });
        }
      });
    }).catch((err) => {
      wx.showToast({
        title: err.message,
        icon: 'none'
      });
    });
  },

  // 点击商品卡片后跳转到详情页
  navigateToDetail(event) {
    const productId = event.currentTarget.dataset.id;
    console.log("跳转到详情页,产品ID:", productId);
    wx.navigateTo({
      url: `/pages/productDetail/productDetail?id=${productId}`,
    });
  },

        // 处理输入框的输入事件
        handleSearchInput: function (e) {
          this.setData({
            searchValue: e.detail.value // 更新输入框的值
          });
        },
  
        // 处理搜索事件(按下回车时)
        handleSearch: function () {
          const value = this.data.searchValue; // 获取输入的值
          if (!value) {
            wx.showToast({
              title: '请输入搜索内容',
              icon: 'none'
            });
            return;
          }
              // 获取 token 并跳转到结果页面
              this.getToken().then((token) => {
                  if(!token){
                      wx.showToast({
                        title: '获取 token 失败,请重试',
                        icon: 'none'
                    });
                    return;
                  }
                  // 跳转到另一个页面,并传递搜索内容和 token
                  wx.navigateTo({
                      url: `/pages/searchResults/searchResults?value=${value}&token=${token}`
                  }); 
              }).catch((err)=>{
                    // 获取 token 失败时,在这里处理错误
                    wx.showToast({
                        title: '获取 token 失败,请重试',
                        icon: 'none'
                    });
              })
        },

        handleFilterClick: function(e) {
        const filterType = e.target.dataset.type;
        this.setData({
          currentFilter: filterType,
          page: 0, // 重置页码
          hasMore: true, // 重置是否有更多数据标志
          products: [] // 清空当前商品列表
        });
        this.fetchData();
    },
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2255038.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

储能能量自动化调配装置功能介绍

随着可再生能源的快速发展&#xff0c;光伏发电已成为全球能源结构转型的关键技术之一。与此同时&#xff0c;储能技术作为实现光伏发电稳定输出的核心技术&#xff0c;得到了广泛关注。在企业电网中&#xff0c;光伏储能系统的运维管理不仅关乎能源利用效率&#xff0c;还涉及…

Java --- JVM编译运行过程

目录 一.Java编译与执行流程&#xff1a; 二.编译过程&#xff1a; 1.编译器&#xff08;javac&#xff09;&#xff1a; 2.字节码文件&#xff08;.class&#xff09;&#xff1a; 三.执行过程&#xff1a; 1.启动JVM&#xff08;Java虚拟机&#xff09;&#xff1a; 2…

qt QNetworkAccessManager详解

1、概述 QNetworkAccessManager是QtNetwork模块中的一个核心类&#xff0c;它允许应用程序发送网络请求并接收响应。该类是网络通信的基石&#xff0c;提供了一种方便的方式来处理常见的网络协议&#xff0c;如HTTP、HTTPS等。QNetworkAccessManager对象持有其发送的请求的通用…

微信小程序 AI 智能名片 2+1 链动模式商城系统中的社群电商构建与价值挖掘

摘要&#xff1a;本文聚焦于微信小程序 AI 智能名片 21 链动模式商城系统&#xff0c;深入探讨社群电商在其中的构建方式与所蕴含的价值。通过剖析社群概念的内涵与发展历程&#xff0c;揭示其在当今电商领域备受瞩目的原因&#xff0c;并详细阐述如何在特定的商城系统架构下&a…

亚马逊云科技re:Invent:独一无二的云计算

美国当地时间12月2日晚&#xff0c;作为拥有超过6万名现场参会者和40万名线上参会者的全球云计算顶级盛宴&#xff0c;亚马逊云科技2024 re:Invent全球大会在拉斯维加斯盛大揭幕。 作为本届re:Invent全球大会的首场重头戏&#xff0c;亚马逊云科技高级副总裁Peter DeSantis的主…

计算机网络研究实训室建设方案

一、概述 本方案旨在规划并实施一个先进的计算机网络研究实训室&#xff0c;旨在为学生提供一个深入学习、实践和研究网络技术的平台。实训室将集教学、实验、研究于一体&#xff0c;覆盖网络基础、网络架构、网络安全、网络管理等多个领域&#xff0c;以培养具备扎实理论基础…

常量变量和一些运算符

3.4 变量 常量&#xff1a;&#xff01;final关键字 final修饰基本类型不可以第二次赋值final修饰的引用类型不可以第二次改变指向final修饰的类不可以被继承final修饰的方法不可以被重写final防止指令重排序&#xff0c;遏制流水线性能优化&#xff0c;保障多线程并发场景下…

docker学习笔记(五)--docker-compose

文章目录 常用命令docker-compose是什么yml配置指令详解versionservicesimagebuildcommandportsvolumesdepends_on docker-compose.yml文件编写 常用命令 命令说明docker-compose up启动所有docker-compose服务&#xff0c;通常加上-d选项&#xff0c;让其运行在后台docker-co…

pytorch多GPU训练教程

pytorch多GPU训练教程 文章目录 pytorch多GPU训练教程1. Torch 的两种并行化模型封装1.1 DataParallel1.2 DistributedDataParallel 2. 多GPU训练的三种架构组织方式2.2 数据不拆分&#xff0c;模型拆分&#xff08;Model Parallelism&#xff09;2.3 数据拆分&#xff0c;模型…

Nginx配置https(Ubuntu、Debian、Linux、麒麟)

Ubuntu操作系统&#xff0c;Debian系统底层是Ubuntu&#xff0c;差异不大 ubuntu 安装nginx 1.安装依赖 sudo apt-get update sudo apt-get install gcc sudo apt-get install libpcre3 libpcre3-dev sudo apt-get install zlib1g zlib1g-dev sudo apt-get install openssl lib…

【组件封装】uniapp vue3 封装一个完整的Tabs(标签页)组件教程,功能由简到杂实现讲解。

文章目录 前言一、简单版Tabs代码实现&#xff1a; 二、下划线带动画的TabsAPI回顾&#xff1a;代码实现&#xff1a; 三、内容区域滑动切换切换动画代码实现&#xff1a;&#xff08;2&#xff09;禁用手势滑动切换&#xff08;3&#xff09;内容区域换为插槽 四、标签栏可滚动…

五、docker的网络模式

五、docker的网络模式 5.1 Docker的四种网络模式 当你安装docker时&#xff0c;它会自动创建三个网络&#xff0c;可使用如下命令查看&#xff1a; [rootlocalhost ~]# docker network ls NETWORK ID NAME DRIVER SCOPE 7390284b02d6 bridge bridge lo…

生产慎用之调试日志对空间矢量数据批量插入的性能影响-以MybatisPlus为例

目录 前言 一、一些缘由 1、性能分析 二、插入方式调整 1、批量插入的实现 2、MP的批量插入实现 3、日志的配置 三、默认处理方式 1、基础程序代码 2、执行情况 四、提升调试日志等级 1、在logback中进行设置 2、提升后的效果 五、总结 前言 在现代软件开发中&…

【人工智能】深度解剖利用人工智能MSA模型

目录 情感分析的应用一、概述二、研究背景三、主要贡献四、模型结构和代码五、数据集介绍六、性能展示七、复现过程 情感分析的应用 近年来社交媒体的空前发展以及配备高质量摄像头的智能手机的出现&#xff0c;我们见证了多模态数据的爆炸性增长&#xff0c;如电影、短视频等…

MongoDB性能监控工具

mongostat mongostat是MongoDB自带的监控工具&#xff0c;其可以提供数据库节点或者整个集群当前的状态视图。该功能的设计非常类似于Linux系统中的vmstat命令&#xff0c;可以呈现出实时的状态变化。不同的是&#xff0c;mongostat所监视的对象是数据库进程。mongostat常用于…

Scratch教学作品 | 中国诗词大会——闯关擂台,品味诗词之美! ✨

&#x1f393; Scratch教学作品 | 中国诗词大会——闯关擂台&#xff0c;品味诗词之美&#xff01; &#x1f4dc;✨ 今天给大家推荐一款结合文化与挑战的Scratch作品——《中国诗词大会》&#xff01;由zhouyq制作&#xff0c;这款游戏让你置身诗词的世界&#xff0c;通过闯关…

安全关系型数据库查询新选择:Rust 语言的 rust-query 库深度解析

在当今这个数据驱动的时代&#xff0c;数据库作为信息存储和检索的核心组件&#xff0c;其重要性不言而喻。然而&#xff0c;对于开发者而言&#xff0c;如何在保证数据安全的前提下&#xff0c;高效地进行数据库操作却是一项挑战。传统的 SQL 查询虽然强大&#xff0c;但存在诸…

微信小程序里的小游戏研发需要什么技术栈

研发小程序里的小游戏通常需要以下技术栈&#xff1a; 前端技术 HTML5 / CSS3&#xff1a;用于构建游戏的界面布局和样式。JavaScript&#xff1a;作为核心编程语言&#xff0c;实现游戏的逻辑和交互。小程序开发框架&#xff1a;如微信小程序的开发框架&#xff0c;了解其 API…

Install PyTorch (安装 PyTorch)

Install PyTorch {安装 PyTorch} 1. Install PyTorch1.1. Previous PyTorch Versions1.2. Latest PyTorch1.3. 查看 PyTorch 的版本 References 1. Install PyTorch https://pytorch.org/ Select your preferences and run the install command. Stable represents the most …

第二篇:k8s工作流程

我们来看通过deployment部署pod的常规流程&#xff1a; kubectl向apiserver发送部署请求&#xff08;例如使用 kubectl create -f deployment.yml&#xff09;apiserver将 Deployment 持久化到etcd&#xff1b;etcd与apiserver进行一次http通信。controller manager通过watch a…