fix: 微信小程序、QQ小程序 自定义组件支持 v-show 指令 fixed #1724

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

@@ -277,6 +277,10 @@ describe('mp:compiler', () => {
       '<view v-show="shown">hello world</view>',
       '<view hidden="{{!(shown)}}">hello world</view>'
     )
+    assertCodegen(
+      '<test v-show="shown">hello world</test>',
+      '<test data-custom-hidden="{{!(shown)}}" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</test>'
+    )
   })
 
   it('generate DOM props with v-bind directive', () => {

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

@@ -63,6 +63,7 @@ module.exports = {
   ATTR_DATA_EVENT_OPTS: 'data-event-opts',
   ATTR_DATA_COM_TYPE: 'data-com-type',
   ATTR_DATA_EVENT_PARAMS: 'data-event-params',
+  ATTE_DATA_CUSTOM_HIDDEN: 'data-custom-hidden',
   INTERNAL_GET_ORIG,
   INTERNAL_GET_CLASS,
   INTERNAL_GET_STYLE,

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

@@ -9,9 +9,14 @@ const {
   genCode,
   getCode,
   getForKey,
-  traverseKey
+  traverseKey,
+  isComponent
 } = require('../util')
 
+const {
+  ATTE_DATA_CUSTOM_HIDDEN
+} = require('../constants')
+
 module.exports = function traverse (ast, state = {}) {
   babelTraverse(ast, {
     WithStatement (path) {
@@ -222,7 +227,9 @@ function traverseDataNode (dataNode, state, node) {
               objectExpression.properties.find(valueProperty => {
                 const isValue = valueProperty.key.name === 'value'
                 if (isValue) {
-                  ret.hidden = genCode(valueProperty.value, false, true)
+                  // 自定义组件不支持 hidden 属性
+                  const platforms = ['mp-weixin', 'mp-qq']
+                  ret[platforms.includes(state.options.platform.name) && isComponent(node.type) ? ATTE_DATA_CUSTOM_HIDDEN : 'hidden'] = genCode(valueProperty.value, false, true)
                 }
                 return isValue
               })

packages/webpack-uni-mp-loader/lib/plugin/generate-app.js

@@ -45,6 +45,10 @@ module.exports = function generateApp (compilation) {
     }
   }
 
+  // 框架预设样式 用于隐藏自定义组件
+  const platforms = ['mp-weixin', 'mp-qq']
+  const presetStyle = platforms.includes(process.env.UNI_PLATFORM) ? '[data-custom-hidden="true"]{display: none !important;}' : ''
+
   if (compilation.assets[`common/main${ext}`]) { // 是否存在 main.css
     importMainCss = `@import './common/main${ext}';`
   }
@@ -54,23 +58,23 @@ module.exports = function generateApp (compilation) {
   }
 
   const runtimeJsPath = 'common/runtime.js'
-
+
   const asset = compilation.assets[runtimeJsPath]
   if ( // app 和 baidu 不需要
     process.env.UNI_PLATFORM !== 'app-plus' &&
     process.env.UNI_PLATFORM !== 'mp-baidu' &&
-    asset &&
+    asset &&
     !asset.source.__$wrappered
-  ) {
+  ) {
     const source =
       `
   !function(){try{var a=Function("return this")();a&&!a.Math&&(Object.assign(a,{isFinite:isFinite,Array:Array,Date:Date,Error:Error,Function:Function,Math:Math,Object:Object,RegExp:RegExp,String:String,TypeError:TypeError,setTimeout:setTimeout,clearTimeout:clearTimeout,setInterval:setInterval,clearInterval:clearInterval}),"undefined"!=typeof Reflect&&(a.Reflect=Reflect))}catch(a){}}();
   ${asset.source()}
-  `
-    const newSource = function () {
-      return source
-    }
-    newSource.__$wrappered = true
+  `
+    const newSource = function () {
+      return source
+    }
+    newSource.__$wrappered = true
     compilation.assets[runtimeJsPath].source = newSource
   }
 
@@ -90,6 +94,7 @@ require('./common/main.js')`
   }, {
     file: 'app' + ext,
     source: `${importMainCss}
-${importVendorCss}`
+${importVendorCss}
+${presetStyle}`
   }]
-}
+}