Merge branch 'master' of https://github.com/didi/mpx

Author: hiyuki

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     jd: 'readonly',
     qa: 'readonly',
     dd: 'readonly',
+    ks: 'readonly',
     Component: 'readonly',
     Page: 'readonly',
     App: 'readonly',

packages/core/@types/global.d.ts

@@ -1,5 +1,5 @@
 // declaration for mpx mode
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony' | 'ks'
 
 // declaration for mpx env
 declare let __mpx_env__: string

packages/core/@types/index.d.ts

@@ -412,7 +412,7 @@ interface MpxConfig {
   rnConfig: RnConfig,
 }
 
-type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'
+type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'| 'ks' | 'jd' | 'dd'
 
 interface ImplementOptions {
   modes?: Array<SupportedMode>

packages/core/src/convertor/convertor.js

@@ -9,6 +9,7 @@ import wxToTtRule from './wxToTt'
 import wxToDdRule from './wxToDd'
 import wxToJdRule from './wxToJd'
 import wxToReactRule from './wxToReact'
+import wxToKsRule from './wxToKs'
 
 /**
  * 转换规则包含四点
@@ -38,7 +39,8 @@ const rulesMap = {
   wxToJd: extend({}, defaultConvertRule, wxToJdRule),
   wxToIos: extend({}, defaultConvertRule, wxToReactRule),
   wxToAndroid: extend({}, defaultConvertRule, wxToReactRule),
-  wxToHarmony: extend({}, defaultConvertRule, wxToReactRule)
+  wxToHarmony: extend({}, defaultConvertRule, wxToReactRule),
+  wxToKs: extend({}, defaultConvertRule, wxToKsRule)
 }
 
 export function getConvertRule (convertMode) {

packages/core/src/convertor/getConvertMode.js

@@ -8,7 +8,8 @@ const convertModes = {
   'wx-dd': 'wxToDd',
   'wx-ios': 'wxToIos',
   'wx-android': 'wxToAndroid',
-  'wx-harmony': 'wxToHarmony'
+  'wx-harmony': 'wxToHarmony',
+  'wx-ks': 'wxToKs'
 }
 
 export function getConvertMode (srcMode) {

packages/core/src/convertor/wxToKs.js

@@ -0,0 +1,21 @@
+import { error } from '@mpxjs/utils'
+
+const BEHAVIORS_MAP = [
+  'wx://form-field',
+  'wx://form-field-group',
+  'wx://form-field-button',
+  'wx://component-export'
+]
+
+export default {
+  convert (options) {
+    if (options.behaviors) {
+      options.behaviors.forEach((behavior, idx) => {
+        if (BEHAVIORS_MAP.includes(behavior)) {
+          error(`Built-in behavior "${behavior}" is not supported in ks environment!`, global.currentResource || global.currentModuleId)
+          options.behaviors.splice(idx, 1)
+        }
+      })
+    }
+  }
+}

packages/core/src/convertor/wxToWeb.js

@@ -6,7 +6,8 @@ import {
   diffAndCloneA,
   error,
   hasOwn,
-  isDev
+  isDev,
+  getDefaultValueByType
 } from '@mpxjs/utils'
 import { implemented } from '../core/implement'
 
@@ -56,6 +57,12 @@ export default {
                   return diffAndCloneA(prop.value).clone
                 }
                 : prop.value
+            } else {
+              // 没有显式设置value时，根据type自动添加默认值，与微信小程序原生行为保持一致
+              const defaultValue = getDefaultValueByType(prop.type, 'web')
+              if (defaultValue !== undefined) {
+                newProp.default = defaultValue
+              }
             }
             props[key] = newProp
           } else {

packages/core/src/core/proxy.js

@@ -31,8 +31,10 @@ import {
   wrapMethodsWithErrorHandling,
   warn,
   error,
-  getEnvObj
+  getEnvObj,
+  def
 } from '@mpxjs/utils'
+import { renderHelperDefs } from '../platform/builtInMixins/renderHelperMixin'
 import {
   BEFORECREATE,
   CREATED,
@@ -190,6 +192,7 @@ export default class MpxProxy {
     this.callHook(CREATED)
 
     if (!isWeb && !isReact) {
+      this.initRenderHelpers()
       this.initRender()
     }
 
@@ -728,6 +731,15 @@ export default class MpxProxy {
     this.toggleRecurse(true)
   }
 
+  initRenderHelpers () {
+    if (this.options.__nativeRender__ || __mpx_mode__ !== 'ks') return
+    Object.keys(renderHelperDefs).forEach((key) => {
+      if (!hasOwn(this.target, key)) {
+        def(this.target, key, renderHelperDefs[key])
+      }
+    })
+  }
+
   initRender () {
     if (this.options.__nativeRender__) return this.doRender()
 

packages/core/src/helper/MpxScroll/index.js

@@ -57,8 +57,8 @@ export default class MpxScroll {
       const isIntersecting = change.isIntersecting
       this.isIntersecting = isIntersecting
       if (!isIntersecting) {
-        // 非 inter section 状态下及时清除 transtorm，以免影响正常滚动时元素的 fixed 定位
-        this.el.style.cssText = ''
+        // 非 inter section 状态下及时清除 transform，以免影响正常滚动时元素的 fixed 定位
+        this.el.style.transform = ''
         this.pullDownEventRegister && this.pullDownEventRegister.destroy()
       } else {
         this.pullDownEventRegister = new EventRegister(this.el, [
@@ -103,7 +103,12 @@ export default class MpxScroll {
 
   transformPage (distance) {
     this.translateY = distance
-    this.el.style.cssText = `transform: translateY(${distance}px)`
+    if (distance === 0) {
+      // 距离为 0 时移除 transform，避免影响页面 fixed 定位
+      this.el.style.transform = ''
+    } else {
+      this.el.style.transform = `translateY(${distance}px)`
+    }
   }
 
   onTouchEnd (e) {
@@ -219,8 +224,15 @@ export default class MpxScroll {
   }
 
   onReachBottom (onReachBottomDistance, callback) {
-    const { bottom } = this.el.getBoundingClientRect()
-    const mark = bottom - window.innerHeight <= onReachBottomDistance
+    const scrollTop = getScrollTop()
+    const scrollHeight = document.documentElement.scrollHeight
+    const clientHeight = window.innerHeight
+
+    // 使用 scrollHeight 判断实际内容高度是否超过视口，只有可滚动时才计算触底
+    const scrollable = scrollHeight > clientHeight
+    // 距离底部的距离 = 内容总高度 - (当前滚动位置 + 视口高度)
+    const distanceToBottom = scrollHeight - (scrollTop + clientHeight)
+    const mark = scrollable && (distanceToBottom <= onReachBottomDistance)
 
     if (!this.bottomReached && mark) {
       this.bottomReached = true

packages/core/src/platform/builtInMixins/index.js

@@ -57,14 +57,18 @@ export default function getBuiltInMixins ({ type, rawOptions = {} }) {
     }
     // 此为纯增强类mixins，原生模式下不需要注入
     if (!rawOptions.__nativeRender__) {
-      bulitInMixins = bulitInMixins.concat([
-        renderHelperMixin(),
+      const enhancedMixins = [
         showMixin(type),
         i18nMixin(),
         dynamicRenderHelperMixin(),
         dynamicSlotMixin(),
         dynamicRefsMixin()
-      ])
+      ]
+      if (__mpx_mode__ !== 'ks') {
+        // ks methods 不支持 _ 或者 $ 开头的方法名，所以 ks 不走 methods mixin
+        enhancedMixins.unshift(renderHelperMixin())
+      }
+      bulitInMixins = bulitInMixins.concat(enhancedMixins)
     }
   }
   return bulitInMixins.filter(item => item)