用惯了VUE和Angular的小伙伴们,肯定很喜欢过滤器这个功能,因微信小程序不支持过滤器,从而导致WEPY和MPVUE等开发微信小程序的框架也不支持过滤器
现给大家提供一个可以替代filter使用的方法就是WXS
-
wxs
- WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
- WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
- WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。
- WXS 函数不能作为组件的事件回调
- 由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
微信官方文档
2. 创建一个wxs 文件/wxs/mywxs.wxs
var typeFilter = {
text: 'This is dynamic type',
filter: function (value) {
if (value == '1') {
return '分享了您的名片'
} else if (value == '2') {
return '留存了您的名片'
} else if (value == '3') {
return '希望您能联系TA'
} else if (value == '4') {
return '向您发送了名片'
} else {
return ''
}
}
}
module.exports = typeFilter;
3.在需要的wpy 文件中引用
<template>
<view>
A {
{typeFilter.filter(operationType)}}
</view>
</template>
import typeFilter from '../wxs/mywxs.wxs'
export default class Index extends wepy.page {
wxs = {
typeFilter
}
data={
operationType:1
}
}
结果:A分享了您的名片