微信小程序text组件属性详解与实战应用指南

// space 属性取值说明
const spaceOptions = {
  'ensp': '中文字符空格一半大小',
  'emsp': '中文字符空格大小', 
  'nbsp': '根据字体设置的空格大小'
}

<!-- pages/text-demo/index.wxml -->
<view class="container">
  <!-- 基础文本展示 -->
  <text>这是一段普通文本</text>
  
  <!-- 可选择文本 -->
  <text user-select="true">这段文本可以被用户选择复制</text>
  
  <!-- 空格处理示例 -->
  <text space="emsp">文本    包含    多个    空格</text>
  
  <!-- HTML 实体字符解码 -->
  <text decode="true">&lt;标签&gt; &amp; &quot;引号&quot;</text>
</view>

// pages/richtext/index.js
Page({
  data: {
    // 文章内容数据
    article: {
      title: '技术分享：微信小程序开发实践',
      content: '本文将介绍微信小程序的开发技巧...',
      tags: ['小程序', '前端', '移动开发'],
      readCount: 1024,
      publishTime: '2025-09-19'
    },
    
    // 格式化后的显示文本
    formattedText: '',
    
    // 高亮关键词
    keywords: ['微信', '小程序', 'text']
  },
  
  onLoad() {
    this.formatArticleContent();
    this.highlightKeywords();
  },
  
  // 格式化文章内容
  formatArticleContent() {
    const { article } = this.data;
    const formatted = `
      ${article.title}\n
      发布时间：${article.publishTime} | 阅读量：${this.formatNumber(article.readCount)}\n
      ${article.content}
    `;
    
    this.setData({
      formattedText: formatted.trim()
    });
  },
  
  // 数字格式化
  formatNumber(num) {
    if (num >= 10000) {
      return (num / 10000).toFixed(1) + 'w';
    }
    return num.toString();
  },
  
  // 关键词高亮处理
  highlightKeywords() {
    let content = this.data.article.content;
    const keywords = this.data.keywords;
    
    keywords.forEach(keyword => {
      const regex = new RegExp(keyword, 'gi');
      content = content.replace(regex, `【${keyword}】`);
    });
    
    this.setData({
      'article.content': content
    });
  }
});

<!-- pages/richtext/index.wxml -->
<view class="article-container">
  <!-- 文章标题 -->
  <text class="article-title" user-select="true">
    {{article.title}}
  </text>
  
  <!-- 文章元信息 -->
  <view class="article-meta">
    <text class="meta-item">发布时间：{{article.publishTime}}</text>
    <text class="meta-item" space="nbsp">  |  </text>
    <text class="meta-item">阅读量：{{article.readCount}}</text>
  </view>
  
  <!-- 标签列表 -->
  <view class="tag-list">
    <block wx:for="{{article.tags}}" wx:key="index">
      <text class="tag-item">{{item}}</text>
    </block>
  </view>
  
  <!-- 文章正文 -->
  <text class="article-content" 
        user-select="true" 
        space="emsp"
        decode="true">
    {{article.content}}
  </text>
</view>

/* pages/richtext/index.wxss */
.article-container {
  padding: 30rpx;
  background-color: #ffffff;
}
 
.article-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
  line-height: 1.5;
}
 
.article-meta {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
 
.meta-item {
  font-size: 24rpx;
  color: #999999;
}
 
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 30rpx;
}
 
.tag-item {
  padding: 6rpx 16rpx;
  background-color: #f0f0f0;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #666666;
}
 
.article-content {
  display: block;
  font-size: 28rpx;
  color: #444444;
  line-height: 1.8;
  text-align: justify;
}

// utils/textProcessor.js
class TextProcessor {
  constructor() {
    this.chunkSize = 500; // 每段文本长度
  }
  
  // 文本分段处理
  splitTextIntoChunks(text) {
    const chunks = [];
    let currentIndex = 0;
    
    while (currentIndex < text.length) {
      const chunk = text.slice(currentIndex, currentIndex + this.chunkSize);
      chunks.push({
        id: `chunk_${chunks.length}`,
        content: chunk,
        loaded: false
      });
      currentIndex += this.chunkSize;
    }
    
    return chunks;
  }
  
  // 懒加载文本段落
  lazyLoadChunks(chunks, callback) {
    let loadedCount = 0;
    const loadInterval = setInterval(() => {
      if (loadedCount < chunks.length) {
        chunks[loadedCount].loaded = true;
        callback(chunks);
        loadedCount++;
      } else {
        clearInterval(loadInterval);
      }
    }, 100); // 每100ms加载一段
  }
}
 
export default TextProcessor;

// utils/textCache.js
class TextCache {
  constructor() {
    this.cache = {};
    this.maxCacheSize = 50; // 最大缓存条数
  }
  
  // 获取缓存文本
  get(key) {
    const cached = this.cache[key];
    if (cached) {
      cached.lastAccess = Date.now();
      return cached.value;
    }
    return null;
  }
  
  // 设置缓存
  set(key, value) {
    // 检查缓存大小
    if (Object.keys(this.cache).length >= this.maxCacheSize) {
      this.evictOldest();
    }
    
    this.cache[key] = {
      value: value,
      lastAccess: Date.now()
    };
  }
  
  // 清除最旧的缓存
  evictOldest() {
    let oldestKey = null;
    let oldestTime = Date.now();
    
    for (const key in this.cache) {
      if (this.cache[key].lastAccess < oldestTime) {
        oldestTime = this.cache[key].lastAccess;
        oldestKey = key;
      }
    }
    
    if (oldestKey) {
      delete this.cache[oldestKey];
    }
  }
}
 
export default TextCache;

// pages/news-reader/index.js
import TextProcessor from '../../utils/textProcessor';
import TextCache from '../../utils/textCache';
 
const textProcessor = new TextProcessor();
const textCache = new TextCache();
 
Page({
  data: {
    news: {
      id: 'news_001',
      title: '技术前沿：AI 编程助手 TRAE 引领开发新模式',
      summary: 'TRAE IDE 通过深度集成 AI 能力，为开发者提供智能代码补全、自动化测试等功能...',
      content: '',
      author: '技术编辑部',
      publishTime: '2025-09-19 10:30',
      category: '技术资讯'
    },
    
    // 显示配置
    displayConfig: {
      fontSize: 'medium', // small, medium, large
      lineHeight: 'normal', // compact, normal, loose
      theme: 'light' // light, dark, sepia
    },
    
    // 阅读进度
    readingProgress: 0,
    textChunks: [],
    isLoading: true
  },
  
  onLoad(options) {
    const newsId = options.id || 'news_001';
    this.loadNewsContent(newsId);
    this.initDisplayConfig();
  },
  
  // 加载新闻内容
  async loadNewsContent(newsId) {
    // 先检查缓存
    const cached = textCache.get(newsId);
    if (cached) {
      this.processContent(cached);
      return;
    }
    
    // 模拟异步加载
    wx.showLoading({ title: '加载中...' });
    
    setTimeout(() => {
      const fullContent = this.generateMockContent();
      textCache.set(newsId, fullContent);
      this.processContent(fullContent);
      wx.hideLoading();
    }, 1000);
  },
  
  // 生成模拟内容
  generateMockContent() {
    return `
      在当今软件开发领域，AI 编程助手正在成为提升开发效率的关键工具。TRAE IDE 作为新一代智能开发环境，通过深度集成 AI 能力，为开发者带来了全新的编程体验。
 
      TRAE 的核心优势在于其智能代码补全功能。不同于传统的代码提示，TRAE 能够理解上下文语境，提供更加精准的代码建议。开发者只需输入少量代码片段，系统就能自动生成完整的函数实现。
 
      除了代码补全，TRAE 还提供了强大的代码重构能力。通过 AI 分析，系统能够识别代码中的潜在问题，并提供优化建议。这不仅提高了代码质量，也帮助开发者学习最佳实践。
 
      在测试方面，TRAE 支持自动生成单元测试。系统会分析函数的输入输出，自动创建测试用例，大大减少了编写测试代码的工作量。
 
      TRAE 还集成了智能文档生成功能。开发者编写代码时，系统会自动生成相应的文档注释，确保代码的可维护性。
 
      展望未来，AI 编程助手将继续evolve，为开发者提供更多智能化功能，真正实现"让编程更简单"的愿景。
    `.trim();
  },
  
  // 处理内容
  processContent(content) {
    const chunks = textProcessor.splitTextIntoChunks(content);
    
    this.setData({
      'news.content': content,
      textChunks: chunks,
      isLoading: false
    });
    
    // 渐进式加载文本段落
    textProcessor.lazyLoadChunks(chunks, (updatedChunks) => {
      this.setData({ textChunks: updatedChunks });
    });
  },
  
  // 初始化显示配置
  initDisplayConfig() {
    const config = wx.getStorageSync('displayConfig');
    if (config) {
      this.setData({ displayConfig: config });
    }
  },
  
  // 切换字体大小
  toggleFontSize() {
    const sizes = ['small', 'medium', 'large'];
    const currentIndex = sizes.indexOf(this.data.displayConfig.fontSize);
    const nextIndex = (currentIndex + 1) % sizes.length;
    
    this.setData({
      'displayConfig.fontSize': sizes[nextIndex]
    });
    
    this.saveDisplayConfig();
  },
  
  // 切换主题
  toggleTheme() {
    const themes = ['light', 'dark', 'sepia'];
    const currentIndex = themes.indexOf(this.data.displayConfig.theme);
    const nextIndex = (currentIndex + 1) % themes.length;
    
    this.setData({
      'displayConfig.theme': themes[nextIndex]
    });
    
    this.saveDisplayConfig();
  },
  
  // 保存显示配置
  saveDisplayConfig() {
    wx.setStorageSync('displayConfig', this.data.displayConfig);
  },
  
  // 复制文本
  copyContent() {
    wx.setClipboardData({
      data: this.data.news.content,
      success: () => {
        wx.showToast({
          title: '已复制到剪贴板',
          icon: 'success'
        });
      }
    });
  },
  
  // 分享文章
  onShareAppMessage() {
    return {
      title: this.data.news.title,
      path: `/pages/news-reader/index?id=${this.data.news.id}`
    };
  }
});

<!-- pages/news-reader/index.wxml -->
<view class="reader-container {{displayConfig.theme}}">
  <!-- 顶部工具栏 -->
  <view class="toolbar">
    <text class="tool-btn" bindtap="toggleFontSize">字体</text>
    <text class="tool-btn" bindtap="toggleTheme">主题</text>
    <text class="tool-btn" bindtap="copyContent">复制</text>
    <button class="tool-btn" open-type="share">分享</button>
  </view>
  
  <!-- 文章标题 -->
  <text class="news-title {{displayConfig.fontSize}}" 
        user-select="true">
    {{news.title}}
  </text>
  
  <!-- 文章信息 -->
  <view class="news-info">
    <text class="info-item">{{news.author}}</text>
    <text class="info-divider" space="nbsp"> | </text>
    <text class="info-item">{{news.publishTime}}</text>
    <text class="info-divider" space="nbsp"> | </text>
    <text class="info-item">{{news.category}}</text>
  </view>
  
  <!-- 文章摘要 -->
  <text class="news-summary {{displayConfig.fontSize}}" 
        space="emsp">
    {{news.summary}}
  </text>
  
  <!-- 文章正文 - 分段加载 -->
  <view class="news-content">
    <block wx:for="{{textChunks}}" wx:key="id">
      <text wx:if="{{item.loaded}}" 
            class="content-chunk {{displayConfig.fontSize}} {{displayConfig.lineHeight}}"
            user-select="true"
            space="emsp"
            decode="true">
        {{item.content}}
      </text>
    </block>
  </view>
  
  <!-- 加载提示 -->
  <view wx:if="{{isLoading}}" class="loading">
    <text>内容加载中...</text>
  </view>
</view>

/* pages/news-reader/index.wxss */
.reader-container {
  min-height: 100vh;
  padding: 20rpx;
  transition: all 0.3s ease;
}
 
/* 主题样式 */
.reader-container.light {
  background-color: #ffffff;
  color: #333333;
}
 
.reader-container.dark {
  background-color: #1a1a1a;
  color: #e0e0e0;
}
 
.reader-container.sepia {
  background-color: #f4ecd8;
  color: #5c4b37;
}
 
/* 工具栏 */
.toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #e0e0e0;
  margin-bottom: 30rpx;
}
 
.tool-btn {
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  border: 1rpx solid currentColor;
  border-radius: 20rpx;
  opacity: 0.7;
}
 
/* 标题样式 */
.news-title {
  display: block;
  font-weight: bold;
  margin-bottom: 20rpx;
  line-height: 1.4;
}
 
.news-title.small { font-size: 32rpx; }
.news-title.medium { font-size: 38rpx; }
.news-title.large { font-size: 44rpx; }
 
/* 信息栏 */
.news-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  opacity: 0.6;
}
 
.info-item {
  font-size: 24rpx;
}
 
.info-divider {
  margin: 0 10rpx;
}
 
/* 摘要 */
.news-summary {
  display: block;
  padding: 20rpx;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  line-height: 1.6;
}
 
.news-summary.small { font-size: 26rpx; }
.news-summary.medium { font-size: 28rpx; }
.news-summary.large { font-size: 32rpx; }
 
/* 正文内容 */
.news-content {
  padding-bottom: 50rpx;
}
 
.content-chunk {
  display: block;
  text-align: justify;
  margin-bottom: 20rpx;
}
 
.content-chunk.small { font-size: 28rpx; }
.content-chunk.medium { font-size: 30rpx; }
.content-chunk.large { font-size: 34rpx; }
 
.content-chunk.compact { line-height: 1.5; }
.content-chunk.normal { line-height: 1.8; }
.content-chunk.loose { line-height: 2.0; }
 
/* 加载提示 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50rpx;
  opacity: 0.5;
}

// utils/textHelper.js
const textHelper = {
  // HTML实体编码
  encodeHTML(text) {
    const entities = {
      '&': '&',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    
    return text.replace(/[&<>"']/g, match => entities[match]);
  },
  
  // 处理emoji表情
  processEmoji(text) {
    // 微信小程序原生支持emoji，通常不需要特殊处理
    return text;
  },
  
  // 过滤敏感词
  filterSensitiveWords(text, words = []) {
    let filtered = text;
    words.forEach(word => {
      const regex = new RegExp(word, 'gi');
      filtered = filtered.replace(regex, '*'.repeat(word.length));
    });
    return filtered;
  }
};
 
export default textHelper;

// utils/performanceMonitor.js
class PerformanceMonitor {
  constructor() {
    this.metrics = {};
  }
  
  // 监控文本渲染时间
  measureTextRender(callback) {
    const startTime = Date.now();
    
    callback();
    
    const endTime = Date.now();
    const renderTime = endTime - startTime;
    
    this.metrics.lastRenderTime = renderTime;
    
    if (renderTime > 100) {
      console.warn(`文本渲染耗时过长: ${renderTime}ms`);
    }
    
    return renderTime;
  }
  
  // 获取性能报告
  getReport() {
    return {
      ...this.metrics,
      timestamp: Date.now()
    };
  }
}
 
export default PerformanceMonitor;