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

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

在这里插入图片描述

原因是:需要登陆微信公众平台在开发管理 中设置 相应的 服务器域名 中的 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();
    },
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

室联人形机器人:家政服务任务结构化、技术要点、深入应用FPGA的控制系统框架设计(整合版)

目录&#xff1a; 0 引言 1 人形机器人对室内家政服务任务的结构化 1.1人形机器人在室内家政服务中的比较优势 1.1.1 人形机器人拟人性的7个维度 1.1.2 拟人性在室内家政服务工作中的比较优势 1.1.3 潜在的重要用户&#xff1a;宠物爱好者 1.2 居所室内环境的特征与结构…

【YOLO部署Android安卓手机APP】YOLOv11部署到安卓实时目标检测识别——以火焰烟雾目标检测识别举例(可自定义更换其他目标)

前言:本项目基于YOLOv11部署到手机APP实现对火焰烟雾的检测识别,当然,以此你可以按照本项目开发步骤扩展更换为其他目标进行检测,例如更换为车牌、手势、人脸面部活动、人脸表情、火焰烟雾、行人、口罩、行为、水果、植物、农作物等等部署手机APP进行检测。本文为详细设计/…

python 执行celery

1、redis安装并启动redis安装与使用-CSDN博客 2、安装 celery 、eventlet 3. Task handler raised error: ValueError(not enough values to unpack (expected 3, got 0)) - Redskaber - 博客园 pip install celery pip install eventlet 3、python 版本3.10 #创建异步任…

未完成_RFdiffusion应用案例_从头设计pMHC的结合剂

目录 1. 论文导读1&#xff09;摘要2&#xff09;设计流程3&#xff09;设计流程的验证 2. 实战 1. 论文导读 Liu, Bingxu, et al. “Design of high specificity binders for peptide-MHC-I complexes.” bioRxiv (2024): 2024-11. 1&#xff09;摘要 MHC-I 将胞内抗原肽递呈…

【css】基础(一)

本专栏内容为&#xff1a;前端专栏 记录学习前端&#xff0c;分为若干个子专栏&#xff0c;html js css vue等 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;css专栏 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &a…

【Python高级语法与正则表达式】

目录 1.正则表达式 1.1概述&#xff1a; 1.2re模块介绍 1.3re模块相关方法&#xff08;常用&#xff09;&#xff1a; 1.4案例 1.5正则表达式详解 1.5.1查什么 1.5.2查多少 1.5.3 从哪查 1.6重要概念 1.6.1子表达式 1.7 正则表达式的其他方法 1.7.1选择匹配符 1.7.2…

Vue03

目录 一、今日目标 1.生命周期 2.综合案例-小黑记账清单 3.工程化开发入门 4.综合案例-小兔仙首页 二、Vue生命周期 三、Vue生命周期钩子 四、生命周期钩子小案例 1.在created中发送数据 六、工程化开发模式和脚手架 1.开发Vue的两种方式 2.Vue CLI脚手架 基本介绍…

云轴科技ZStack出席中国电信国际EMCP平台香港发布会,持续推动海外合作

近日&#xff0c;以“云聚未来 翼起新篇”为主题的中国电信国际多云服务一站式平台&#xff08;E-surfing Managed Cloud Platform&#xff0c;简称EMCP平台&#xff09;新闻发布会在香港成功举办&#xff0c;标志着中国电信国际在云计算服务领域取得了又一重大进展。云轴科技…

Alibaba Druid(简称Druid)

目录 核心功能 数据源配置与管理&#xff1a; 高性能与可扩展性&#xff1a; 监控与SQL解析&#xff1a; 安全性&#xff1a; 应用场景 使用方式 配置示例 通过yaml方式配置 web.xml中配置 访问Druid的监控页面 监控页面展示 Alibaba Druid&#xff08;简称Druid&am…

JavaWeb学习--cookie和session

目录 &#xff08;一&#xff09;Cookie概述 1.什么叫Cookie 2.Cookie规范 3.Cookie的覆盖 4.cookie的最大存活时间 ​​​​​​&#xff08;Cookie的生命&#xff09; &#xff08;二&#xff09; Cookie的API 1.创建Cookie&#xff1a;new 构造方法 2.保存到客户端浏…

策略模式实战 - 猜拳游戏

**可以整体的替换一套算法&#xff0c;这就是策略模式。**这样对于同一个问题&#xff0c;可以有多种解决方案——算法实现的时候&#xff0c;可以通过策略模式来非常方便的进行算法的整体替换&#xff0c;而各种算法是独立封装好的&#xff0c;不用修改其内部逻辑。 具体的实…

Transformer简述和实现

Transformer 1、概述 (一)、诞生 自从2017年此文《Attention is All You Need》提出来Transformer后&#xff0c;便开启了大规模预训练的新时代&#xff0c;也在历史的长河中一举催生出了GPT、BERT这样的里程碑模型。 (二)、优势 相比之前占领市场的LSTM和GRU模型&#xf…

Astro 5.0 发布

Astro 5.0 发布&#xff01; 使用 Astro Content Layer 可以从任何来源加载内容&#xff0c;并使用 Server Islands 将缓存的静态内容与动态个性化内容结合起来。 什么是 Astro Astro 是用于构建内容驱动网站&#xff08;包括博客、营销和电子商务&#xff09;的 Web 框架。…

数据结构与算法-03链表-04

链表与递归 在链表操作中移除、反转经常会用到递归实现。通过力扣案例理解链表常规操作中的递归实现。 移除数据 删除链表的节点 问题 LCR 136. 删除链表的节点 - 力扣&#xff08;LeetCode&#xff09; 问题描述 给定单向链表的头指针和一个要删除的节点的值&#xff0c;定…

Let up bring up a linux.part2 [十一]

之前的篇幅中我们已经将 Linux 内核 bringup 起来了&#xff0c;不知道大家有没有去尝试将根文件系统运行起来&#xff0c;今天我就带领大家完成这个事情&#xff0c;可以跟着下面的步骤一步步来完成&#xff1a; 在这里我们使用 busybox 构建 rootfs&#xff1a; 下载 busyb…

WEB开发: Node.js路由之由浅入深(一) - 全栈工程师入门

作为一个使用Node.js多年的开发者&#xff0c;我已经习惯于用Node.js写一些web应用来为工作服务&#xff0c;因为实现快速、部署简单、自定义强。今天我们一起来学习一个全栈工程师必备技能&#xff1a;web路由。&#xff08;观看此文的前提是默认你已经装好nonde.js了&#xf…

新书速览|循序渐进Node.js企业级开发实践

《循序渐进Node.js企业级开发实践》 1 本书内容 《循序渐进Node.js企业级开发实践》结合作者多年一线开发实践&#xff0c;系统地介绍了Node.js技术栈及其在企业级开发中的应用。全书共分5部分&#xff0c;第1部分基础知识&#xff08;第1&#xff5e;3章&#xff09;&#xf…

二代证信息读写器安卓身份证手持终端pda

HT530是一款可满足不同应用需求的多功能身份证核验手持机。Android 10操作系统&#xff0c;搭载高性能8核心2.0G主频处理器&#xff0c;5.5寸高清大屏&#xff0c;1300万摄像头&#xff1b;内存2G16G,4G64G可选。条码扫描&#xff08;扫描头可选&#xff09;、可离线采集、读取…

Redis的高可用之哨兵模式

Redis哨兵主要是解决Redis主从同步时主数据库宕机问题,使其能够自动进行故障恢复&#xff0c;提高Redis系统的高可用性。 1. 哨兵的作用&#xff1a; 监控&#xff1a;哨兵通过心跳机制监控主库和从库的存活性。 选主&#xff1a;当主库宕机时&#xff0c;哨兵会选举出一个领…