微信小程序:如何在{{}}中使用函数?WXML+WXS

在项目中涉及到对熏染在视图中的数据进行处理,想着写个方法在模板中调用进行相应处理

因为之前用vue 想着这样用

直接报错 不能调用js中的方法。

<view class="car-type">{{classification(item.classify)}}</view>

后面翻阅了下文档

微信提出了一种新的概念,WXS文件可供使用,小程序的一套脚本语言,可以在WXML的{{}}中调用.wxs的方法。

我们新建一个.wxs文件

// 不支持 es6语法,这里我也不知道什么情况,有大佬知道的话可以告诉我,一开始用es6语法,一直无效
var obj = {
  //小数点后面保留两位小数
  numberToFixed: function (value) {
    var num = value * 1;//类型转换 防止传过了的是字符串类型
    return num.toFixed(2);
  },
  //汽车分类 根据类型id返回车型名称
  classification: function (classify) {
    var arr = ['新款车', '运损车', '换代新车', '库存车', '集采车', '活动车'];
    return arr[classify - 1];
  }
}
// 导出对外暴露的属性
module.exports = {
  numberToFixed: obj.numberToFixed,
  classification: obj.classification
}

在.wxml中引入文件:

<!-- 引入.wxs文件 src为相对路径,module指定当前模块的名称 -->
<wxs module="commom" src="../../commom/commom.wxs"></wxs>

在{{}中调用.wxs模块中的方法:

<view class="car-type">{{commom.classification(item.classify)}}</view>

OK这样就可以了

不得不说,从某方面将,比vue还方便一些

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,429评论 0 9
  • 2.4.2 WXS WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结...
    wangbu2阅读 1,305评论 0 2
  • 引言 WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 注意 w...
    OzanShareing阅读 1,437评论 0 3
  • 生命中的问题都是为你量身定做的。一一阿玛斯 从小到大回忆我们的成长经历,会发现里面有苦有乐有喜有悲,很少人...
    楚浛阅读 483评论 0 6
  • 姓名:乐美清 公司:宁波华光 《六项精进》第340期 反省二组学员 【日精进打卡第40天】 【知~学习】 《六项精...
    乐美清阅读 101评论 0 0