fix: 小程序端支持 v-for 遍历复杂表达式 fixed #2012

packages/uni-template-compiler/__tests__/compiler-extra.spec.js

@@ -602,6 +602,25 @@ describe('mp:compiler-extra', () => {
       '<view class="content"><block wx:for="{{$root.l1}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:for="{{item.l0}}" wx:for-item="item2" wx:for-index="index2" wx:key="index2"><view data-event-opts="{{[[\'tap\',[[\'show\',[\'$0\',\'$1\'],[[[\'list.\'+item.$orig.key+\'\',\'\',index2,\'id\']],[[\'list.\'+item.$orig.key+\'\',\'\',index2,\'id\']]]]]]]}}" bindtap="__e">{{\'\'+item2.m0+\'\'}}</view></block></view></block></view>',
       'with(this){var l1=__map(tabList,function(item,index){var $orig=__get_orig(item);var l0=__map(list[item.key],function(item2,index2){var $orig=__get_orig(item2);var m0=formatIt(item2.id);return{$orig:$orig,m0:m0}});return{$orig:$orig,l0:l0}});$mp.data=Object.assign({},{$root:{l1:l1}})}'
     )
+    assertCodegen(
+      '<view><view v-for="(item, key) in {x:\'x\'}"><view>{{item}}</view></view></view>',
+      '<view><block wx:for="{{({x:\'x\'})}}" wx:for-item="item" wx:for-index="key"><view><view>{{item}}</view></view></block></view>'
+    )
+    assertCodegen(
+      '<view><view v-for="(item, key) in {\'x-x\':\'x\'}"><view>{{item}}</view></view></view>',
+      '<view><block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="key"><view><view>{{item}}</view></view></block></view>',
+      'with(this){var l0={"x-x":"x"};$mp.data=Object.assign({},{$root:{l0:l0}})}'
+    )
+    assertCodegen(
+      '<view><view v-for="(item, index) in getList(test)"><view>{{item}}</view></view></view>',
+      '<view><block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index"><view><view>{{item}}</view></view></block></view>',
+      'with(this){var l0=getList(test);$mp.data=Object.assign({},{$root:{l0:l0}})}'
+    )
+    assertCodegen(
+      '<view><view v-for="(item, index) in list[get(test)]"><view>{{item}}</view></view></view>',
+      '<view><block wx:for="{{list[$root.m0]}}" wx:for-item="item" wx:for-index="index"><view><view>{{item}}</view></view></block></view>',
+      'with(this){var m0=get(test);$mp.data=Object.assign({},{$root:{m0:m0}})}'
+    )
   })
 
   it('generate TemplateLiteral ', () => {

packages/uni-template-compiler/lib/script/traverse/data/attrs.js

-const t = require('@babel/types')
-
 const {
   IDENTIFIER_ATTR
 } = require('../../../constants')
 
+const {
+  isSimpleObjectExpression
+} = require('../../../util')
+
 const getMemberExpr = require('../member-expr')
 
 module.exports = function processAttrs (paths, path, state, isComponent, tagName) {
@@ -11,8 +13,8 @@ module.exports = function processAttrs (paths, path, state, isComponent, tagName
   if (attrsPath) {
     attrsPath.get('value.properties').forEach(propertyPath => {
       const valuePath = propertyPath.get('value')
-      // 对于普通的ObjectExpression不再单独处理，改为在转换temlplte时用()包裹（微信、QQ）
-      if (valuePath.isObjectExpression() && valuePath.node.properties.find(({ key, value }) => !t.isIdentifier(key) || !(t.isIdentifier(value) || t.isStringLiteral(value) || t.isBooleanLiteral(value) || t.isNumericLiteral(value) || t.isNullLiteral(value)))) {
+      // 对于简单的ObjectExpression不再单独处理，改为在转换temlplte时用()包裹（微信、QQ）
+      if (valuePath.isObjectExpression() && !isSimpleObjectExpression(valuePath.node)) {
         valuePath.replaceWith(getMemberExpr(path, IDENTIFIER_ATTR, valuePath.node, state))
       }
     })

packages/uni-template-compiler/lib/script/traverse/render-list.js

@@ -15,7 +15,8 @@ const {
   genCode,
   traverseKey,
   processMemberExpression,
-  getForIndexIdentifier
+  getForIndexIdentifier,
+  isSimpleObjectExpression
 } = require('../../util')
 
 const getMemberExpr = require('./member-expr')
@@ -184,6 +185,8 @@ module.exports = function traverseRenderList (path, state) {
         }
       })
     }
+  } else if (forPath.isCallExpression() || (forPath.isObjectExpression() && !isSimpleObjectExpression(forPath.node))) {
+    forPath.replaceWith(getMemberExpr(forPath, IDENTIFIER_FOR, forPath.node, forState))
   } else {
     forPath.traverse(require('./visitor'), forState)
   }
@@ -195,4 +198,4 @@ module.exports = function traverseRenderList (path, state) {
   forState.declarationArray.forEach(declaration => {
     state.declarationArray.push(declaration)
   })
-}
+}

packages/uni-template-compiler/lib/util.js

@@ -213,6 +213,15 @@ function makeMap (str, expectsLowerCase) {
     ? val => map[val.toLowerCase()]
     : val => map[val]
 }
+
+/**
+ * 微信、QQ小程序模板支持的简单类型
+ * @param {*} node
+ */
+function isSimpleObjectExpression (node) {
+  return t.isObjectExpression(node) && !node.properties.find(({ key, value }) => !t.isIdentifier(key) || !(t.isIdentifier(value) || t.isStringLiteral(value) || t.isBooleanLiteral(value) || t.isNumericLiteral(value) || t.isNullLiteral(value)))
+}
+
 module.exports = {
   hasOwn,
   isUnaryTag: makeMap(
@@ -242,5 +251,6 @@ module.exports = {
     return str
   }),
   processMemberExpression,
-  getForIndexIdentifier
-}
+  getForIndexIdentifier,
+  isSimpleObjectExpression
+}