Filter 支持

!> 要求 okam-build 版本号至少 0.4.7

filter 实现依赖于原生支持，目前只支持 百度小程序 微信小程序 支付宝小程序 快应用（okam-build@0.4.9 开始支持），然后各个小程序平台对于 filter 或者 自定义脚本支持稍有差异，使用时候也需要注意下。

filter 定义目前只支持本地 filter 定义，暂不支持 全局 filter，filter 定义 同 MVVM 框架 San。

此外，okam 也支持原生的百度小程序 filter 及微信、支付宝自定义脚本的写法。

构建配置修改

在构建配置 framework 选项里加上 filter 支持：

  1. {
  2.     framework: ['filter']
  3. }

Filter 定义

  • 脚本里 filters 属性里定义要用到的 filter
  • 模板里使用 Vue filter 管道语法进行 filter 使用
  • 注意： filters 配置不支持 mixin
  1. <template>
  2.     <view class="filter-wrap">
  3.         <view>raw: {{str}}, filter: {{str | toUpperCase}}</view>
  4.         <filter-component :from="str|toUpperCase"></filter-component>
  5.     </view>
  6. </template>
  8. <script>
  9. import FilterComponent from './FilterComponent';
  11. export default {
  12.     config: {
  13.         title: 'Filter 支持'
  14.     },
  16.     components: {
  17.         FilterComponent
  18.     },
  20.     data: {
  21.         str: 'abc3r23'
  22.     },
  24.     // 通过 filters 属性，声明过滤器，这部分定义最后会提取到自定义脚本文件，因此定义方式
  25.     // 注意参考官方语法
  26.     filters: {
  27.         toUpperCase(str2) {
  28.             return str2.toUpperCase();
  29.         }
  30.     },
  32.     methods: {
  33.     }
  34. };
  35. </script>
  37. <style lang="stylus">
  38. .filter-wrap
  39.     height: 100vh
  40.     padding: 10px
  41.     background: #fff
  42. </style>

  • 基于脚本 filters 属性声明要使用的 filter，注意该 filter 定义，经过构建后会被提取到单独的自定义脚本文件里，模板通过自定义脚本的方式引入。

  • 百度小程序 不支持多个 filter 级联使用，必须使用 ES6 模块语法定义，不支持常量，只支持 function

  • 微信小程序 只支持 ES5 语法定义方式，包括导出 filter 方式用的是 commonjs 模块方式，因此需要在构建配置里单独将其转成 ES5 语法

    1.   // 微信构建配置
    2.   {
    3.       processors: {
    4.           babel7: {
    5.               extnames: 'js'
    6.           },
    8.           filter: {
    9.               options: {
    10.                   presets: ['@babel/preset-env']
    11.               }
    12.           }
    13.       }
    14.   }

原生 Filter 支持

  • 百度小程序 Filter 支持

    1.   <template>
    2.       <view class="native-filter-wrap">
    3.           <filter src="../filter/util.filter.js" module="util"></filter>
    4.           <view>{{str}}: {{util.toUpperCase(str)}}</view>
    5.           <filter module="util2">
    6.               export default {
    7.                   toLowerCase(str) {
    8.                       return str.toLowerCase();
    9.                   }
    10.               }
    11.           </filter>
    12.           <view>{{str}}: {{util2.toLowerCase(str)}}</view>
    13.       </view>
    14.   </template>
    15.   <script>
    16.   export default {
    17.       config: {
    18.           title: '原生 Swan Filter 支持'
    19.       },
    20.       data: {
    21.           str: 'aCs'
    22.       }
    23.   };
    24.   </script>

  • 微信自定义脚本支持

    1.   <template>
    2.       <view class="native-filter-wrap">
    3.           <wxs src="../filter/util.wxs" module="util"></wxs>
    4.           <view>{{str}}: {{util.toUpperCase(str)}}</view>
    5.           <view>{{str}}: {{util.toLowerCase(str)}}</view>
    6.           <view>fitler nested {{str}}: {{util.toUpperCase(util.toLowerCase(str))}}</view>
    7.           <view>{{util.info}}</view>
    8.           <wxs module="m1">
    9.           var getMax = function(array) {
    10.               var max = undefined;
    11.               for (var i = 0; i < array.length; ++i) {
    12.                   max = max === undefined
    13.                       ? array[i]
    14.                       : (max >= array[i] ? max : array[i]);
    15.               }
    16.               return max;
    17.           }
    18.           module.exports.getMax = getMax;
    19.           </wxs>
    20.           <view>{{m1.getMax(arr)}}</view>
    21.       </view>
    22.   </template>
    23.   <script>
    24.   export default {
    25.       config: {
    26.           title: '原生 Weixin Filter 支持'
    27.       },
    28.       data: {
    29.           str: 'aCs',
    30.           arr: [4, 18, 2]
    31.       }
    32.   };
    33.   </script>

  • 支付宝自定义脚本支持

    1.   <template>
    2.       <view class="native-filter-wrap">
    3.           <import-sjs from="../filters/util.sjs" name="util"></import-sjs>
    4.           <view>{{str}}: {{util.toUpperCase(str)}}</view>
    5.           <view>{{str}}: {{util.toLowerCase(str)}}</view>
    6.           <view>fitler nested {{str}}: {{util.toUpperCase(util.toLowerCase(str))}}</view>
    7.           <view>{{util.info}}</view>
    8.       </view>
    9.   </template>
    10.   <script>
    11.   export default {
    12.       config: {
    13.           title: '原生 Ant Filter 支持'
    14.       },
    15.       data: {
    16.           str: 'aCs'
    17.       }
    18.   };
    19.   </script>

参考