fix: 快应用原生组件

NervJS · Aug 9, 2021 · ac4cc7f · ac4cc7f
1 parent f26304a
commit ac4cc7f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 23 deletions.
diff --git a/packages/taro-mini-runner/src/plugins/MiniPlugin.ts b/packages/taro-mini-runner/src/plugins/MiniPlugin.ts
@@ -647,7 +647,10 @@ export default class TaroMiniPlugin {
     }
     this.pages.forEach(item => {
       if (item.isNative) {
-        this.addEntry(item.path, item.name, META_TYPE.NORMAL)
+        // 快应用的模版和js逻辑在同一个文件里
+        if (!this.options.isBuildQuickapp) {
+          this.addEntry(item.path, item.name, META_TYPE.NORMAL)
+        }
         if (item.stylePath && fs.existsSync(item.stylePath)) {
           this.addEntry(item.stylePath, this.getStylePath(item.name), META_TYPE.NORMAL)
         }
@@ -660,7 +663,10 @@ export default class TaroMiniPlugin {
     })
     this.components.forEach(item => {
       if (item.isNative) {
-        this.addEntry(item.path, item.name, META_TYPE.NORMAL)
+        // 快应用的模版和js逻辑在同一个文件里
+        if (!this.options.isBuildQuickapp) {
+          this.addEntry(item.path, item.name, META_TYPE.NORMAL)
+        }
         if (item.stylePath && fs.existsSync(item.stylePath)) {
           this.addEntry(item.stylePath, this.getStylePath(item.name), META_TYPE.NORMAL)
         }
@@ -929,9 +935,8 @@ export default class TaroMiniPlugin {
     } else {
       // 生成base和custom-wrapper相关文件，快应用不需要这一步
       if (!this.options.blended && !isBuildPlugin) {
-        const appConfigPath = this.getConfigFilePath(this.appEntry)
-        const appConfigName = path.basename(appConfigPath).replace(path.extname(appConfigPath), '')
-        this.generateConfigFile(compilation, this.appEntry, this.filesConfig[appConfigName].content)
+        const appName = path.basename(this.appEntry).replace(path.extname(this.appEntry), '')
+        this.generateConfigFile(compilation, this.appEntry, this.filesConfig[appName].content)
       }
       if (!template.isSupportRecursive) {
         // 如微信、QQ 不支持递归模版的小程序，需要使用自定义组件协助递归
@@ -989,7 +994,7 @@ export default class TaroMiniPlugin {
     this.components.forEach(component => {
       const importBaseTemplatePath = promoteRelativePath(path.relative(component.path, path.join(sourceDir, this.getTemplatePath(baseTemplateName))))
       const config = this.filesConfig[this.getConfigFilePath(component.name)]
-      if (config) {
+      if (config && !this.options.isBuildQuickapp) {
         this.generateConfigFile(compilation, component.path, config.content)
       }
       if (!component.isNative) {
@@ -1007,7 +1012,7 @@ export default class TaroMiniPlugin {
           independentName = name
         }
       })
-      if (config) {
+      if (config && !this.options.isBuildQuickapp) {
         let importBaseCompPath = promoteRelativePath(path.relative(page.path, path.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(baseCompName, isBuildPlugin), ''))))
         let importCustomWrapperPath = promoteRelativePath(path.relative(page.path, path.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), ''))))
         if (isIndependent) {
@@ -1080,6 +1085,13 @@ export default class TaroMiniPlugin {
     const fileScriptName = this.getScriptPath(componentName)
     const fileStyleName = this.getStylePath(componentName)
 
+    // 处理usingComponents
+    const usingComponents = this.filesConfig[this.getConfigFilePath(componentName)]?.content.usingComponents ?? {}
+    templStr = Object.keys(usingComponents).map(name => {
+      const path = usingComponents[name]
+      return `<import name="${name}" src="${path}"></import>`
+    }).join('\n') + templStr
+
     let baseTemplInfo: {
       fileTemplName: string,
       templStr: string
@@ -1149,10 +1161,6 @@ ${this.getCommonStyleAssets(compilation).map(assetName => {
   }
 
   generateConfigFile (compilation: webpack.compilation.Compilation, filePath: string, config: Config & { component?: boolean }) {
-    if (this.options.isBuildQuickapp) {
-      return
-    }
-
     const fileConfigName = this.getConfigPath(this.getComponentName(filePath))
     const unOfficalConfigs = ['enableShareAppMessage', 'enableShareTimeline', 'components']
     unOfficalConfigs.forEach(item => {

diff --git a/packages/taro-mini-runner/src/webpack/chain.ts b/packages/taro-mini-runner/src/webpack/chain.ts
@@ -400,6 +400,20 @@ export const getModule = (appPath: string, {
     scriptRule.exclude = [filename => /node_modules/.test(filename) && !(/taro/.test(filename))]
   }
 
+  const templateRule: IRule = {
+    use: [getFileLoader([{
+      useRelativePath: true,
+      name: `[path][name]${fileType.templ}`,
+      context: sourceDir
+    }])]
+  }
+  if (isBuildQuickapp) {
+    templateRule.test = /\.ux(\?.*)?$/
+  } else {
+    templateRule.test = REG_TEMPLATE
+    templateRule.use.push(miniTemplateLoader)
+  }
+
   const rule: Record<string, IRule> = {
     sass: {
       test: REG_SASS_SASS,
@@ -422,14 +436,7 @@ export const getModule = (appPath: string, {
       oneOf: cssLoaders
     },
     script: scriptRule,
-    template: {
-      test: REG_TEMPLATE,
-      use: [getFileLoader([{
-        useRelativePath: true,
-        name: `[path][name]${fileType.templ}`,
-        context: sourceDir
-      }]), miniTemplateLoader]
-    },
+    template: templateRule,
     media: {
       test: REG_MEDIA,
       use: {

diff --git a/packages/taro-quickapp/src/template.ts b/packages/taro-quickapp/src/template.ts
@@ -1,4 +1,4 @@
-import { ComponentConfig, Attributes, UnRecursiveTemplate } from '@tarojs/shared'
+import { ComponentConfig, Attributes, UnRecursiveTemplate, toKebabCase, toCamelCase } from '@tarojs/shared'
 import { components as internalComponents } from './components'
 
 export class Template extends UnRecursiveTemplate {
@@ -32,7 +32,7 @@ export class Template extends UnRecursiveTemplate {
     }
   }
 
-  private buildCompTempl (mergedAttributes: Attributes) {
+  private buildCompTempl (mergedAttributes: Attributes, componentConfig: ComponentConfig) {
     const Adapter = this.Adapter
 
     // 给文本标签用
@@ -41,14 +41,27 @@ export class Template extends UnRecursiveTemplate {
     }
 
     const buildAttributesStr = (iName: string) => {
-      return Object.keys(mergedAttributes)
+      const baseAttrStr = Object.keys(mergedAttributes)
         .map(k => {
           if (k === 'value') {
             return `${k}="{{${iName}.v || (${mergedAttributes[k].replace(/i\./g, `${iName}.`)})}}"`
           }
           return `${k}="${k.startsWith('bind') || k.startsWith('on') || k.startsWith('catch') ? mergedAttributes[k] : `{{${mergedAttributes[k].replace(/i\./g, `${iName}.`)}}}`}"`
         })
         .join(' ')
+      let thirdAttrStr = ''
+      componentConfig.thirdPartyComponents.forEach(v => {
+        v.forEach(attr => {
+          if (attr.startsWith('on')) {
+            // 自定义事件取不到id，直接忽略
+            // const value = attr.slice(2).toLowerCase()
+            // thirdAttrStr += `on${value}="eh" `
+          } else {
+            thirdAttrStr += `${toKebabCase(attr)}="{{${iName}.${toCamelCase(attr)}}}" `
+          }
+        })
+      })
+      return baseAttrStr + ' ' + thirdAttrStr
     }
 
     let templ = ''
@@ -90,7 +103,7 @@ export class Template extends UnRecursiveTemplate {
     const template = `
 <import name="base" src="./base"></import>
 <template>
-${this.buildCompTempl(mergedAttributes)}
+${this.buildCompTempl(mergedAttributes, componentConfig)}
 </template>
 `