当前位置: 首页 > news >正文

【小程序】常用方法、知识点汇总1

欢迎来到《小5讲堂》
这是《小程序》系列文章,每篇文章将以博主理解的角度展开讲解,
温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!

在这里插入图片描述

目录

  • 前言
  • 请求超时
  • Markdown解析
  • 逐行显示效果
  • 文本变动事件
  • 转发朋友圈
  • 推荐文章

前言

最近在开发微信小程序,时间久了总会把一些常用的方法忘记了,
因此这篇文章汇总下一些接触到且容易忘记的知识点。

请求超时

wx.request,默认情况下,接口请求超时的时间为10秒,可以设置超时时间。
超时,指的是在一定时间内,如果请求接口没有响应,那么请求直接结束。
下面代码设置了超时时间为20秒

wx.request({  url: 'https://example.com/api',  method: 'GET',  timeout: 20000, // 设置超时时间为20秒  success(res) {  // 请求成功后的处理  },  fail(err) {  // 请求失败的处理  }  
});

Markdown解析

微信小程序显示Markdown内容,主要可以通过将Markdown转换为富文本显示的方式来实现。
以下是具体步骤和可能用到的工具:
1.选择转换工具:微信小程序本身并不直接支持Markdown的解析和显示,因此需要借助一些工具或库来实现Markdown到富文本的转换。例如,Towxml是一个常用的库,它可以将HTML和Markdown转换为WXML(WeiXin Markup Language),从而在微信小程序中显示。
2.集成转换库:将选定的转换库(如Towxml)集成到你的微信小程序项目中。这通常涉及将库文件添加到你的项目目录中,并在需要的地方引入和使用这些文件。
3.转换和显示Markdown内容:在你的小程序代码中,使用转换库将Markdown内容转换为WXML格式的富文本。然后,你可以将转换后的富文本内容显示在适当的位置,如页面上的文本组件中。

逐行显示效果

在微信小程序中实现文本逐行出现的效果,可以通过动画或者定时器来实现。
下面是一个使用定时器实现逐行显示文本的简单示例:
首先,你需要在小程序的WXML文件中定义文本内容和显示文本的视图:

xml复制代码<!-- index.wxml -->  <view class="container">    <view class="text-line" wx:for="{{lines}}" wx:key="index" wx:if="{{lines[index].show}}">      {{lines[index].text}}    </view>  </view>

然后,在对应的WXSS文件中定义样式:

css复制代码/* index.wxss */  .container {    /* 设置容器样式 */    padding: 20rpx;  }    .text-line {    /* 设置每行文本的样式 */    margin-bottom: 10rpx;  }

接下来,在JS文件中设置初始数据和逐行显示文本的逻辑:

javascript复制代码// index.js  Page({    data: {      lines: [        { text: '这是第一行文本', show: false },        { text: '这是第二行文本', show: false },        { text: '这是第三行文本', show: false },        // ... 可以添加更多行      ],      currentIndex: 0, // 当前显示的行索引    },      onLoad: function() {      this.showTextLineByLine();    },      showTextLineByLine: function() {      const that = this;      const intervalId = setInterval(function() {        if (that.data.currentIndex < that.data.lines.length) {          that.setData({            ['lines[' + that.data.currentIndex + '].show']: true,          });          that.data.currentIndex++;        } else {          clearInterval(intervalId); // 停止定时器        }      }, 1000); // 每秒显示一行,可以根据需要调整时间间隔    },  });

文本变动事件

在微信小程序中,文本本身并没有一个直接的“变动事件”。但是,你可以通过不同的方式监听与文本变动相关的用户操作或数据变化,从而触发相应的处理逻辑。
以下是一些与文本变动相关的事件和处理方式:

  1. 输入框内容变动
    如果你有一个或组件,并希望监听用户输入的内容变动,可以使用bindinput事件。
xml复制代码<input bindinput="inputChanged" />

在对应的JS文件中:

javascript复制代码Page({    data: {      inputValue: ''    },    inputChanged: function(e) {      this.setData({        inputValue: e.detail.value // 获取输入框当前的值      });      // 这里可以执行其他与文本变动相关的逻辑    }  });
  1. 文本选择或复制
    如果你想要监听文本的选择或复制操作,可以使用bindlongpress事件来捕捉长按操作,然后提示用户选择或复制文本。不过,微信小程序并没有直接提供文本选择或复制完成的事件。

  2. 数据绑定导致的文本变动
    当页面数据发生变化时,通过数据绑定到文本上的内容也会自动更新。这种变动并不是通过事件触发的,而是响应数据的变化。你可以在其他地方(如网络请求回调、定时器、其他事件处理函数等)使用this.setData()来更新数据,从而间接地改变文本内容。

  3. 文本编辑组件(富文本编辑器)
    对于更复杂的文本编辑需求,如富文本编辑,你可能需要使用第三方组件或自定义组件。这些组件可能会提供自己的事件来监听文本内容的变动。

  4. 监听滚动或视图变化
    如果你想要根据文本的滚动位置或视图的变化来执行某些操作,可以使用bindscroll或page-scroll等事件。但这些事件并不是直接监听文本内容的变动,而是与页面的滚动或视图的变化相关。

转发朋友圈

Page({onShareAppMessage() {// 设置转发内容return {title: '分享标题',path: '/pages/index/index',imageUrl: '/images/share.jpg'}},onShareTimeline() {// 设置分享朋友圈内容return {title: '分享标题',query: 'key=value'}}
})

推荐文章

【小程序】小程序登录、用户信息相关接口调整

【小程序】小程序之map组件bindmarkertap标记点点击事件无反应的原因

【小程序】腾讯位置服务之小程序简单使用以及显示附近WC步行路线

总结:温故而知新,不同阶段重温知识点,会有不一样的认识和理解,博主将巩固一遍知识点,并以实践方式和大家分享,若能有所帮助和收获,这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。

相关文章:

【小程序】常用方法、知识点汇总1

欢迎来到《小5讲堂》 这是《小程序》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言请求超时Markdown解析逐行显示效果文本变动事件转发…...

AugmentedReality之路-平面检测(5)

本文介绍通过AR检测水平平面和垂直平面&#xff0c;并将检测到的平面转化为Mesh 1、在首页添加功能入口 在首页添加一个按钮&#xff0c;命名为Start World Track 2、自定义ExecStartAREvent 创建ARSessionConfig并取名为ARSessionConfig_World 自定义ExecStartAREvent&…...

MQ:延迟队列

6.1场景&#xff1a; 1.定时发布文章 2.秒杀之后&#xff0c;给30分钟时间进行支付&#xff0c;如果30分钟后&#xff0c;没有支付&#xff0c;订单取消。 3.预约餐厅&#xff0c;提前半个小时发短信通知用户。 A -> 13:00 17:00 16:30 延迟时间&#xff1a; 7*30 * 60 *…...

Element ui 动态展示表格列,动态格式化表格列的值

需求 后台配置前端展示的表格列&#xff0c;遇到比如 文件大小这样的值&#xff0c;如果后台存的是纯数字&#xff0c;需要进行格式化展示&#xff0c;并且能控制显示的小数位数&#xff0c;再比如&#xff0c;部分列值需要加单位等信息&#xff0c;此外还有状态类&#xff0…...

xxl-job调度任务原理解析

xxljob可以对定时任务进行调度&#xff0c;现在看下定时任务调度的过程。XxlJobAdminConfig实现了InitializingBean接口&#xff0c;spring会调用afterPropertiesSet()进行初始化。大致有以下几个过程&#xff1a; admin服务端初始化 JobTriggerPoolHelper.java#toStart()方法…...

实验2 路由器基本配置

实验2 路由器基本配置 一、 原理描述二、 实验目的三、 实验内容四、 实验步骤1.建立实验拓扑2.基础配置3.配置路由器接口IP地址4.查看路由器配置信息5.连通性测试6.使用抓包工具 一、 原理描述 华为设备支持多种配置方式&#xff0c;操作人员要熟悉使用命令行的方式进行设备管…...

docker部署安装整理

centos下安装部署docker 在CentOS下部署Docker&#xff0c;你需要按照以下步骤进行操作&#xff1a; 更新系统&#xff1a; 首先&#xff0c;确保你的CentOS系统是最新的。打开终端&#xff0c;并运行以下命令来更新你的系统&#xff1a; sudo yum update -y安装所需的软件包…...

为什么你明明拥有5年开发经验,但是依然写不出来一份简历?

前端训练营&#xff1a;1v1私教&#xff0c;终身辅导计划&#xff0c;帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~ Hello&#xff0c;大家好&#xff0c;我是 Sunday。 在最近不到一年的时间里&#xff0c;我跟上千位同学进行了沟通&#x…...

【ZZULIOJ】1062: 最大公约数(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy 提示 code 题目描述 输入两个不大于10的9次方的正整数&#xff0c;输出其最大公约数。 输入 输入两个正整数m和n&#xff0c;数据之间用空格隔开。 输出 输出一个整数&#xff0c;表示m和n的最大公约数。 样…...

北斗导航 | ARAIM算法的原理和性能测试

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== ARAIM算法的原理和性能测试 针对高级接收机自主完好性监视(ARAIM)算法…...

elasticsearch7安全配置--最低安全等级,用户名密码

上一篇博客在centos7上安装了elasticsearch7 接下来对elasticsearch进行安全方面的配置 minimal security 最低安全等级&#xff0c;用户名密码 首先开启xpack vim config/elasticsearch.yml xpack.security.enabled: true由于我是单机配置的&#xff0c;还加了如下配置 d…...

项目架构MVC,DDD学习

写在前面 本文一起看下项目架构DDD&#xff0c;MVC相关的内容。 1&#xff1a;MVC 不管我们做什么项目&#xff0c;自己想想其实只是做了三件事&#xff0c;如下&#xff1a; 其实&#xff0c;这三件事完全在一个类中做完也可以可以正常把项目完成的&#xff0c;就像下面这…...

SQLite的PRAGMA 声明

PRAGMA 语句是特定于 SQLite 的 SQL 扩展&#xff0c;用于 修改 SQLite 库的操作或查询 SQLite 库 内部&#xff08;非表&#xff09;数据。PRAGMA声明使用相同的 接口作为其他 SQLite 命令&#xff08;例如 SELECT、INSERT&#xff09;但 在以下重要方面有所不同&#xff1a; …...

使用ArrayList.removeAll(List list)导致的机器重启

背景 先说一下背景&#xff0c;博主所在的业务组有一个核心系统&#xff0c;需要同步两个不同数据源给过来的数据到redis中&#xff0c;但是每次同步之前需要过滤掉一部分数据&#xff0c;只存储剩下的数据。每次同步的数据与需要过滤掉的数据量级大概在0-100w的数据不等。 由…...

如何在项目中使用uni-ui组件库

1、安装uni-ui npm i dcloudio/uni-ui 2、组件自动引用 配置easycom 使用 npm 安装好 uni-ui 之后&#xff0c;需要配置 easycom 规则&#xff0c;让 npm 安装的组件支持 easycom 打开项目根目录下的 pages.json 并添加 easycom 节点&#xff1a; // pages.json {"e…...

redis的过期策略和内存淘汰机制(redis篇)

分享并学习一下redis的过期策略和内存淘汰机制 在平时的工作或者学习中&#xff0c;即便自己没有实打实的用过redis。但是能有对这方面的思考&#xff0c;再结合一些实际场景和理论&#xff0c;那么我相信自己或者你都会越来越厉害的。 首先&#xff0c;我们需要认清为啥redis要…...

Java中Runnable和Callable有什么不同?(企业真题)

Java中Runnable和Callable有什么不同&#xff1f; 与之前的方式的对比&#xff1a;与Runnable方式的对比的好处 call()可以有返回值&#xff0c;更灵活 call()可以使用throws的方式处理异常&#xff0c;更灵活 Callable使用了泛型参数&#xff0c;可以指明具体的call()的返回值…...

图机器学习导论

图&#xff1a;描述关系数据的通用语言&#xff0c;起源于哥尼斯堡七桥问题 传统的机器学习&#xff1a;数据样本之间独立同分布&#xff0c;简单拟合数据边界&#xff0c;在传统的机器学习中&#xff0c;每个数据样本彼此无关。传统的神经网络&#xff0c;只能处理简单的表格、…...

地推网推拉新平台哪家强?一文清楚告诉你

在当今这个充满副业的时代&#xff0c;地推网推拉新平台的寻找与对接成为了许多人关注的焦点。那么&#xff0c;我们应该如何找到那些既靠谱又有潜力的拉新项目呢&#xff1f; 经过深入研究和全网检索&#xff0c;我为大家盘点了5个值得一试地推网推拉新平台。 尤其是“聚小推…...

Day:004(4) | Python爬虫:高效数据抓取的编程技术(数据解析)

XPath工具 浏览器-元素-CtrlF 浏览器-控制台- $x(表达式) Xpath helper (安装包需要科学上网) 问题 使用离线安装包 出现 程序包无效 解决方案 使用修改安装包的后缀名为 rar&#xff0c;解压文件到一个文件夹&#xff0c;再用 加载文件夹的方式安装即可 安装 python若使用…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...