feat(runtime): mp page=>component

packages/uni-mp-weixin/dist/index.js

@@ -385,14 +385,21 @@ function wrapper$1 (event) {
   return event
 }
 
-function processEventArgs (event, args = [], isCustom) {
+function processEventArgs (event, args = [], isCustom, methodName) {
   if (isCustom && !args.length) { // 无参数，直接传入 detail 数组
+    if (!Array.isArray(event.detail)) { // 应该是使用了 wxcomponent 原生组件，为了向前兼容，传递原始 event 对象
+      return [event]
+    }
     return event.detail
   }
   const ret = [];
   args.forEach(arg => {
     if (arg === '$event') {
-      ret.push(isCustom ? event.detail[0] : event);
+      if (methodName === '__set_model' && !isCustom) { // input v-model value
+        ret.push(event.target.value);
+      } else {
+        ret.push(isCustom ? event.detail[0] : event);
+      }
     } else {
       ret.push(arg);
     }
@@ -404,14 +411,6 @@ function processEventArgs (event, args = [], isCustom) {
 const ONCE = '~';
 const CUSTOM = '^';
 
-function getTarget (obj, path) {
-  const parts = path.split('.');
-  if (parts.length === 1) {
-    return obj[parts[0]]
-  }
-  return getTarget(obj[parts[0]], parts.slice(1).join('.'))
-}
-
 function handleEvent (event) {
   event = wrapper$1(event);
 
@@ -435,26 +434,17 @@ function handleEvent (event) {
     if (eventsArray && eventType === type) {
       eventsArray.forEach(eventArray => {
         const methodName = eventArray[0];
-        if (methodName === '$set') { // prop.sync
-          const args = eventArray[1];
-          if (args.length === 2) { // :title.sync="title"
-            this.$vm[args[0]] = event.detail[0];
-          } else if (args.length === 3) {
-            this.$vm.$set(getTarget(this.$vm, args[0]), args[1], event.detail[0]);
-          }
-        } else {
-          const handler = this.$vm[methodName];
-          if (!isFn(handler)) {
-            throw new Error(` _vm.${methodName} is not a function`)
-          }
-          if (isOnce) {
-            if (handler.once) {
-              return
-            }
-            handler.once = true;
+        const handler = this.$vm[methodName];
+        if (!isFn(handler)) {
+          throw new Error(` _vm.${methodName} is not a function`)
+        }
+        if (isOnce) {
+          if (handler.once) {
+            return
           }
-          handler.apply(this.$vm, processEventArgs(event, eventArray[1], isCustom));
+          handler.once = true;
         }
+        handler.apply(this.$vm, processEventArgs(event, eventArray[1], isCustom, methodName));
       });
     }
   });
@@ -572,6 +562,34 @@ const hooks$1 = [
   'onNavigationBarSearchInputClicked'
 ];
 
+function attached (VueComponent, args) {
+
+  this.$vm = new VueComponent({
+    mpType: 'page',
+    mpInstance: this
+  });
+
+  this.$vm.__call_hook('created');
+  if (args) {
+    this.$vm.$mp.query = args; // 又要兼容 mpvue
+    this.$vm.__call_hook('onLoad', args); // 开发者可能会在 onLoad 时赋值，提前到 mount 之前
+  }
+  this.$vm.$mount();
+}
+
+function ready () {
+  this.$vm.__call_hook('beforeMount');
+  this.$vm._isMounted = true;
+  this.$vm.__call_hook('mounted');
+  this.$vm.__call_hook('onReady');
+}
+
+function detached () {
+  this.$vm.__call_hook('onUnload');
+  {
+    this.$vm.$destroy();
+  }
+}
 function createPage (vueOptions) {
   vueOptions = vueOptions.default || vueOptions;
   let VueComponent;
@@ -582,36 +600,34 @@ function createPage (vueOptions) {
     VueComponent = Vue.extend(vueOptions);
   }
   const pageOptions = {
-    data: getData(vueOptions, Vue.prototype),
-    onLoad (args) {
-
-      this.$vm = new VueComponent({
-        mpType: 'page',
-        mpInstance: this
-      });
-
-      this.$vm.__call_hook('created');
-      this.$vm.__call_hook('onLoad', args); // 开发者可能会在 onLoad 时赋值，提前到 mount 之前
-      this.$vm.$mount();
-    },
-    onReady () {
-      this.$vm._isMounted = true;
-      this.$vm.__call_hook('mounted');
-      this.$vm.__call_hook('onReady');
+    options: {
+      multipleSlots: true,
+      addGlobalClass: true
     },
-    onUnload () {
-      this.$vm.__call_hook('onUnload');
-      {
-        this.$vm.$destroy();
+    data: getData(vueOptions, Vue.prototype),
+    lifetimes: { // 当页面作为组件时
+      attached () {
+        attached.call(this, VueComponent);
+      },
+      ready () {
+        ready.call(this);
+      },
+      detached () {
+        detached.call(this);
       }
     },
-    __e: handleEvent,
-    __l: handleLink
+    methods: { // 作为页面时
+      onLoad (args) {
+        attached.call(this, VueComponent, args);
+      },
+      __e: handleEvent,
+      __l: handleLink
+    }
   };
 
-  initHooks(pageOptions, hooks$1);
+  initHooks(pageOptions.methods, hooks$1);
 
-  return Page(pageOptions)
+  return Component(pageOptions)
 }
 
 function initVueComponent (mpInstace, VueComponent, extraOptions = {}) {

packages/uni-mp-weixin/package.json

 {
 	"name": "@dcloudio/uni-mp-weixin",
-	"version": "0.0.918",
+	"version": "0.0.920",
 	"description": "uni-app mp-weixin",
 	"main": "dist/index.js",
 	"scripts": {

src/core/runtime/wrapper/create-page.js

@@ -31,6 +31,39 @@ const hooks = [
   'onNavigationBarSearchInputClicked'
 ]
 
+function attached (VueComponent, args) {
+  if (__PLATFORM__ === 'mp-baidu') {
+    this.$baiduComponentInstances = Object.create(null)
+  }
+
+  this.$vm = new VueComponent({
+    mpType: 'page',
+    mpInstance: this
+  })
+
+  this.$vm.__call_hook('created')
+  if (args) {
+    this.$vm.$mp.query = args // 又要兼容 mpvue
+    this.$vm.__call_hook('onLoad', args) // 开发者可能会在 onLoad 时赋值，提前到 mount 之前
+  }
+  this.$vm.$mount()
+}
+
+function ready () {
+  this.$vm.__call_hook('beforeMount')
+  this.$vm._isMounted = true
+  this.$vm.__call_hook('mounted')
+  this.$vm.__call_hook('onReady')
+}
+
+function detached () {
+  this.$vm.__call_hook('onUnload')
+  if (__PLATFORM__ === 'mp-baidu') { // 百度组件不会在页面 unload 时触发 detached
+    baiduPageDestroy(this.$vm)
+  } else {
+    this.$vm.$destroy()
+  }
+}
 export function createPage (vueOptions) {
   vueOptions = vueOptions.default || vueOptions
   let VueComponent
@@ -41,39 +74,32 @@ export function createPage (vueOptions) {
     VueComponent = Vue.extend(vueOptions)
   }
   const pageOptions = {
-    data: getData(vueOptions, Vue.prototype),
-    onLoad (args) {
-      if (__PLATFORM__ === 'mp-baidu') {
-        this.$baiduComponentInstances = Object.create(null)
-      }
-
-      this.$vm = new VueComponent({
-        mpType: 'page',
-        mpInstance: this
-      })
-
-      this.$vm.__call_hook('created')
-      this.$vm.__call_hook('onLoad', args) // 开发者可能会在 onLoad 时赋值，提前到 mount 之前
-      this.$vm.$mount()
-    },
-    onReady () {
-      this.$vm._isMounted = true
-      this.$vm.__call_hook('mounted')
-      this.$vm.__call_hook('onReady')
+    options: {
+      multipleSlots: true,
+      addGlobalClass: true
     },
-    onUnload () {
-      this.$vm.__call_hook('onUnload')
-      if (__PLATFORM__ === 'mp-baidu') { // 百度组件不会在页面 unload 时触发 detached
-        baiduPageDestroy(this.$vm)
-      } else {
-        this.$vm.$destroy()
+    data: getData(vueOptions, Vue.prototype),
+    lifetimes: { // 当页面作为组件时
+      attached () {
+        attached.call(this, VueComponent)
+      },
+      ready () {
+        ready.call(this)
+      },
+      detached () {
+        detached.call(this)
       }
     },
-    __e: handleEvent,
-    __l: handleLink
+    methods: { // 作为页面时
+      onLoad (args) {
+        attached.call(this, VueComponent, args)
+      },
+      __e: handleEvent,
+      __l: handleLink
+    }
   }
 
-  initHooks(pageOptions, hooks)
+  initHooks(pageOptions.methods, hooks)
 
-  return Page(pageOptions)
+  return Component(pageOptions)
 }

src/core/runtime/wrapper/util.js

@@ -128,14 +128,21 @@ function wrapper (event) {
   return event
 }
 
-function processEventArgs (event, args = [], isCustom) {
+function processEventArgs (event, args = [], isCustom, methodName) {
   if (isCustom && !args.length) { // 无参数，直接传入 detail 数组
+    if (!Array.isArray(event.detail)) { // 应该是使用了 wxcomponent 原生组件，为了向前兼容，传递原始 event 对象
+      return [event]
+    }
     return event.detail
   }
   const ret = []
   args.forEach(arg => {
     if (arg === '$event') {
-      ret.push(isCustom ? event.detail[0] : event)
+      if (methodName === '__set_model' && !isCustom) { // input v-model value
+        ret.push(event.target.value)
+      } else {
+        ret.push(isCustom ? event.detail[0] : event)
+      }
     } else {
       ret.push(arg)
     }
@@ -147,14 +154,6 @@ function processEventArgs (event, args = [], isCustom) {
 const ONCE = '~'
 const CUSTOM = '^'
 
-function getTarget (obj, path) {
-  const parts = path.split('.')
-  if (parts.length === 1) {
-    return obj[parts[0]]
-  }
-  return getTarget(obj[parts[0]], parts.slice(1).join('.'))
-}
-
 export function handleEvent (event) {
   event = wrapper(event)
 
@@ -178,26 +177,17 @@ export function handleEvent (event) {
     if (eventsArray && eventType === type) {
       eventsArray.forEach(eventArray => {
         const methodName = eventArray[0]
-        if (methodName === '$set') { // prop.sync
-          const args = eventArray[1]
-          if (args.length === 2) { // :title.sync="title"
-            this.$vm[args[0]] = event.detail[0]
-          } else if (args.length === 3) {
-            this.$vm.$set(getTarget(this.$vm, args[0]), args[1], event.detail[0])
-          }
-        } else {
-          const handler = this.$vm[methodName]
-          if (!isFn(handler)) {
-            throw new Error(` _vm.${methodName} is not a function`)
-          }
-          if (isOnce) {
-            if (handler.once) {
-              return
-            }
-            handler.once = true
+        const handler = this.$vm[methodName]
+        if (!isFn(handler)) {
+          throw new Error(` _vm.${methodName} is not a function`)
+        }
+        if (isOnce) {
+          if (handler.once) {
+            return
           }
-          handler.apply(this.$vm, processEventArgs(event, eventArray[1], isCustom))
+          handler.once = true
         }
+        handler.apply(this.$vm, processEventArgs(event, eventArray[1], isCustom, methodName))
       })
     }
   })