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') {
+      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,14 +434,6 @@ 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`)
@@ -453,8 +444,7 @@ function handleEvent (event) {
           }
           handler.once = true;
         }
-          handler.apply(this.$vm, processEventArgs(event, eventArray[1], isCustom));
-        }
+        handler.apply(this.$vm, processEventArgs(event, eventArray[1], isCustom, methodName));
       });
     }
   });
@@ -572,18 +562,7 @@ const hooks$1 = [
   'onNavigationBarSearchInputClicked'
 ];
 
-function createPage (vueOptions) {
-  vueOptions = vueOptions.default || vueOptions;
-  let VueComponent;
-  if (isFn(vueOptions)) {
-    VueComponent = vueOptions;
-    vueOptions = VueComponent.extendOptions;
-  } else {
-    VueComponent = Vue.extend(vueOptions);
-  }
-  const pageOptions = {
-    data: getData(vueOptions, Vue.prototype),
-    onLoad (args) {
+function attached (VueComponent, args) {
 
   this.$vm = new VueComponent({
     mpType: 'page',
@@ -591,27 +570,64 @@ function createPage (vueOptions) {
   });
 
   this.$vm.__call_hook('created');
+  if (args) {
+    this.$vm.$mp.query = args; // 又要兼容 mpvue
     this.$vm.__call_hook('onLoad', args); // 开发者可能会在 onLoad 时赋值，提前到 mount 之前
+  }
   this.$vm.$mount();
-    },
-    onReady () {
+}
+
+function ready () {
+  this.$vm.__call_hook('beforeMount');
   this.$vm._isMounted = true;
   this.$vm.__call_hook('mounted');
   this.$vm.__call_hook('onReady');
-    },
-    onUnload () {
+}
+
+function detached () {
   this.$vm.__call_hook('onUnload');
   {
     this.$vm.$destroy();
   }
+}
+function createPage (vueOptions) {
+  vueOptions = vueOptions.default || vueOptions;
+  let VueComponent;
+  if (isFn(vueOptions)) {
+    VueComponent = vueOptions;
+    vueOptions = VueComponent.extendOptions;
+  } else {
+    VueComponent = Vue.extend(vueOptions);
+  }
+  const pageOptions = {
+    options: {
+      multipleSlots: true,
+      addGlobalClass: true
+    },
+    data: getData(vueOptions, Vue.prototype),
+    lifetimes: { // 当页面作为组件时
+      attached () {
+        attached.call(this, VueComponent);
+      },
+      ready () {
+        ready.call(this);
+      },
+      detached () {
+        detached.call(this);
+      }
+    },
+    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,18 +31,7 @@ const hooks = [
   'onNavigationBarSearchInputClicked'
 ]
 
-export function createPage (vueOptions) {
-  vueOptions = vueOptions.default || vueOptions
-  let VueComponent
-  if (isFn(vueOptions)) {
-    VueComponent = vueOptions
-    vueOptions = VueComponent.extendOptions
-  } else {
-    VueComponent = Vue.extend(vueOptions)
-  }
-  const pageOptions = {
-    data: getData(vueOptions, Vue.prototype),
-    onLoad (args) {
+function attached (VueComponent, args) {
   if (__PLATFORM__ === 'mp-baidu') {
     this.$baiduComponentInstances = Object.create(null)
   }
@@ -53,27 +42,64 @@ export function createPage (vueOptions) {
   })
 
   this.$vm.__call_hook('created')
+  if (args) {
+    this.$vm.$mp.query = args // 又要兼容 mpvue
     this.$vm.__call_hook('onLoad', args) // 开发者可能会在 onLoad 时赋值，提前到 mount 之前
+  }
   this.$vm.$mount()
-    },
-    onReady () {
+}
+
+function ready () {
+  this.$vm.__call_hook('beforeMount')
   this.$vm._isMounted = true
   this.$vm.__call_hook('mounted')
   this.$vm.__call_hook('onReady')
-    },
-    onUnload () {
+}
+
+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
+  if (isFn(vueOptions)) {
+    VueComponent = vueOptions
+    vueOptions = VueComponent.extendOptions
+  } else {
+    VueComponent = Vue.extend(vueOptions)
+  }
+  const pageOptions = {
+    options: {
+      multipleSlots: true,
+      addGlobalClass: true
+    },
+    data: getData(vueOptions, Vue.prototype),
+    lifetimes: { // 当页面作为组件时
+      attached () {
+        attached.call(this, VueComponent)
+      },
+      ready () {
+        ready.call(this)
+      },
+      detached () {
+        detached.call(this)
+      }
+    },
+    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') {
+      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,14 +177,6 @@ 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`)
@@ -196,8 +187,7 @@ export function handleEvent (event) {
           }
           handler.once = true
         }
-          handler.apply(this.$vm, processEventArgs(event, eventArray[1], isCustom))
-        }
+        handler.apply(this.$vm, processEventArgs(event, eventArray[1], isCustom, methodName))
       })
     }
   })