@mpxjs/webpack-plugin 2.9.17 → 2.9.19-react.0

package/lib/native-loader.js

@@ -6,8 +6,12 @@ const createHelpers = require('./helpers')
 const getJSONContent = require('./utils/get-json-content')
 const async = require('async')
 const { matchCondition } = require('./utils/match-condition')
-const { JSON_JS_EXT } = require('./utils/const')
+const { JSON_JS_EXT, MPX_APP_MODULE_ID } = require('./utils/const')
 const getRulesRunner = require('./platform')
+const getEntryName = require('./utils/get-entry-name')
+const AppEntryDependency = require('./dependencies/AppEntryDependency')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+
 // todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
   this.cacheable()
@@ -21,8 +25,8 @@ module.exports = function (content) {
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
-  const moduleId = 'm' + mpx.pathHash(filePath)
   const { resourcePath, queryObj } = parseRequest(this.resource)
+  const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
   const mode = mpx.mode
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
@@ -31,7 +35,6 @@ module.exports = function (content) {
   const componentsMap = mpx.componentsMap[packageName]
   const parsed = path.parse(resourcePath)
   const resourceName = path.join(parsed.dir, parsed.name)
-  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const srcMode = localSrcMode || globalSrcMode
   const typeExtMap = config[srcMode].typeExtMap
   const typeResourceMap = {}
@@ -143,6 +146,7 @@ module.exports = function (content) {
         useJSONJS
       }, null, this, callback)
     }, (content, callback) => {
+      let componentPlaceholder = []
       let json
       try {
         json = JSON5.parse(content)
@@ -158,7 +162,35 @@ module.exports = function (content) {
         warn: emitWarning,
         error: emitError
       }
-      if (!isApp) {
+
+      let ctorType = pagesMap[resourcePath]
+        ? 'page'
+        : componentsMap[resourcePath]
+          ? 'component'
+          : 'app'
+
+      // 支持资源query传入isPage或isComponent支持页面/组件单独编译
+      if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
+        const entryName = getEntryName(this) || mpx.getOutputPath(resourcePath, queryObj.isComponent ? 'component' : 'page')
+        ctorType = queryObj.isComponent ? 'component' : 'page'
+        this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
+      }
+
+      // 处理构造器类型
+      const ctor = ctorType === 'page'
+        ? (mpx.forceUsePageCtor || mode === 'ali') ? 'Page' : 'Component'
+        : ctorType === 'component'
+          ? 'Component'
+          : 'App'
+
+      if (ctorType === 'app') {
+        const appName = getEntryName(this)
+        if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+      }
+
+      const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
+
+      if (ctorType !== 'app') {
         rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
       }
       const rulesRunner = getRulesRunner(rulesRunnerOptions)
@@ -166,6 +198,9 @@ module.exports = function (content) {
       if (json.usingComponents) {
         usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
       }
+      if (json.componentPlaceholder) {
+        componentPlaceholder = componentPlaceholder.concat(Object.values(json.componentPlaceholder))
+      }
       const {
         getRequire
       } = createHelpers(loaderContext)
@@ -180,13 +215,15 @@ module.exports = function (content) {
 
         switch (type) {
           case 'template':
-            if (isApp) return ''
+            if (ctorType === 'app') return ''
             Object.assign(extraOptions, {
               hasScoped,
               hasComment,
               isNative,
+              ctorType,
               moduleId,
-              usingComponents
+              usingComponents,
+              componentPlaceholder
             })
             break
           case 'styles':
@@ -209,20 +246,6 @@ module.exports = function (content) {
         output += `global.currentResource = ${JSON.stringify(filePath)}\n`
       }
 
-      // 注入构造函数
-      let ctor = 'App'
-      let ctorType = 'app'
-      if (pagesMap[resourcePath]) {
-        ctorType = 'page'
-        if (mpx.forceUsePageCtor || mode === 'ali') {
-          ctor = 'Page'
-        } else {
-          ctor = 'Component'
-        }
-      } else if (componentsMap[resourcePath]) {
-        ctor = 'Component'
-        ctorType = 'component'
-      }
       output += `global.currentCtor = ${ctor}\n`
       output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()

package/lib/platform/index.js

@@ -16,6 +16,9 @@ module.exports = function getRulesRunner ({
     template: {
       wx: require('./template/wx')
     },
+    style: {
+      wx: require('./style/wx')
+    },
     json: {
       wx: require('./json/wx')
     }

package/lib/platform/style/wx/index.js

@@ -0,0 +1,413 @@
+const { hump2dash } = require('../../../utils/hump-dash')
+
+module.exports = function getSpec ({ warn, error }) {
+  // React Native 双端都不支持的 CSS property
+  const unsupportedPropExp = /^(box-sizing|white-space|text-overflow|animation|transition)$/
+  const unsupportedPropMode = {
+    // React Native ios 不支持的 CSS property
+    ios: /^(vertical-align)$/,
+    // React Native android 不支持的 CSS property
+    android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
+  }
+  const unsupportedPropError = ({ prop, mode }) => {
+    error(`Property [${prop}] is not supported in React Native ${mode} environment!`)
+  }
+
+  // React 属性支持的枚举值
+  const SUPPORTED_PROP_VAL_ARR = {
+    overflow: ['visible', 'hidden', 'scroll'],
+    'border-style': ['solid', 'dotted', 'dashed'],
+    display: ['flex', 'none'],
+    'pointer-events': ['auto', 'none'],
+    'vertical-align': ['auto', 'top', 'bottom', 'center'],
+    position: ['relative', 'absolute'],
+    'font-variant': ['small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums'],
+    'text-align': ['left', 'right', 'center', 'justify'],
+    'font-style': ['normal', 'italic'],
+    'font-weight': ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    'text-decoration-line': ['none', 'underline', 'line-through', 'underline line-through'],
+    'text-transform': ['none', 'uppercase', 'lowercase', 'capitalize'],
+    'user-select': ['auto', 'text', 'none', 'contain', 'all'],
+    'align-content': ['flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around'],
+    'align-items': ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
+    'align-self': ['auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
+    'justify-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'none'],
+    'background-size': ['contain', 'cover', 'auto'],
+    'background-repeat': ['no-repeat']
+  }
+  const propValExp = new RegExp('^(' + Object.keys(SUPPORTED_PROP_VAL_ARR).join('|') + ')$')
+  const isIllegalValue = ({ prop, value }) => SUPPORTED_PROP_VAL_ARR[prop]?.length > 0 && !SUPPORTED_PROP_VAL_ARR[prop].includes(value)
+  const unsupportedValueError = ({ prop, value }) => {
+    error(`Property [${prop}] only support value [${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}] in React Native environment, the value [${value}] does not support!`)
+  }
+
+  // 过滤的不合法的属性
+  const delRule = ({ prop, value }, { mode }) => {
+    if (unsupportedPropExp.test(prop) || unsupportedPropMode[mode].test(prop)) {
+      unsupportedPropError({ prop, mode })
+      return false
+    }
+    if (isIllegalValue({ prop, value })) {
+      unsupportedValueError({ prop, value })
+      return false
+    }
+  }
+
+  // color & number 值校验
+  const ValueType = {
+    number: 'number',
+    color: 'color',
+    default: 'default' // 不校验
+  }
+  // number 类型支持的单位
+  const numberRegExp = /^\s*(\d+(\.\d+)?)(rpx|px|%)?\s*$/
+  // RN 不支持的颜色格式
+  const colorRegExp = /^\s*(lab|lch|oklab|oklch|color-mix|color|hwb|lch|light-dark).*$/
+
+  const verifyValues = ({ prop, value, valueType }) => {
+    // 校验 value 枚举 是否支持
+    switch (valueType) {
+      case ValueType.color: {
+        const isNumber = numberRegExp.test(value)
+        const isUnsupporttedColor = colorRegExp.test(value)
+        isNumber && warn(`React Native property [${prop}]'s valueType is ${valueType}, we does not set type number`)
+        isUnsupporttedColor && warn('React Native color does not support type [lab,lch,oklab,oklch,color-mix,color,hwb,lch,light-dark]')
+        return !isNumber && !isUnsupporttedColor
+      }
+      case ValueType.number: {
+        const isNumber = numberRegExp.test(value)
+        !isNumber && warn(`React Native property [${prop}] unit only supports [rpx,px,%]`)
+        return isNumber
+      }
+      default:
+        return true
+    }
+  }
+  // 统一校验 value type 值类型
+  const checkCommonValue = (valueType) => ({ prop, value }) => {
+    verifyValues({ prop, value, valueType })
+  }
+
+  // 简写转换规则
+  const AbbreviationMap = {
+    'text-shadow': { // 仅支持 offset-x | offset-y | blur-radius | color 排序
+      'textShadowOffset.width': ValueType.number,
+      'textShadowOffset.height': ValueType.number,
+      textShadowRadius: ValueType.number,
+      textShadowColor: ValueType.color
+    },
+    border: { // 仅支持 width | style | color 这种排序
+      borderWidth: ValueType.number,
+      borderStyle: ValueType.default,
+      borderColor: ValueType.color
+    },
+    'box-shadow': { // 仅支持 offset-x | offset-y | blur-radius | color 排序
+      'shadowOffset.width': ValueType.number,
+      'shadowOffset.height': ValueType.number,
+      shadowRadius: ValueType.number,
+      shadowColor: ValueType.color
+    },
+    'text-decoration': { // 仅支持 text-decoration-line text-decoration-style text-decoration-color 这种格式
+      textDecorationLine: ValueType.default,
+      textDecorationStyle: ValueType.default,
+      textDecorationColor: ValueType.color
+    },
+    flex: { // /* Three values: flex-grow | flex-shrink | flex-basis */
+      flexGrow: ValueType.number,
+      flexShrink: ValueType.number,
+      flexBasis: ValueType.number
+    },
+    'flex-flow': { // 仅支持 flex-flow: <'flex-direction'> or flex-flow: <'flex-direction'> and <'flex-wrap'>
+      flexDirection: ValueType.default,
+      flexWrap: ValueType.default
+    },
+    'border-radius': {
+      borderTopLeftRadius: ValueType.number,
+      borderTopRightRadius: ValueType.number,
+      borderBottomRightRadius: ValueType.number,
+      borderBottomLeftRadius: ValueType.number
+    }
+  }
+  const formatAbbreviation = ({ value, keyMap }) => {
+    const values = value.trim().split(/\s(?![^()]*\))/)
+    const cssMap = []
+    const props = Object.getOwnPropertyNames(keyMap)
+    let idx = 0
+    // 按值的个数循环赋值
+    while (idx < values.length && idx < props.length) {
+      const prop = props[idx]
+      const valueType = keyMap[prop]
+      const dashProp = hump2dash(prop)
+      // 校验 value 类型
+      verifyValues({ prop, value: values[idx], valueType })
+      const value = values[idx]
+      if (isIllegalValue({ prop: dashProp, value })) {
+        // 过滤不支持 value
+        unsupportedValueError({ prop: dashProp, value })
+      } else if (prop.includes('.')) {
+        // 多个属性值的prop
+        const [main, sub] = prop.split('.')
+        const cssData = cssMap.find(item => item.prop === main)
+        if (cssData) { // 设置过
+          cssData.value[sub] = value
+        } else { // 第一次设置
+          cssMap.push({
+            prop: main,
+            value: {
+              [sub]: value
+            }
+          })
+        }
+      } else {
+        // 单个值的属性
+        cssMap.push({
+          prop,
+          value
+        })
+      }
+      idx += 1
+    }
+    return cssMap
+  }
+  const getAbbreviation = ({ prop, value }) => {
+    const keyMap = AbbreviationMap[prop]
+    return formatAbbreviation({ prop, value, keyMap })
+  }
+  // 简写过滤安卓不支持的类型
+  const getAbbreviationAndroid = ({ prop, value }, { mode }) => {
+    const cssMap = getAbbreviation({ prop, value })
+    // android 不支持的 shadowOffset shadowOpacity shadowRadius textDecorationStyle 和 textDecorationStyle
+    return cssMap.filter(({ prop }) => { // 不支持的 prop 提示 & 过滤不支持的 prop
+      const dashProp = hump2dash(prop)
+      if (unsupportedPropMode.android.test(dashProp)) {
+        unsupportedPropError({ prop: dashProp, mode })
+        return false
+      }
+      return true
+    })
+  }
+
+  const formatMargins = ({ prop, value }) => {
+    const values = value.trim().split(/\s(?![^()]*\))/)
+    // validate
+    for (let i = 0; i < values.length; i++) {
+      verifyValues({ prop, value: values[i], valueType: ValueType.number })
+    }
+    // format
+    let suffix = []
+    switch (values.length) {
+      // case 1:
+      case 2:
+        suffix = ['Vertical', 'Horizontal']
+        break
+      case 3:
+        suffix = ['Top', 'Horizontal', 'Bottom']
+        break
+      case 4:
+        suffix = ['Top', 'Right', 'Bottom', 'Left']
+        break
+    }
+    return values.map((value, index) => {
+      return {
+        prop: `${prop}${suffix[index] || ''}`,
+        value: value
+      }
+    })
+  }
+
+  const formatLineHeight = ({ prop, value }) => {
+    if (!verifyValues({ prop, value, valueType: ValueType.number })) return false
+
+    return {
+      prop,
+      value: /\d+(\.\d+)?$/.test(value) ? `${Math.round(value * 100)}%` : value
+    }
+  }
+
+  const getFontVariant = ({ prop, value }) => {
+    if (/^(font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures)$/.test(prop)) {
+      error(`Property [${prop}] is not supported in React Native environment, please replace [font-variant]!`)
+    }
+    prop = 'font-variant'
+    // 校验枚举值
+    if (isIllegalValue({ prop, value })) {
+      unsupportedValueError({ prop, value })
+      return false
+    }
+    return {
+      prop,
+      value
+    }
+  }
+
+  // background 相关属性的处理，仅支持以下属性，不支持其他背景相关的属性：/^((?!(-color)).)*background((?!(-color)).)*$/ 包含background且不包含background-color
+  const checkBackgroundImage = ({ prop, value }, { mode }) => {
+    const bgPropMap = {
+      image: 'background-image',
+      color: 'background-color',
+      size: 'background-size',
+      repeat: 'background-repeat',
+      // position: 'background-position',
+      all: 'background'
+    }
+    const urlExp = /url\(["']?(.*?)["']?\)/
+    switch (prop) {
+      case bgPropMap.color: {
+        // background-color 背景色校验一下颜色值
+        verifyValues({ prop, value, valueType: ValueType.color })
+        return { prop, value }
+      }
+      case bgPropMap.image: {
+        // background-image 仅支持背景图
+        const imgUrl = value.match(urlExp)?.[0]
+        if (/.*linear-gradient*./.test(value)) {
+          error(`<linear-gradient()> is not supported in React Native ${mode} environment!`)
+        }
+        if (imgUrl) {
+          return { prop, value: imgUrl }
+        } else {
+          error(`[${prop}] only support value <url()>`)
+          return false
+        }
+      }
+      case bgPropMap.size: {
+        // background-size
+        // 不支持逗号分隔的多个值：设置多重背景!!!
+        // 支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto
+        // 支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度
+        if (value.includes(',')) { // commas are not allowed in values
+          error(`background size value[${value}] does not support commas in React Native ${mode} environment!`)
+          return false
+        }
+        const values = []
+        value.trim().split(/\s(?![^()]*\))/).forEach(item => {
+          if (numberRegExp.test(item) || !isIllegalValue({ prop, value: item })) {
+            // 支持 number 值 / container cover auto 枚举
+            values.push(item)
+          } else {
+            error(`background size value[${value}] does not support in React Native ${mode} environment!`)
+          }
+        })
+        // value 无有效值时返回false
+        return values.length === 0 ? false : { prop, value: values }
+      }
+      case bgPropMap.repeat: {
+        // background-repeat 仅支持 no-repeat
+        if (isIllegalValue({ prop, value })) {
+          unsupportedValueError({ prop, value })
+          return false
+        }
+        return { prop, value }
+      }
+      case bgPropMap.all: {
+        // background: 仅支持 background-image & background-color & background-size
+        const bgMap = []
+        const values = value.trim().split(/\s(?![^()]*\))/)
+        values.forEach(item => {
+          const url = item.match(urlExp)?.[0]
+          if (/.*linear-gradient*./.test(item)) {
+            error(`<linear-gradient()> is not supported in React Native ${mode} environment!`)
+          } else if (url) {
+            bgMap.push({ prop: bgPropMap.image, value: url })
+          } else if (/^(#[0-9a-f]{3}$|#[0-9a-f]{6}$|rgb|rgba)/i.test(item)) {
+            bgMap.push({ prop: bgPropMap.color, value: item })
+          } else if (SUPPORTED_PROP_VAL_ARR[bgPropMap.size].includes(item)) {
+            bgMap.push({ prop: bgPropMap.size, value: item })
+          } else if (SUPPORTED_PROP_VAL_ARR[bgPropMap.repeat].includes(item)) {
+            bgMap.push({ prop: bgPropMap.repeat, value: item })
+          }
+        })
+        return bgMap.length ? bgMap : false
+      }
+    }
+    unsupportedPropError({ prop, mode })
+    return false
+  }
+
+  const getBorderRadius = ({ prop, value }) => {
+    const values = value.trim().split(/\s(?![^()]*\))/)
+    if (values.length === 1) {
+      verifyValues({ prop, value, valueType: ValueType.number })
+      return { prop, value }
+    } else {
+      return getAbbreviation({ prop, value })
+    }
+  }
+
+  const spec = {
+    supportedModes: ['ios', 'android'],
+    rules: [
+      { // 背景相关属性的处理
+        test: /.*background*./,
+        ios: checkBackgroundImage,
+        android: checkBackgroundImage
+      },
+      { // RN 不支持的 CSS property
+        test: unsupportedPropExp,
+        ios: delRule,
+        android: delRule
+      },
+      { // React Native android 不支持的 CSS property
+        test: unsupportedPropMode.android,
+        android: delRule
+      },
+      { // React Native ios 不支持的 CSS property
+        test: unsupportedPropMode.ios,
+        ios: delRule
+      },
+      { // RN 支持的 CSS property value
+        test: propValExp,
+        ios: delRule,
+        android: delRule
+      },
+      {
+        test: 'box-shadow',
+        ios: getAbbreviation,
+        android: getAbbreviationAndroid
+      },
+      {
+        test: 'text-decoration',
+        ios: getAbbreviation,
+        android: getAbbreviationAndroid
+      },
+      {
+        test: /.*font-variant.*/,
+        ios: getFontVariant,
+        android: getFontVariant
+      },
+      {
+        test: 'border-radius',
+        ios: getBorderRadius,
+        android: getBorderRadius
+      },
+      { // margin padding 内外边距的处理
+        test: /.*(margin|padding).*/,
+        ios: formatMargins,
+        android: formatMargins
+      },
+      // 通用的简写格式匹配
+      {
+        test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),
+        ios: getAbbreviation,
+        android: getAbbreviation
+      },
+      // 值类型校验放到最后
+      { // color 颜色值校验
+        test: /.*color.*/i,
+        ios: checkCommonValue(ValueType.color),
+        android: checkCommonValue(ValueType.color)
+      },
+      { // color 颜色值校验
+        test: 'line-height',
+        ios: formatLineHeight,
+        android: formatLineHeight
+      },
+      { // number 值校验
+        test: /.*width|height|left|right|top|bottom|radius|margin|padding|spacing|offset|size.*/i,
+        ios: checkCommonValue(ValueType.number),
+        android: checkCommonValue(ValueType.number)
+      }
+    ]
+  }
+  return spec
+}

package/lib/platform/template/wx/component-config/button.js

@@ -30,6 +30,12 @@ module.exports = function ({ print }) {
   const webEventLog = print({ platform: 'web', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const wxPropValueLog = print({ platform: 'wx', tag: TAG_NAME, isError: false, type: 'value' })
+  const iosValueLogError = print({ platform: 'ios', tag: TAG_NAME, isError: true, type: 'value' })
+  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
+  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
+  const androidValueLogError = print({ platform: 'android', tag: TAG_NAME, isError: true, type: 'value' })
+  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
+  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
 
   return {
     test: TAG_NAME,
@@ -37,6 +43,14 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-button'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-button'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-button'
+    },
     props: [
       {
         test: 'open-type',
@@ -107,6 +121,18 @@ module.exports = function ({ print }) {
               ttValueLogError({ name, value })
             }
           }
+        },
+        ios ({ name, value }) {
+          const supported = ['share']
+          if (!supported.includes(value)) {
+            iosValueLogError({ name, value })
+          }
+        },
+        android ({ name, value }) {
+          const supported = ['share']
+          if (!supported.includes(value)) {
+            androidValueLogError({ name, value })
+          }
         }
       },
       {
@@ -143,6 +169,11 @@ module.exports = function ({ print }) {
       {
         test: /^(open-type|lang|session-from|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|bindgetuserinfo|bindcontact|bindgetphonenumber|binderror|bindopensetting|bindlaunchapp)$/,
         qa: qaPropLog
+      },
+      {
+        test: /^(lang|from-type|hover-class|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|phone-number-no-quota-toast|bindgetuserinfo|bindcontact|createliveactivity|bindgetphonenumber|bindgetrealtimephonenumber|binderror|bindopensetting|bindlaunchapp|bindchooseavatar|bindagreeprivacyauthorization)$/,
+        ios: iosPropLog,
+        android: androidPropLog
       }
     ],
     event: [
@@ -175,6 +206,11 @@ module.exports = function ({ print }) {
       {
         test: /^(getuserinfo|contact|error|launchapp|opensetting|getphonenumber)$/,
         web: webEventLog
+      },
+      {
+        test: /^(getuserinfo|contact|getphonenumber|bindgetrealtimephonenumber|error|opensetting|launchapp|chooseavatar|agreeprivacyauthorization)$/,
+        ios: iosEventLog,
+        android: androidEventLog
       }
     ]
   }

package/lib/platform/template/wx/component-config/cover-view.js

@@ -7,7 +7,7 @@ module.exports = function ({ print }) {
   return {
     test: TAG_NAME,
     web (tag, { el }) {
-      if (el.hasEvent) {
+      if (el.hasModel) {
         el.isBuiltIn = true
       }
       if (el.isBuiltIn) {

package/lib/platform/template/wx/component-config/image.js

@@ -6,6 +6,8 @@ module.exports = function ({ print }) {
   const jdPropLog = print({ platform: 'jd', tag: TAG_NAME, isError: false })
   const ttPropLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
+  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
+  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
 
   return {
     test: TAG_NAME,
@@ -13,6 +15,14 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-image'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-image'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-image'
+    },
     props: [
       {
         test: /^show-menu-by-longpress$/,
@@ -34,6 +44,11 @@ module.exports = function ({ print }) {
       {
         test: /^(show-menu-by-longpress|webp)$/,
         qa: qaPropLog
+      },
+      {
+        test: /^(show-menu-by-longpress|fade-in)$/,
+        ios: iosPropLog,
+        android: androidPropLog
       }
     ]
   }