微信小程序在wxml页面中截取字符串

前言

当你兴致勃勃的在微信小程序 wxml 页面中使用 substring 方法截取字符串时，你会发现原本适用于 vue 的方法在微信小程序中压根不适用，经查阅，原来微信小程序有自己独一套的处理方法。

定义一个字符串

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 方法啦。

微信小程序在wxml页面中截取字符串相关推荐

微信小程序的 .wxml文件中如何加入多个空格
微信小程序的 .wxml文件中如何加入空格一.直接按空格键二.使用不换行空格 ` ` 一.直接按空格键注意:连续多个空格被视为一个空格代码演示: <text> 你好按了一次空格键 ...
小程序在wxml页面中取整
小程序无法像html中,在页面中直接parseInt() index.wxml {{price | Int}} 小程序还有另一种处理方法 wxs 是一种类似于js脚本的东西 filters.wxs v ...
微信小程序在 wxml 文件中使用 Array.includes 方法
微信小程序中不能直接在wxml使用includes,否则不起作用需要通过wxs使用: 1.在wxs下创建一个includes.wxs var includes = function (array, ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
微信小程序的wxml实现复杂运算或者数据处理
在微信小程序的wxml中可以在{{}}进行里进行简单的三目运算.但是复杂的比如字符串截取,parseInt().str.split().num.toFixed(),substring等在{{}}里是无 ...
微信小程序跳转页面的不同方法
微信小程序如何进行页面切换呢? 一,使用声明式导航 1.对于tabbar页面的跳转(若不明白tabbar可自行百度) 使用switchTab进行跳转在wxml中输入 <navigator ur ...
微信小程序开发--分类页面实现
微信小程序开发–分类页面实现之前在详情页面利用Vant Weapp的UI库构建出了GoodsAction 商品导航功能,接着需要在分类页面(kind.wxml)实现商品分类. 1.引入第三方组件用 ...
微信小程序资料集（中）
**12月1日小程序Demo集合** [微信小程序Demo:金融理财计算器](简书) [微信小程序Demo:支付宝+微信二维码收款小程序](简书) [上滑导航吸顶效果](简书) [微信小程序Demo: ...
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js o ...

微信小程序在wxml页面中截取字符串

前言

实例

微信小程序在wxml页面中截取字符串相关推荐

最新文章

热门文章