WEPY不支持过滤器的替代方案(wxs)

用惯了VUE和Angular的小伙伴们,肯定很喜欢过滤器这个功能,因微信小程序不支持过滤器,从而导致WEPY和MPVUE等开发微信小程序的框架也不支持过滤器
现给大家提供一个可以替代filter使用的方法就是WXS

  1. 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分享了您的名片

猜你喜欢

转载自blog.csdn.net/qq_41194534/article/details/89844683
今日推荐