可以先浏览下官方文档，戳这里

还参考了，大神的文章，戳这里

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

在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
}

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>

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

微信小程序wxml页面实现对时间戳格式转换
从数据库中返回的文章发布时间为时间戳,想在wxml页面调用的时候直接进行转换尝试了下使用wxs,最后实现了需要的效果部分代码为网上参考,此处记录下首先新建一个my.wxs文件其中写了两个函数 ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
微信小程序-WXML转换类型
微信小程序-WXML转换类型情景:需要在WXML中把字符串转化成数字类型解决:引入WXS wxs是小程序的一套脚本语言,结合wxml,可以构建出页面的结构. wxs不依赖于运行时的基础库版本,可以 ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
标题微信小程序提示页面未注册问题解决
标题微信小程序提示页面未注册问题解决 1.出现的问题在WXML部分编译完成后页面可以正常显示样式,然而在.js文件编辑完成后进行编译时会出现如下错误提示: 2.出现的原因及解决方法 .JS文件中缺少 ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...

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

wxs的使用方法

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

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

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

最新文章

热门文章