小程序设置、获取本都缓存、发送请求、渲染数据、转发当前页面、下拉刷新页面

2023-05-16

设置、获取缓存,发送请求,渲染数据,转发当前页面

  • 设置、获取本地缓存
    • 设置本地缓存(wx.setStorage)
    • 获取本地缓存 (wx.getStorageSync)
    • 在微信开发工具如何查看是否有本地缓存
    • 设置缓存实例:
    • 获取缓存实例
  • 发送请求
  • 渲染数据
  • 转发当前页面
  • 下拉刷新页面

设置、获取本地缓存

设置本地缓存(wx.setStorage)

setCache:function (key,value) {
    wx.setStorage({
          key:key,
          data:value
    });
},

获取本地缓存 (wx.getStorageSync)

getCache:function (key) {
    var value = undefined;
    try {
        value=wx.getStorageSync(key)
    } catch (e) {}
    return value
}

在微信开发工具如何查看是否有本地缓存

在这里插入图片描述

设置缓存实例:

在这里插入图片描述

获取缓存实例

在这里插入图片描述

发送请求

小程序需要发送请求一般都是发生了某些事件需要调用后台的接口,发送请求用的是wx.request,
详细参数可以去看看官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

 wx.request({
            url:app.buildUrl("/food/search"),
            header:app.getRequestHeader(),
            data:{
                "cat_id":that.data.activeCategoryId,
                "mix_kv":that.data.searchInput,
                "p":that.data.p
            },
            success:function (res) {
                var reps = res.data;
            }
		});

在这里插入图片描述

渲染数据

当我们发送请求后服务器会给我们想要的数据,这时就需要如何渲染数据了
需要在当前js文件page的data设置变量名:
在这里插入图片描述
在发送请求后判断服务返回的状态码是否是200,然后使用that.setData
在这里插入图片描述
设置在data后还需再在wxml中去取出来

在这里插入图片描述

转发当前页面

在这里插入图片描述

需要wxml中指定这个

<button open-type="share" >分享</button>

在这里插入图片描述
在js中添加这个函数,指定了分享会自动帮我们调用这个函数,
因为api更新的原因已经没有了success方法了所以只能退而求其次变成只要点击分享了、就调后台接口(不管是否成功)
onShareAppMessage还有很多参数可以去看看官方文档
https://developers.weixin.qq.com/minigame/dev/api/share/wx.onShareAppMessage.html

//分享当前页面
onShareAppMessage:function () {
    var that=this;
    //我这个转发后调用了后台接口,所以需要使用这个函数去发送请求
    this.share_success();
    return {
        title: that.data.info.name,
        path: '/page/food/info?id=' + that.data.id
    }
},

下拉刷新页面

只需要在page添加这个函数就可以了,然后去调用发送请求的相关函数

onReachBottom:function () {
    var that=this;
    //延迟函数,为了看起不突兀
    setTimeout(function () {
        that.getFoodList();
    },500)
},
getFoodList:function () {
        var that=this;
        if (that.processing){
            return
        }

        if (! that.data.loadingMoreHidden){
            console.log(that.loadingMoreHidden);
            return
        }
        that.setData({
            processing:true
        });
        wx.request({
            url:app.buildUrl("/food/search"),
            header:app.getRequestHeader(),
            data:{
                "cat_id":that.data.activeCategoryId,
                "mix_kv":that.data.searchInput,
                "p":that.data.p
            },
            success:function (res) {
                var reps = res.data;
                if (reps.code != 200) {
                     app.alert({"content":reps.msg});
                    return
                }
                var goods=reps.data.list;
                that.setData({
                    //新的数据加上原来的数据使用concat
                    goods:that.data.goods.concat(goods),
                    //当前页数来之后+1
                    p:that.data.p+1,
                    //为服务器是否执行这条命令
                    processing:false
                });

                if (reps.data.has_more==0){
                    that.setData({
                        loadingMoreHidden:false
                    });
                }
            }
        })
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

小程序设置、获取本都缓存、发送请求、渲染数据、转发当前页面、下拉刷新页面 的相关文章

随机推荐

  • SpringBoot整合FreeMarker

    一 FreeMarker简述 在线文档 xff1a http freemarker foofun cn FreeMarker 也是一款模板引擎技术 xff0c 它是一种基于模板和要改变的数据 xff0c 并用来生成输出文本 HTML网页 x
  • SpringMVC的执行流程

    前言 当你知道springMVC的执行流程的时候 xff0c 会达到是事半功倍的学习效果 SpringMVC执行流程 首先明确 xff1a SpringMVC的执行过程就是 xff1a 客户端或者浏览器发送请求到后端服务器 xff0c 后端
  • archLinux安装记录

    archLinux安装记录 基于wsl的arch 启用wsl 首先 xff0c 按Win 43 S搜索启用或关闭Windows功能 xff08 Turn Windows features on or off xff09 打开虚拟机平台和WS
  • mac风格的windows11

    结果 工具下载 链接 xff1a https pan baidu com s 1bVkGI2FZ1Y6tziRMFdP3fw 提取码 xff1a MACC windows11微软官网纯镜像 链接 xff1a https pan baidu
  • AD学习问题记录(四):AD21布线时如何更改线宽

    目录 问题 xff1a 布线时发现线比需要的细解决 xff1a 更改规则结果总结 目前使用的版本是AD21 问题 xff1a 布线时发现线比需要的细 在PCB布线的时候 xff0c 发现线宽比较细 xff0c 于是在右侧的Propertie
  • FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ‘:app:compile...

    1 错误原因 笔记 在运行android的项目时报错 咱就是说代码不知道检查多少遍了 反正代码可以肯定的是没错的 于是就去网上搜索啊 按照提示在build gradle Module app 加了如下代码 android compileOp
  • Java实现二分搜索

    二分查找 xff1a 是一种算法 xff0c 其输入是一个有序的元素列表 xff08 必须是有序的 xff09 xff0c 如果查找的元素包含在列表中 xff0c 返回其索引 xff0c 否则返回负数 比如说有一个1 100的数字 xff0
  • Python if else条件语句你懂了吗?

    在 Python 中 xff0c 可以使用 if else 语句对条件进行判断 xff0c 然后根据不同的结果执行不同的代码 xff0c 这称为选择结构或者分支结构 Python 中的 if else 语句可以细分为三种形式 xff0c 分
  • 嵌入式学习系统里的ROM和RAM(转载)

    一个嵌入式项目在立项时 xff0c 其中有个重要的环节就是对系统所需的RAM和ROM用量进行评估 xff0c 在满足系统需求的前提下 xff0c 尽量降低硬件成本 xff0c 据说同等大小的RAM价格大概是ROM的6倍 大部分的资料都宣称程
  • 关于Mysql8.0.22服务无法启动问题

    关于Mysql8 0 22服务无法启动问题 1 官网下载 解压完成后 不存在data文件夹 也不要自己创建 后面会用命令生成 请往后看 2 创建my ini文件 xff08 一定要放在bin目录下 xff0c 不要放在mysql8 0 22
  • 查找Ubuntu中安装软件的位置

    查找Ubuntu中安装软件的位置 下面仅自我学习记录只做参考 xff0c 不可全信 通常使用ps e 找到软件的具体名字 xff0c 然后进行位置查找 自我记录 1 执行程序查看 对于有的程序没有效果 type 软件名 2 通过进程查看 p
  • Python爬虫:第三章 数据解析 xpath解析(12)

    第三章 数据解析 xpath 解析xpath 解析基础example1 爬取58二手房中的房源信息example2 解析下载图片数据example3 全国城市名称爬取 xpath 解析 xpath 解析基础 span class token
  • java获取项目文件绝对路径

    该方法是先根据指定目录创建文件目录后 xff0c 再获取起绝对路径 xff0c 可先在指定目录中放入指定文件 xff0c 这样就可以直接获取起绝对路径 span class token keyword public span span cl
  • 三分钟带你了解最成熟最流行的LAMP网站应用架构

    三分钟带你了解最成熟最流行的LAMP网站应用架构 一 LAMP概述1 各组件的主要作用2 各组件安装顺序 二 编译安装Apache httpd服务准备工作1 关闭防火墙 xff0c 将安装Apache所需软件包传到 opt目录下2 安装环境
  • IDEA通过maven配置Spring保姆级教程

    写在前面 xff1a 此篇文章主要是记录IDEA利用maven配置Spring的全过程 由于本人也是慢慢探索出来的 xff0c 所以有不全或者遗漏的地方 xff0c 还请大家斧正 请耐心看完文章 xff0c 前期工作做完后IDEA才可以配置
  • 策略梯度算法(Policy Gradient)逐行代码详解

    理论部分以及完整代码参看之前的博客 xff1a https blog csdn net qq 47997583 article details 124506650 本文章介绍的是策略梯度算法中的REINFORCE实现 上图为算法流程图 xf
  • python爬虫(自动下载图片)

    爬虫第一步下载第三方工具 requests包 win 43 R 输入cmd点击确定或回车 输入以下命令下载requests包 requests包是python爬虫常用的包 他的下载方式是 pip install requsts 如果觉得下载
  • python json格式转字典

    impor json req 61 json loads 转换的内容
  • mysql安装5.7出现闪退解决办法

    MySQL下载官网 下载地址 xff1a https dev mysql com downloads mysql 我之前用的是5 5的版本升级到5 7是将所有的数据生成到文件里 命令 mysqldump u root p all datab
  • 小程序设置、获取本都缓存、发送请求、渲染数据、转发当前页面、下拉刷新页面

    设置 获取缓存 xff0c 发送请求 xff0c 渲染数据 xff0c 转发当前页面 设置 获取本地缓存设置本地缓存 xff08 wx setStorage xff09 获取本地缓存 xff08 wx getStorageSync xff0