Merge pull request Meituan-Dianping#645 from Meituan-Dianping/develop

Develop
zhangbo27 · Jun 15, 2018 · 3f9075c · 3f9075c
2 parents 29cee1a + ddf6541
commit 3f9075c
Show file tree

Hide file tree

Showing 13 changed files with 383 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
    <a href="https://www.npmjs.com/package/mpvue"><img src="https://img.shields.io/npm/dm/mpvue.svg?style=flat" alt="npm"></a>
  </p>
 
-# mpvue 
+# mpvue
 > Vue.js 小程序版, fork 自 [vuejs/[email protected]](https://github.com/vuejs/vue)，保留了 vue runtime 能力，添加了小程序平台的支持。
 
 
@@ -60,8 +60,28 @@
 - [mpvue-simple](http://mpvue.com/mpvue/simple) 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具
 - 其它
 
+## 使用 mpvue 的项目
+<div>
+    <img src="https://user-images.githubusercontent.com/13334618/38455900-d608df44-3ab0-11e8-94db-a5b7ac782612.jpg" width="100" />
+    <img src="https://camo.githubusercontent.com/d0fe641cc98e6dcdff3b3e28f3f46ed47a3b5777/68747470733a2f2f7773312e73696e61696d672e636e2f6c617267652f36313134353733386c7931667139723334316a33356a323037363037363735392e6a7067" width="100" />
+    <img src="https://user-images.githubusercontent.com/26051070/39106618-75ed54b4-46ef-11e8-834d-faf2629c218b.jpg" width="100" />
+    <img src="https://user-images.githubusercontent.com/12172868/39176660-e973d0de-47df-11e8-88c2-fbd36b14caed.jpg" width="100" />
+    <img src="https://user-images.githubusercontent.com/8087694/39505682-93727596-4e06-11e8-8978-6075d6b03742.jpg" width="100" />
+    <img src="https://user-images.githubusercontent.com/16408246/40176958-ac78023a-5a0f-11e8-85bf-0ff56426f202.jpg" width="100" />
+    <img src="https://user-images.githubusercontent.com/7871813/39956784-b3b978c0-5619-11e8-9bc4-658c8f2907e6.png" width="100" />
+    <img src="https://user-images.githubusercontent.com/8219610/40181466-b8e1f204-5a1b-11e8-9c39-545226b354b6.jpg" width="100" />
+    <img src="https://user-images.githubusercontent.com/8426097/40212791-72744312-5a84-11e8-819d-654057def4a2.jpg" width="100" />
+    <img src="https://user-images.githubusercontent.com/22385741/40222981-fd28501e-5ab3-11e8-8558-79447270e118.png" width="100" />
+    <img src="https://user-images.githubusercontent.com/28003460/40229157-017bcc24-5ac6-11e8-921a-f424a70724dd.jpg" width="100" />
+    <img src="https://user-images.githubusercontent.com/20151096/40263981-a4072682-5b4d-11e8-95aa-292da6ee9228.png" width="100" />
+    <img src="https://user-images.githubusercontent.com/652171/40602836-a064ab44-628c-11e8-962c-c5c75455c1c8.jpg" width="100" />
+    <img src="https://camo.githubusercontent.com/735d3be145d2632dd010b5fe6e047bc1f5d1b56d/68747470733a2f2f692e6c6f6c692e6e65742f323031382f30362f30342f356231346536616634633537322e6a7067" width="100" />
+    <img src="https://user-images.githubusercontent.com/5120505/41412484-ba85a04e-7012-11e8-9833-3ed4762073ea.png" width="100" />
+    <img src="https://user-images.githubusercontent.com/22720942/40184432-da33291c-5a22-11e8-966c-c836d1dc8078.png" width="100" />
+</div>
+
 [贡献方法](./.github/CONTRIBUTING.md)
 
-[使用 mpvue 的项目征集](https://github.com/Meituan-Dianping/mpvue/issues/21)
+[更多项目征集](https://github.com/Meituan-Dianping/mpvue/issues/21)
 
 [分享交流群](https://github.com/Meituan-Dianping/mpvue/issues/14)
diff --git a/packages/mpvue-template-compiler/build.js b/packages/mpvue-template-compiler/build.js
@@ -1109,7 +1109,11 @@ var LIFECYCLE_HOOKS = [
   'onReachBottom',
   'onShareAppMessage',
   'onPageScroll',
-  'onTabItemTap'
+  'onTabItemTap',
+  'attached',
+  'ready',
+  'moved',
+  'detached'
 ];
 
 /*  */
@@ -4820,7 +4824,7 @@ function generate$2 (obj, options) {
   var attrs = Object.keys(attrsMap).map(function (k) { return convertAttr(k, attrsMap[k]); }).join(' ');
 
   var tags = ['progress', 'checkbox', 'switch', 'input', 'radio', 'slider', 'textarea'];
-  if (tags.indexOf(tag) > -1) {
+  if (tags.indexOf(tag) > -1 && !(children && children.length)) {
     return ("<" + tag + (attrs ? ' ' + attrs : '') + " />" + (ifConditionsArr.join('')))
   }
   return ("<" + tag + (attrs ? ' ' + attrs : '') + ">" + (child || '') + "</" + tag + ">" + (ifConditionsArr.join('')))

diff --git a/packages/mpvue-template-compiler/package.json b/packages/mpvue-template-compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mpvue-template-compiler",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "mpvue template compiler for Vue",
   "main": "index.js",
   "repository": {

diff --git a/packages/mpvue/index.js b/packages/mpvue/index.js
@@ -322,7 +322,11 @@ var LIFECYCLE_HOOKS = [
   'onReachBottom',
   'onShareAppMessage',
   'onPageScroll',
-  'onTabItemTap'
+  'onTabItemTap',
+  'attached',
+  'ready',
+  'moved',
+  'detached'
 ];
 
 /*  */
@@ -4144,7 +4148,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.11';
+Vue$3.mpvueVersion = '1.0.12';
 
 /* globals renderer */
 
@@ -4974,30 +4978,106 @@ function getGlobalData (app, rootVueVM) {
   }
 }
 
-/**
- * 格式化 properties 属性，并给每个属性加上 observer 方法
- */
+// 格式化 properties 属性，并给每个属性加上 observer 方法
+
+// properties 的 一些类型 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
+// properties: {
+//   paramA: Number,
+//   myProperty: { // 属性名
+//     type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
+//     value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
+//     observer: function(newVal, oldVal, changedPath) {
+//        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
+//        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
+//     }
+//   },
+// }
+
+// props 的一些类型 https://cn.vuejs.org/v2/guide/components-props.html#ad
+// props: {
+//   // 基础的类型检查 (`null` 匹配任何类型)
+//   propA: Number,
+//   // 多个可能的类型
+//   propB: [String, Number],
+//   // 必填的字符串
+//   propC: {
+//     type: String,
+//     required: true
+//   },
+//   // 带有默认值的数字
+//   propD: {
+//     type: Number,
+//     default: 100
+//   },
+//   // 带有默认值的对象
+//   propE: {
+//     type: Object,
+//     // 对象或数组且一定会从一个工厂函数返回默认值
+//     default: function () {
+//       return { message: 'hello' }
+//     }
+//   },
+//   // 自定义验证函数
+//   propF: {
+//     validator: function (value) {
+//       // 这个值必须匹配下列字符串中的一个
+//       return ['success', 'warning', 'danger'].indexOf(value) !== -1
+//     }
+//   }
+// }
+
+// core/util/options
+function normalizeProps$1 (props, res, vm) {
+  if (!props) { return }
+  var i, val, name;
+  if (Array.isArray(props)) {
+    i = props.length;
+    while (i--) {
+      val = props[i];
+      if (typeof val === 'string') {
+        name = camelize(val);
+        res[name] = { type: null };
+      } else {}
+    }
+  } else if (isPlainObject(props)) {
+    for (var key in props) {
+      val = props[key];
+      name = camelize(key);
+      res[name] = isPlainObject(val)
+        ? val
+        : { type: val };
+    }
+  }
+
+  // fix vueProps to properties
+  for (var key$1 in res) {
+    if (res.hasOwnProperty(key$1)) {
+      var item = res[key$1];
+      if (item.default) {
+        item.value = item.default;
+      }
+      var oldObserver = item.observer;
+      item.observer = function (newVal, oldVal) {
+        vm[name] = newVal;
+        // 先修改值再触发原始的 observer，跟 watch 行为保持一致
+        if (typeof oldObserver === 'function') {
+          oldObserver.call(vm, newVal, oldVal);
+        }
+      };
+    }
+  }
+
+  return res
+}
+
 function normalizeProperties (vm) {
-  var properties = vm.$options.properties || {};
+  var properties = vm.$options.properties;
+  var vueProps = vm.$options.props;
   var res = {};
-  var val;
-  var loop = function ( key ) {
-    val = isPlainObject(properties[key])
-      ? properties[key]
-      : { type: properties[key] };
-    res[key] = {
-      type: val.type,
-      value: val.value,
-      observer: function observer (newVal, oldVal) {
-        vm[key] = newVal; // 先修改值再触发原始的 observer，跟 watch 行为保持一致
-        if (typeof val.observer === 'function') {
-          val.observer.call(vm, newVal, oldVal);
-        }
-      }
-    };
-  };
 
-  for (var key in properties) loop( key );
+  normalizeProps$1(properties, res, vm);
+  normalizeProps$1(vueProps, res, vm);
+
   return res
 }
 
@@ -5112,7 +5192,7 @@ function initMP (mpType, next) {
       ready: function ready () {
         mp.status = 'ready';
 
-        callHook$1(rootVueVM, 'onReady');
+        callHook$1(rootVueVM, 'ready');
         next();
 
         // 只有页面需要 setData
@@ -5491,13 +5571,6 @@ function handleProxyWithVue (e) {
       return result
     }
     handles.forEach(function (h) { return h(event); });
-  } else {
-    // TODO, 在初始化时进行判断或直接使用 vue 本身的错误提示
-    var ref$1 = rootVueVM.$mp.page;
-    var route = ref$1.route;
-    console.group(new Date() + ' 事件警告');
-    console.warn(("Do not have handler in current page: " + route + ". Please make sure that handler has been defined in " + route + ", or not use handler with 'v-if'"));
-    console.groupEnd();
   }
 }
 

diff --git a/packages/mpvue/package.json b/packages/mpvue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mpvue",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Vue Runtime for mini program",
   "main": "index.js",
   "repository": {

diff --git a/src/platforms/mp/compiler/codegen/generate.js b/src/platforms/mp/compiler/codegen/generate.js
@@ -19,7 +19,7 @@ export default function generate (obj, options = {}) {
   const attrs = Object.keys(attrsMap).map(k => convertAttr(k, attrsMap[k])).join(' ')
 
   const tags = ['progress', 'checkbox', 'switch', 'input', 'radio', 'slider', 'textarea']
-  if (tags.indexOf(tag) > -1) {
+  if (tags.indexOf(tag) > -1 && !(children && children.length)) {
     return `<${tag}${attrs ? ' ' + attrs : ''} />${ifConditionsArr.join('')}`
   }
   return `<${tag}${attrs ? ' ' + attrs : ''}>${child || ''}</${tag}>${ifConditionsArr.join('')}`

diff --git a/src/platforms/mp/join-code-in-build.js b/src/platforms/mp/join-code-in-build.js
@@ -23,4 +23,8 @@ exports.mpLifecycleHooks = `'onLaunch',
   'onReachBottom',
   'onShareAppMessage',
   'onPageScroll',
-  'onTabItemTap'`
+  'onTabItemTap',
+  'attached',
+  'ready',
+  'moved',
+  'detached'`
diff --git a/src/platforms/mp/runtime/events.js b/src/platforms/mp/runtime/events.js
@@ -104,11 +104,5 @@ export function handleProxyWithVue (e) {
       return result
     }
     handles.forEach(h => h(event))
-  } else {
-    // TODO, 在初始化时进行判断或直接使用 vue 本身的错误提示
-    const { route } = rootVueVM.$mp.page
-    console.group(new Date() + ' 事件警告')
-    console.warn(`Do not have handler in current page: ${route}. Please make sure that handler has been defined in ${route}, or not use handler with 'v-if'`)
-    console.groupEnd()
   }
 }