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

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

在这里插入图片描述

前言

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

请求超时

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. HuTool工具类方法汇总

    2024-04-10 17:10:04       38 阅读
  2. selenium execute_script方法汇总

    2024-04-10 17:10:04       9 阅读
  3. docker排错及知识

    2024-04-10 17:10:04       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-10 17:10:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-10 17:10:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-10 17:10:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-10 17:10:04       20 阅读

热门阅读

  1. 算法| ss 贪心

    2024-04-10 17:10:04       13 阅读
  2. 机器学习中的 K-均值聚类算法及其优缺点

    2024-04-10 17:10:04       20 阅读
  3. 200方啤酒酿造废水处理设备厂家定制

    2024-04-10 17:10:04       12 阅读
  4. .NET常见的20个面试题

    2024-04-10 17:10:04       14 阅读
  5. Linux 数据盘分区自动化脚本 pro/plus 版本

    2024-04-10 17:10:04       14 阅读
  6. postcss

    2024-04-10 17:10:04       16 阅读
  7. ssh远程压测断网,导致程序中断,解决方案

    2024-04-10 17:10:04       12 阅读
  8. 5.7Python之元组

    2024-04-10 17:10:04       11 阅读