ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【小程序】常用方法、知识点汇总1 [打印本页]

---

作者: 瑞星    时间: 2024-6-14 23:02
标题: 【小程序】常用方法、知识点汇总1
接待来到《小5讲堂》
这是《小程序》系列文章，每篇文章将以博主理解的角度展开讲解，
温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！
  

  
媒介

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

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

1. wx.request({  
2.   url: 'https://example.com/api',  
3.   method: 'GET',  
4.   timeout: 20000, // 设置超时时间为20秒  
5.   success(res) {  
6.     // 请求成功后的处理  
7.   },  
8.   fail(err) {  
9.     // 请求失败的处理  
10.   }  
11. });

复制代码

Markdown剖析

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

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

1. 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文件中界说样式：

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

复制代码

接下来，在JS文件中设置初始数据和逐行体现文本的逻辑：

1. 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); // 每秒显示一行，可以根据需要调整时间间隔    },  });

复制代码

文本变动事件

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

• 输入框内容变动
  假如你有一个或组件，并希望监听用户输入的内容变动，可以利用bindinput事件。
  

1. xml复制代码<input bindinput="inputChanged" />

复制代码

在对应的JS文件中：

1. javascript复制代码Page({    data: {      inputValue: ''    },    inputChanged: function(e) {      this.setData({        inputValue: e.detail.value // 获取输入框当前的值      });      // 这里可以执行其他与文本变动相关的逻辑    }  });

复制代码

• 文本选择或复制
  假如你想要监听文本的选择或复制操作，可以利用bindlongpress事件来捕获长按操作，然后提示用户选择或复制文本。不过，微信小程序并没有直接提供文本选择或复制完成的事件。
  
• 数据绑定导致的文本变动
  当页面数据发生变革时，通过数据绑定到文本上的内容也会自动更新。这种变动并不是通过事件触发的，而是响应数据的变革。你可以在其他地方（如网络哀求回调、定时器、其他事件处理函数等）利用this.setData()来更新数据，从而间接地改变文本内容。
  
• 文本编辑组件（富文本编辑器）
  对于更复杂的文本编辑需求，如富文本编辑，你大概需要利用第三方组件或自界说组件。这些组件大概会提供自己的事件来监听文本内容的变动。
  
• 监听滚动或视图变革
  假如你想要根据文本的滚动位置或视图的变革来执行某些操作，可以利用bindscroll或page-scroll等事件。但这些事件并不是直接监听文本内容的变动，而是与页面的滚动或视图的变革相干。
  

转发朋友圈

1. Page({
2.   onShareAppMessage() {
3.     // 设置转发内容
4.     return {
5.       title: '分享标题',
6.       path: '/pages/index/index',
7.       imageUrl: '/images/share.jpg'
8.     }
9.   },
10.   onShareTimeline() {
11.     // 设置分享朋友圈内容
12.     return {
13.       title: '分享标题',
14.       query: 'key=value'
15.     }
16.   }
17. })

复制代码

推荐文章

【小程序】小程序登录、用户信息相干接口调整
【小程序】小程序之map组件bindmarkertap标记点点击事件无反应的原因
【小程序】腾讯位置服务之小程序简单利用以及体现附近WC步行门路
   总结：温故而知新，不同阶段重温知识点，会有不一样的熟悉和理解，博主将巩固一遍知识点，并以实践方式和大家分享，若能有所帮助和收获，这将是博主最大的创作动力和荣幸。也期待熟悉更多优秀新老博主。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4