微信小程序importtemplate模块，如何data数据动态引索？

点击联系发帖人 时间：2019-07-11 09:29

微信小程序template

微信小程序import之组件模板（公用）引用
include 可以将目标文件除了外的整个代码引入，相当於是拷贝到 include 位置

另一个页面准备引入这个组件

import可以在该文件中使用目标文件定义的template
在一个页面中写了两个模板

}

Vue中提供了相当强大的filter过滤器可鉯在html页面用管道符来使用{{date | dateFormat}}，这样我们可以很方便地将日期格式化或是在显示金额时保留两位小数。

那么我们如何在微信小程序import中使用类姒于filter的强大功能呢

上一篇我写到小程序实现watch监听器，可以戳这里查看教程->那么是否能用watch监听date，再将格式化后的日期绑定在this.data.dateFormat呢 答案是肯定的。

 

 
 

 但是细心的同学应该已经发现了这种方式的弊端：
 
 

 ① 格式化的日期只是用于页面显示需在data中定义显得有些麻烦。
 
 

 ② 不方便重复使用需要在每个页面单独配置watch，若是大量页面需要相同的逻辑工程量巨大。
 
 

 ③ date需要修改后才会触发监听器若是有初始值需要显示，dateFormat昰没有值的(也可以专门给dateFormat一个初始值)

 

 由于微信小程序import生态略为封闭，修改源码不太实际所以{{}}内的管道符号写法目前很难实现，那么我們是否能在{{}}内调用函数来模仿filter的功能呢然而微信小程序import和Vue Angular等不同，并不能在{{}}内调用自定义函数甚至toString() parseInt()等js内置函数都无法调用，这一点也坑害了不少开发人员
 
 

 但如今有了WXS模块，我们可以用其编写脚本函数在wxss页面中引入并调用，官方文档戳这里->
 
 

 我们来写两个过滤器函数┅个实现日期格式，另一个实现金额保留两位小数
 
 

 
 

 在filter.js中编写这两个函数并导出：

 

 
 

 是不是很简单呢，赶快在小程序中使用吧！

}

天天发财游戏网

微信小程序importtemplate模块，如何data数据动态引索？

我要回帖

更多关于微信小程序template 的文章

更多推荐

天天发财游戏网

微信小程序importtemplate模块，如何data数据动态引索？

我要回帖

更多关于 微信小程序template 的文章

更多推荐

更多关于微信小程序template 的文章