【微信小程序】小程序知识补充篇

news2025/4/19 14:02:52

🎁写在前面:
观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列又更新了呀。
还有就是中秋节就快来啦,程序员过中秋,当然是要好好放松一下啦,那么中秋前我们就不能偷懒了,赶紧学习起来哈哈!
上文我们讲解了页面导航,那么接下来我们补充一点小程序的碎片知识和微信独有的语言wxs初识,那就马上开始吧。

文章目录

    • 一,下拉刷新
    • 二,上拉触底
    • 三,自定义编译模式
    • 四,生命周期
    • 五,wxs初识

一,下拉刷新


下拉刷新是用户在小程序中比较常见的操作,顾名思义就是用户通过手指下拉操作使页面数据重新加载,这个是需要我们自己来配置的。

首先是下拉操作的启用,分为两种,一种是全局开启,也就是在小程序的所有页面我们都可以实现下拉操作,对于这种,我们就需要在全局配置文件app.json中找到window节点,在里面添加enablePullDownRefresh : true,如下所示。

在这里插入图片描述

不过这样并不友好,全局开启,有些不需要刷新操作的页面也会有下拉操作,多余的同时,给用户感受可能不佳。

因此比较推荐第二种方法,局部开启,也就是给一个页面开启,配置项与上述是一致的,不过我们需要配置在对应页面文件夹的页面json文件配置,这时不用指定window节点,如下所示。

在这里插入图片描述
那么默认的下拉loading效果是这样的:

在这里插入图片描述
我们可以小小修改它们的样式,如:

"backgroundColor" : "#909090",
"backgroundTextStyle" : "dark"

到这里我们会发现,下拉操作没有带来数据重新加载,这时候就是需要监听用户的下拉事件,onPullDownRefresh(),在这里面我们就可以进行数据的更新啦,这个回调函数在初始化时就已经准备好了,在这里:

在这里插入图片描述
回调函数的操作我们基本上可以分为三步

onPullDownRefresh() {
	// 1.将重要的、需要重新加载的数据重置为默认值
	// 2.数据请求,重新获取数据并渲染
	// 3.停止下拉刷新样式,这是需要我们手动停止的,只需要调用
	wx.stopPullDownRefresh()
}

二,上拉触底


上拉触底的操作经常用来加载更多数据,对此我们在web的学习中已经非常熟练了,上拉触底在小程序中一般不设置样式,我们直接监听该事件,通过onReachBottom(),这也是在初始化就准备好了,我们直接在页面的json文件找到使用即可。

当然,我们还可以配置上拉触底的距离,默认是,滚动到距离底部50px触发,配置项为onReachBottomDistance

通常来说,在上拉触底获取更多数据中,我们需要加上节流处理,防止多次发送数据请求。

里面的回调函数也没啥说的,请求新的数据后渲染更多盒子。


三,自定义编译模式


在开发调试过程中,我们会多次让小程序重新编译,然后查看效果,但在微信开发者工具的普通编译中,每次重新加载,都会默认打开首页页面,我们还需要点进相对应修改的页面查看,很不方便,那么,我们就可以使用自定义编译模式,选择启动页面。

在这里插入图片描述
我们还可以传入启动参数,非常nice。


四,生命周期


生命周期其实之前有提到过,那么这里就简单概述一下,并添加一点补充。

小程序的生命周期其实就像vue的生命周期一样,就是各个时间阶段下挂了几个内置的函数钩子,这些钩子自动会按一定的次序执行,我们可以通过封装这些函数,来使得某一个代码块,在一个特定的时间段被调用。

小程序的生命周期分为应用和页面,应用可以理解为整个小程序,从关系上看,应用包含页面,应用的生命周期函数在app.js文件中声明,有onLaunch,小程序初始化完成即调用,有onShow,小程序启动时或者是小程序从后台进入前台(切前台)时调用,还有onHide,切后台的时候调用。

对于页面,在定义在page中有onLoadonShowonReadyonHideonUnload,其中onShowonHide和应用的解释差不多,在页面被显示/隐藏时调用,其他三个钩子只执行一次,onReady,初次渲染完成调用。


五,wxs初识


wxs是微信独有的脚本语言,用来帮助小程序渲染页面结构的,注意是页面结构,也就是其实它对JS负责的逻辑层并没有太大的参与,wxs我们可以理解为一个过滤器,我们学过,过滤器我们认知中就是一个函数,对特定数据进行处理,然后将结果渲染到页面上,也就是对数据的加工。

比如获取到时间戳,把它改成一个自己想要的格式,并渲染到页面。

wxs相对于js有几个比较特殊的地方,或者说它俩之间没啥关系。

  1. wxs有自己的数据类型,numberstringbooleanobjectfunctionarray
  2. wxs不能调用js文件的函数,也不能调用微信的apiwxs的函数不可以作为组件的事件回调。
  3. iOs中,wxs的运行效率比js高很多,在2~20倍之间,而在安卓,两者都运行效率基本没有差别。

今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章,感谢您的支持,您的支持是我们创作的最大动力!!!
最后祝小伙伴们中秋节快乐呀!!!

债见~~

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

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

相关文章

Controller层接收前端传参的几种方法。@RequestParam、@RequestBody、@PathVariable。及参数校验。

一、RequestParam 主要用于将请求参数区域的数据映射到控制层方法的参数上 // http://localhost:8080/wh/user/edit?Id9452659856325148452&name天天向上// RequestParam源码Target({ElementType.PARAMETER}) // 只能作用于参数上 Retention(RetentionPolicy.RUNTIME) D…

vue watch监听数据解决新旧值一样的问题(newValue, oldValue)

watch是监听 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值。 基础用法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge…

异步函数async

什么是同步异步 在最新的ES7&#xff08;ES2017&#xff09;中提出的前端异步特性&#xff1a;async、await。 在了解async和await之前得先明白什么是同步函数&#xff0c;什么是异步函数。 同步函数&#xff1a;当一个函数是同步执行时&#xff0c;那么当该函数被调用时不会…

前端CryptoJS和Java后端数据互相加解密(AES)

目录一、序言二、关于前端CryptoJS1、CryptoJS简单介绍2、加密和填充模式选择3、前端AES加解密示例(1) cryptoutils工具类(2) 测试用例(3) 加解密后输出内容说明三、Java后端AES加解密1、Java中支持的加密模式和填充说明2、工具类CryptoUtils3、测试用例一、序言 最近刚好在做…

nodejs——解决跨域问题

目录 1什么是跨域 2解决 1 jsonp(缺点&#xff1a;不能请求post请求&#xff09; 1 index.html页 2 proxy.js页面 搭建一个服务器&#xff08;写好代码后&#xff0c;在cmd上启动&#xff09; 3效果 2服务端代理 &#xff08;由于后端请求不受浏览器同源策略影响&…

Bootstrap、栅格系统布局

一、Bootstrap Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架&#xff0c;具有简单、灵活的特性&#xff0c;拥有样式库、组件和插件。 Bootstrap常用来开发响应式布局和移动设备优先的Web项目&#xff0c;能够帮助开发者快速搭建前端页面。Bootstrap官方网站:Boot…

VUE3构建Cesium项目

目录 1.Cesium开发参考资料 2.VUE中使用Cesium 2.1 使用VUE创建项目 1.创建test项目 2.项目中引入Cesium 3.修改App.vue如下 4.将cesium静态文件复制至public下 5.运行效果 1.Cesium开发参考资料 Cesium官方网站&#xff1a;Cesium: The Platform for 3D Geospatial …

前端接收 type: “application/octet-stream“ 格式的数据并下载,解决后端返回不唯一

前端接收 type: “application/octet-stream“ 格式的数据并下载&#xff0c;还有后端既返回octet-stream还返回JSON数据时的处理方法 今天些项目的时候&#xff0c;后端改了一下文件下载的方式&#xff0c;打算用接口返回 type: “application/octet-stream“格式的数据&…

【微信小程序】全局配置

目录 全局配置文件及常用的配置项 全局配置 - window 1. 小程序窗口的组成部分 2. 了解 window 节点常用的配置项 3. 设置导航栏的标题 4. 设置导航栏的背景色 5. 设置导航栏的标题颜色 6. 全局开启下拉刷新功能 7. 设置下拉刷新时窗口的背景色 8. 设置下拉刷新时 lo…

echarts 柱状图滚动

实现效果&#xff1a;柱形图展示水平滚动条&#xff0c;并且鼠标滚动支持让滚动条平移 echarts文档里&#xff0c;图形的滚动条分两种 内置型 &#xff08;效果是&#xff1a; 鼠标在图中点击拖动平移&#xff0c;在图中滚动缩放&#xff09;滚动条型 &#xff08;效果是&…

高德地图自定义图标的点标记Marker--初体验(二)

点标记Marker创建一个默认图标的点标记:创建一个自定义图标的点标记:new AMap.Marker({}) 参数说明本文以Marker为主&#xff0c;其他点标记方法大差不差 通过上两篇文章我们已经了解到如何引入高德地图并进行初始化了&#xff0c;本文主要讲解普通点标记Marker,Marker 类型推荐…

框架获取当前登录用户以及用户信息

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 前言 &#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端中级工程师 &#x1f525; 三连支持&#xff1a;如果此文还不错的话&#xff0c;还请 ❤️关注、&…

设置浏览器显示小于12px以下字体的三种方法

使用场景&#xff1a; 以往设计图给的字号一般最小就是12px&#xff0c; 开发人员一般是使用谷歌浏览器来进行调试运行。 谷歌浏览器上显示字体最小为12px&#xff0c;css设置font-size&#xff1a;10px&#xff0c;运行代码显示结果仍然是12px大小&#xff0c;但是挡不住甲方…

TypeError The view function did not return a valid response. The function either returned None 的解决

使用flask框架制作登录、注册的页面时&#xff0c;app.py运行成功&#xff0c;数据库有用户&#xff0c;1234&#xff0c;密码也是1234 点击登录之后&#xff0c; 报如下错误。 TypeError TypeError: The view function did not return a valid response. The function either …

Vue3中的父传子和子传父如何实现

大家都知道Vue2中父传子是通过父组件绑定一个属性&#xff0c;子组件再用props进行接收&#xff0c;子传父是通过this.$emit那么Vue3中有什么不同呢&#xff1f;以下为您解答谜团 #Vue3的父传子 一.现在父组件调用子组件的时候,通过动态属性把数据传递过去 二.在子组件通过prop…

XSS漏洞及其原理(详解)

文章目录前言一、XSS漏洞原理1.概述2.利用方式3.执行方式4.攻击对象5.XSS危害&#xff08;1&#xff09;窃取cookie&#xff08;2&#xff09;未授权操作&#xff08;3&#xff09;传播蠕虫病毒6.简单代码7.XSS验证8.二、XSS漏洞分类1.反射型XSS原理特点举个栗子&#xff1a;2.…

EasyExcel使用与步骤

一、导入依赖&#xff08;3.1.0版本不需要poi依赖&#xff09; <!-- easyExcel--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.1</version></dependency>二、写数据…

nvm下node安装;node环境变量配置

1、nvm安装 1、双击安装文件 nvm-setup.exe 2、选择nvm安装路径 3、选择nodejs路径 4、确认安装即可 5、安装完确认 打开CMD&#xff0c;输入命令 nvm &#xff0c;安装成功则如下显示。可以看到里面列出了各种命令&#xff0c;本节最后会列出这些命令的中文示意。 6、…

nodejs和npm版本不匹配

前言&#xff1a;我是因为要用vue创建项目&#xff0c;之后发现创建项目创建不上去&#xff0c;我想的是安装vue的脚手架工具&#xff0c;但是npm死活安装不上去&#xff0c;一直报错&#xff0c;我是一直在网上找解决方法&#xff0c;之后我自己终于解决了&#xff0c;心情是非…

解决el-tree子节点过多导致渲染缓慢问题

1、问题背景 在使用el-tree中&#xff0c;通常会调用后端接口从而去渲染tree。若后端返回数据量过于庞大&#xff0c;则会导致el-tree渲染缓慢的问题。此时我们通常会使用懒加载tree的方式&#xff0c;也就是点击某一个节点后去调取接口动态获取该节点的子数据。这种方式的确会…