Merge branch 'dev' into alpha

docs/api/ui/tabbar.md

@@ -10,15 +10,16 @@
 
 **OBJECT参数说明：**
 
-|属性|类型|默认值|必填|说明|
-|:-|:-|:-|:-|:-|
-|index|number||是|tabBar 的哪一项，从左边算起|
-|text|String||否|tab 上的按钮文字|
-|iconPath|String||否|图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片|
-|selectedIconPath|String||否|选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效|
-|success|Funtion||否|接口调用成功的回调函数|
-|fail|Funtion||否|接口调用失败的回调函数|
-|complete|Funtion||否|接口调用结束的回调函数（调用成功、失败都会执行）|
+|属性|类型|默认值|必填|说明|平台差异|
+|:-|:-|:-|:-|:-|:-|
+|index|number||是|tabBar 的哪一项，从左边算起||
+|text|String||否|tab 上的按钮文字||
+|iconPath|String||否|图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片||
+|selectedIconPath|String||否|选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效||
+|pagePath|String||否|页面绝对路径，必须在 [pages](/collocation/pages?id=pages) 中先定义|App（2.8.4+）、H5（2.8.4+）|
+|success|Funtion||否|接口调用成功的回调函数||
+|fail|Funtion||否|接口调用失败的回调函数||
+|complete|Funtion||否|接口调用结束的回调函数（调用成功、失败都会执行）||
 
 **示例代码**
 

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

 const compiler = require('../lib')
 
 function assertCodegen (template, templateCode, renderCode = 'with(this){}', options = {}) {
-  const res = compiler.compile(template, {
+  const res = compiler.compile(template, {
     resourcePath: 'test.wxml',
     mp: Object.assign({
-      minified: true,
+      minified: true,
       isTest: true,
       platform: 'mp-toutiao'
     }, options)
@@ -20,13 +20,13 @@ describe('mp:compiler-mp-toutiao', () => {
       '<view><view v-for="(item,index) in items" :key="index"></view></view>',
       '<view><block tt:for="{{items}}" tt:for-item="item" tt:for-index="index" tt:key="index"><view></view></block></view>'
     )
-  })
-
-  it('generate ref', () => {
-    assertCodegen(
-      '<my-component ref="ref"></my-component>',
-      '<my-component class="vue-ref" vue-id="551070e6-1" data-ref="ref" bind:__l="__l"></my-component>'
-    )
+  })
+
+  it('generate ref', () => {
+    assertCodegen(
+      '<my-component ref="ref"></my-component>',
+      '<my-component class="vue-ref" vue-id="551070e6-1" data-ref="ref" bind:__l="__l"></my-component>'
+    )
   })
 
   it('generate class binding', () => {
@@ -49,10 +49,10 @@ describe('mp:compiler-mp-toutiao', () => {
     assertCodegen(
       '<p class="static" :class="[{ active: isActive }, errorClass]">5</p>',
       '<view class="{{(((\'static _p\')+\' \'+[(isActive)?\'active\':\'\'])+\' \'+errorClass)}}">5</view>'
-    )
-    assertCodegen(
-      '<div class="container" :class="computedClassObject">6</div>',
-      '<view class="{{((\'container _div\')+\' \'+computedClassObject)}}">6</view>'
+    )
+    assertCodegen(
+      '<div class="container" :class="computedClassObject">6</div>',
+      '<view class="{{((\'container _div\')+\' \'+computedClassObject)}}">6</view>'
     )
     //     assertCodegen(
     //       `<div class="container" :class="computedClassObject">6</div>`,
@@ -72,4 +72,11 @@ describe('mp:compiler-mp-toutiao', () => {
       '<view class="{{((\'bg _p\')+\' \'+(classStr1||classStr2))}}">9</view>'
     )
   })
+
+  it('generate v-show directive', () => {
+    assertCodegen(
+      '<test v-show="shown">hello world</test>',
+      '<test bind:-data-custom-hidden="{{!(shown)}}" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</test>'
+    )
+  })
 })

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

@@ -132,4 +132,11 @@ describe('mp:compiler-mp-weixin', () => {
     )
     assertCodegen('<test :obj="{x:0}"></test>', '<test vue-id="551070e6-1" obj="{{({x:0})}}" bind:__l="__l"></test>')
   })
+
+  it('generate v-show directive', () => {
+    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>'
+    )
+  })
 })

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,17 @@ function traverseDataNode (dataNode, state, node) {
               objectExpression.properties.find(valueProperty => {
                 const isValue = valueProperty.key.name === 'value'
                 if (isValue) {
-                  ret.hidden = genCode(valueProperty.value, false, true)
+                  let key
+                  // 自定义组件不支持 hidden 属性
+                  const platform = state.options.platform.name
+                  const platforms = ['mp-weixin', 'mp-qq', 'mp-toutiao']
+                  if (isComponent(node.type) && platforms.includes(platform)) {
+                    // 字节跳动小程序自定义属性不会反应在DOM上，只能使用事件格式
+                    key = `${platform === 'mp-toutiao' ? 'bind:-' : ''}${ATTE_DATA_CUSTOM_HIDDEN}`
+                  } else {
+                    key = 'hidden'
+                  }
+                  ret[key] = genCode(valueProperty.value, false, true)
                 }
                 return isValue
               })

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

@@ -45,6 +45,11 @@ module.exports = function generateApp (compilation) {
     }
   }
 
+  // 框架预设样式 用于隐藏自定义组件
+  // TODO 分平台 import 不同 css
+  const platforms = ['mp-weixin', 'mp-qq', 'mp-toutiao']
+  const presetStyle = platforms.includes(process.env.UNI_PLATFORM) ? '[data-custom-hidden="true"],[bind-data-custom-hidden="true"]{display: none !important;}' : ''
+
   if (compilation.assets[`common/main${ext}`]) { // 是否存在 main.css
     importMainCss = `@import './common/main${ext}';`
   }
@@ -54,23 +59,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 +95,7 @@ require('./common/main.js')`
   }, {
     file: 'app' + ext,
     source: `${importMainCss}
-${importVendorCss}`
+${importVendorCss}
+${presetStyle}`
   }]
-}
+}

src/core/helpers/protocol/ui/tab-bar.js

@@ -18,6 +18,9 @@ export const setTabBarItem = {
   },
   selectedIconPath: {
     type: String
+  },
+  pagePath: {
+    type: String
   }
 }
 

src/core/view/components/editor/index.vue

@@ -281,9 +281,8 @@ export default {
         if (this.skipMatcher) {
           return delta
         }
-        return {
-          ops: delta.ops.filter(({ insert }) => typeof insert === 'string').map(({ insert }) => ({ insert }))
-        }
+        delta.ops = delta.ops.filter(({ insert }) => typeof insert === 'string').map(({ insert }) => ({ insert }))
+        return delta
       })
       this.initKeyboard($el)
       this.quillReady = true

src/platforms/app-plus/service/api/ui/tab-bar.js

@@ -19,14 +19,21 @@ export function setTabBarItem ({
   index,
   text,
   iconPath,
-  selectedIconPath
+  selectedIconPath,
+  pagePath
 }) {
-  if (!isTabBarPage()) {
-    return {
-      errMsg: 'setTabBarItem:fail not TabBar page'
+  tabBar.setTabBarItem(index, text, iconPath, selectedIconPath)
+  const route = pagePath && __uniRoutes.find(({ path }) => path === pagePath)
+  if (route) {
+    const meta = route.meta
+    meta.isTabBar = true
+    meta.tabBarIndex = index
+    meta.isQuit = true
+    const tabBar = __uniConfig.tabBar
+    if (tabBar && tabBar.list && tabBar.list[index]) {
+      tabBar.list[index].pagePath = pagePath.startsWith('/') ? pagePath.substring(1) : pagePath
     }
   }
-  tabBar.setTabBarItem(index, text, iconPath, selectedIconPath)
   return {
     errMsg: 'setTabBarItem:ok'
   }

src/platforms/h5/service/api/ui/tab-bar.js

@@ -43,9 +43,22 @@ function setTabBar (type, args = {}) {
       case 'hideTabBar':
         app.$children[0].hideTabBar = true
         break
-      case 'setTabBarItem':
+      case 'setTabBarItem': {
         setProperties(tabBar.list[index], setTabBarItemProps, args)
+        const pagePath = args.pagePath
+        const route = pagePath && __uniRoutes.find(({ path }) => path === pagePath)
+        if (route) {
+          const meta = route.meta
+          meta.isTabBar = true
+          meta.tabBarIndex = index
+          meta.isQuit = true
+          const tabBar = __uniConfig.tabBar
+          if (tabBar && tabBar.list && tabBar.list[index]) {
+            tabBar.list[index].pagePath = pagePath.startsWith('/') ? pagePath.substring(1) : pagePath
+          }
+        }
         break
+      }
       case 'setTabBarStyle':
         setProperties(tabBar, setTabBarStyleProps, args)
         break

src/platforms/mp-alipay/runtime/wrapper/component-parser.js

@@ -126,6 +126,14 @@ export default function parseComponent (vueComponentOptions) {
     componentOptions.deriveDataFromProps = createObserver()
   } else {
     componentOptions.didUpdate = createObserver(true)
+  }
+
+  if (Array.isArray(vueOptions.wxsCallMethods)) {
+    vueOptions.wxsCallMethods.forEach(callMethod => {
+      componentOptions.methods[callMethod] = function (args) {
+        return this.$vm[callMethod](args)
+      }
+    })
   }
 
   return componentOptions

src/platforms/mp-alipay/runtime/wrapper/page-parser.js

@@ -77,6 +77,14 @@ export default function parsePage (vuePageOptions) {
   }
 
   initHooks(pageOptions, hooks, vuePageOptions)
+
+  if (Array.isArray(vueOptions.wxsCallMethods)) {
+    vueOptions.wxsCallMethods.forEach(callMethod => {
+      pageOptions[callMethod] = function (args) {
+        return this.$vm[callMethod](args)
+      }
+    })
+  }
 
   return pageOptions
 }