快速掌握微信小程序在wxml页面字符串截取的技巧

前言

在小程序的开发中，我们经常需要对字符串进行截取和处理，以满足不同的需求。特别是在 wxml 页面中，对于字符串的截取处理更是必不可少。本文将介绍如何在微信小程序的 wxml 页面中截取字符串，以便于开发者更好地应用和运用微信小程序的功能。

---

• 定义一个字符串

  dataList: "123456789"
  

  在vue中

  {{dataList.substring(5, 10)}}
  

  
  然而在小程序中

  {{dataList.substring(5, 10)}}
  

  

你会发现在小程序中 substring 方法并没有生效，看了官方文档后才发现，小程序有自己的一套脚本语言，结合 WXML，可以构建出页面的结构。需要注意的是，WXS 与 JavaScript 是不同的语言，它有自己的语法，并不和 JavaScript 一致。有关于 WXS 更详细的介绍大家可以去 微信官方文档 查阅。

---

话不多说，下面用一个简单的实例教你怎么在微信小程序使用 WXS。

---

实例

capture.wxs文件（公共文件）

var subStr = function (val, start, stop) {
    if (val) {
        return val.substring(start, stop)
    } else {
        return ''
    }
}
var subDate = function (val) {
    if (val) {
        return val.substring(5, 10)
    } else {
        return ''
    }
}
module.exports = {
    subStr: subStr,
    subDate: subDate,
};

wxml文件

<!-- 引入文件 -->
<wxs src="../../utils/capture.wxs" module="tools" />
<!-- 调用tools.subDate方法截取字符串 -->
<view>{{tools.subDate(dataList)}}</view>

js文件

Page({
  data: {
    dataList: "123456789"
  },
})

运用了 wxs 后，你就会发现能够在微信小程序中愉快的使用 substring 方法啦。