前言：微信小程式wxml中的{{  }}可以進行簡單四則運算，三元運算子等簡單的運算。但是像str.split(',')，arr.concat()等複雜的運算是沒辦法在{{  }}中執行的。但是我們可以通過其他方法實現他。

一、問題還原

  <!-- 可以這麼用 -->
  <view>{{ 1+1 }}</view>
  <view>{{ 2>1 ? '是':'否'}}</view>

  <!-- 不可以這麼用 -->
  <view>{{ Math.random() > '大於':'小於' }}</view>
  <view wx:for="{{'1,2,3'.split(',')}}">
      {{item}}
  </view>
 

二、解決方案

  <wxs module="fn">
      module.exports = {
          split: function(str){
            return str.split(',');
          },
          random: function(){
            return Math.random();
          }
      }
  </wxs>
  <view>{{fn.random() > 0.5 ? '大於':'小於'}}</view>
  <view wx:for="{{fn.split('1,2,3')}}">
      {{item}}
  </view>
 

像在wxml中插入wxs就可以實現複製運算的效果啦。

三、方法進階

在模板中插入複雜運算的wxs

  <template name="tpl">
    <view wx:for="{{fn.split(str)}}">
        {{item}}
    </view>
    <wxs module="fn">
      module.exports = {
          split: function(str){
            return str.split(',');
          }
      }
    </wxs>
  </template>

  <template is="tpl" data="{{str}}"></template>