微信小程序WXML页面上直接截取字符串 wxs截取字符串

谁借莪１个温暖的怀抱￠ 2022-12-23 11:16 500阅读 0赞

[可以先浏览下官方文档，戳这里][Link 1]

[还参考了，大神的文章，戳这里][Link 2]

首先我的需求，如图，我想要的效果是 2020年11月19日，后端给我的数据是 20201119 ，于是我很自然的，\{ \{item.templateName.slice(0,4)\}\}，然后报错，发现，小程序不支持在 wxml 页面直接修改。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

在wxml页面中，只能在插值 \{ \{ \}\} 中写简单的js表达式，而不能调用方法，例如想截取字符串，就不能调用slice()方法。

通常的解决办法是在page的data对象中先把这个字符串截取好赋给某个变量，然后在页面中使用这个变量，但是问题又来了，如果变量多了呢，是不是要定义很多次？

在 html 中引入像 artTemplate 这样的模板后，在页面中只要在界限符内就能使用任何js语法，而不仅仅只是显示出表达式。

相对来说 wxml 中使用 js 语法就比较薄弱了，wxs就是弥补了这样的短处。

# **wxs的使用方法** #

### 1.在项目里，新建 wxs 文件，并写好想调用的方法，记得导出 ###

function my_slice(str,a,b){
      return str.slice(a,b);
    }
    module.exports = {
      my_slice: my_slice
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

### 2. 在需要使用的 wxml 页面直接引用就行，很方便。（这里不必要的代码，循环什么的我就删掉了，各位可根据需要自行修改） ###

<wxs src="../../utils/string.wxs" module="tools" />
        <view>
            {
       {tools.my_slice(item.createTime,0,4)}}年{
       {tools.my_slice(item.createTime,5,7)}}月{
       {tools.my_slice(item.createTime,6,8)}}日
        </view>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
[Link 2]: https://www.cnblogs.com/yk-68/p/9296637.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20221120/c4d721ce57bb4447b5ccce4554392620.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201124203842640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201124204022566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70