feat(taroize): 构造函数支持传入变量

NervJS · Apr 1, 2019 · f104d05 · f104d05
1 parent 3e27853
commit f104d05
Show file tree

Hide file tree

Showing 2 changed files with 295 additions and 231 deletions.
diff --git a/packages/taro-with-weapp/src/index.ts b/packages/taro-with-weapp/src/index.ts
@@ -1,9 +1,4 @@
-import {
-  Component,
-  ComponentLifecycle,
-  getEnv,
-  internal_safe_set as safeSet
-} from '@tarojs/taro'
+import { Component, ComponentLifecycle, getEnv, internal_safe_set as safeSet } from '@tarojs/taro'
 import isEqual from 'lodash/isEqual'
 
 type WeappLifeCycle = () => void
@@ -20,6 +15,11 @@ interface WeappComponent<P, S> extends Component<P, S> {
   detached?: WeappLifeCycle
   attached?: WeappLifeCycle
   moved?: WeappLifeCycle,
+  onLoad?: WeappLifeCycle,
+  onShow?: WeappLifeCycle,
+  onReady?: WeappLifeCycle,
+  onHide?: WeappLifeCycle,
+  onUnload?: WeappLifeCycle,
   globalData?: any,
   setData: Function
   _observeProps?: ObserverProperties[]
@@ -49,90 +49,140 @@ function isFunction (o): o is Function {
   return typeof o === 'function'
 }
 
-export default function withWeapp (componentType: string) {
+export default function withWeapp (componentType: string, weappConf?: Object) {
   const isComponent = componentType === 'Component'
 
-  return (ConnectComponent: ComponentClass) => class BaseComponent<_ = {}, S = {}> extends ConnectComponent {
-    constructor (props) {
-      super(props)
-      defineGetter(this, 'data', 'state')
-      if (isComponent) {
-        defineGetter(this, 'properties', 'props')
+  return (ConnectComponent: ComponentClass) => {
+    class BaseComponent<_ = {}, S = {}> extends ConnectComponent {
+      constructor (props) {
+        super(props)
+        defineGetter(this, 'data', 'state')
+        if (isComponent) {
+          defineGetter(this, 'properties', 'props')
+        }
       }
-    }
-
-    private safeExecute = (func?: Function, ...arg) => {
-      if (func) func.apply(this, arg)
-    }
 
-    private executeComponentFunc = (func?: Function, ...args) => {
-      if (isComponent) {
-        this.safeExecute(func, args)
+      private safeExecute = (func?: Function, ...arg: any[]) => {
+        if (func) func.apply(this, arg)
       }
-    }
 
-    setData = (obj: S) => {
-      const state = Object.assign({}, this.state)
-      Object.keys(obj).forEach(key => {
-        safeSet(state, key, obj[key])
-      })
-      Object.assign(this.state, state)
-      this.setState(state)
-    }
+      private executeComponentFunc = (func?: Function, ...args: any[]) => {
+        if (isComponent) {
+          this.safeExecute(func, args)
+        }
+      }
 
-    triggerEvent = (eventName: string, ...args) => {
-      if (typeof eventName !== 'string') {
-        throw new Error('triggerEvent 第一个参数必须是字符串')
+      setData = (obj: S) => {
+        const state = Object.assign({}, this.state)
+        Object.keys(obj).forEach(key => {
+          safeSet(state, key, obj[key])
+        })
+        Object.assign(this.state, state)
+        this.setState(state)
       }
-      const fullEventName = `on${eventName}`
-      if (getEnv() === 'WEB') {
-        const func = this.props[`on${eventName[0].slice(0, 1)}${eventName.slice(1)}`]
-        if (typeof func === 'function') {
-          func(...args)
+
+      triggerEvent = (eventName: string, ...args: any[]) => {
+        if (typeof eventName !== 'string') {
+          throw new Error('triggerEvent 第一个参数必须是字符串')
+        }
+        const fullEventName = `on${eventName}`
+        if (getEnv() === 'WEB') {
+          const func = this.props[`on${eventName[0].slice(0, 1)}${eventName.slice(1)}`]
+          if (typeof func === 'function') {
+            func(...args)
+          }
+        } else {
+          this.$scope.triggerEvent(fullEventName.toLowerCase(), ...args)
         }
-      } else {
-        this.$scope.triggerEvent(fullEventName.toLowerCase(), ...args)
       }
-    }
 
-    componentWillReceiveProps (nextProps) {
-      if (Array.isArray(this._observeProps)) {
-        this._observeProps.forEach(({ name: key, observer }) => {
-          const prop = this.props[key]
-          const nextProp = nextProps[key]
-          // 小程序是深比较不同之后才 trigger observer
-          if (!isEqual(prop, nextProp)) {
-            if (typeof observer === 'string') {
-              const ob = this[observer]
-              if (isFunction(ob)) {
-                ob.call(this, nextProp, prop, key)
+      componentWillReceiveProps (nextProps: _) {
+        if (Array.isArray(this._observeProps)) {
+          this._observeProps.forEach(({ name: key, observer }) => {
+            const prop = this.props[key]
+            const nextProp = nextProps[key]
+            // 小程序是深比较不同之后才 trigger observer
+            if (!isEqual(prop, nextProp)) {
+              if (typeof observer === 'string') {
+                const ob = this[observer]
+                if (isFunction(ob)) {
+                  ob.call(this, nextProp, prop, key)
+                }
+              } else if (isFunction(observer)) {
+                observer.call(this, nextProp, prop, key)
               }
-            } else if (isFunction(observer)) {
-              observer.call(this, nextProp, prop, key)
             }
-          }
-        })
+          })
+        }
+        this.executeComponentFunc(super.componentWillReceiveProps)
       }
-      this.executeComponentFunc(super.componentWillReceiveProps)
-    }
 
-    componentWillMount () {
-      this.executeComponentFunc(this.created)
-      if (super.componentWillMount) {
-        super.componentWillMount.call(this, this.$router.params || {})
+      componentWillMount () {
+        this.executeComponentFunc(this.created)
+        this.safeExecute(this.onLoad)
+        if (super.componentWillMount) {
+          super.componentWillMount.call(this, this.$router.params || {})
+        }
       }
-    }
 
-    componentDidMount () {
-      this.executeComponentFunc(this.attached)
-      this.safeExecute(super.componentDidMount)
-      this.executeComponentFunc(this.ready)
-    }
+      componentDidHide () {
+        this.safeExecute(this.onHide)
+        this.safeExecute(super.componentDidHide)
+      }
+
+      componentDidShow () {
+        this.safeExecute(this.onShow)
+        this.safeExecute(super.componentDidShow)
+      }
+
+      componentDidMount () {
+        this.executeComponentFunc(this.attached)
+        this.safeExecute(super.componentDidMount)
+        this.executeComponentFunc(this.ready)
+        this.safeExecute(this.onReady)
+      }
 
-    componentWillUnmount () {
-      this.safeExecute(super.componentWillUnmount)
-      this.executeComponentFunc(this.detached)
+      componentWillUnmount () {
+        this.safeExecute(super.componentWillUnmount)
+        this.safeExecute(this.onUnload)
+        this.executeComponentFunc(this.detached)
+      }
     }
 
+    if (weappConf) {
+      for (const confKey in weappConf) {
+        if (weappConf.hasOwnProperty(confKey)) {
+          const confValue = weappConf[confKey]
+          if (confKey === 'data') {
+            BaseComponent.prototype.state = confValue
+          } else if (confKey === 'properties') {
+            for (const propKey in confValue) {
+              if (confValue.hasOwnProperty(propKey)) {
+                const propValue = confValue[propKey]
+                if (typeof propValue !== 'function') {
+                  if (propValue.value) {
+                    (BaseComponent as any).defaultProps = {
+                      [propKey]: propValue.value
+                    }
+                  }
+                  if (propValue.observer) {
+                    if (!BaseComponent.prototype._observeProps) {
+                      BaseComponent.prototype._observeProps = []
+                    }
+                    BaseComponent.prototype._observeProps.push({
+                      name: propKey,
+                      observer: propValue.observer
+                    })
+                  }
+                }
+              }
+            }
+          } else {
+            BaseComponent.prototype[confKey] = confValue
+          }
+        }
+      }
+    }
+    return BaseComponent
   }
 }