背景

大家好，我是 uni-app 的核心开发 笨笨狗吞噬者。本篇是 uni-app 源码分析的第二篇文章，欢迎关注！

不少开发者都遇到过某些小程序原生组件在原生项目能跑，但是写到 uni-app 中就用不了，今天来分析下背后的原因以及原理，以后再遇到类似的问题，你也可以给 uni-app 仓库提 pr。

问题

我们以微信小程序的 official-account-publish 组件为例，看下错误的产物和正确的产物都是什么样的，

测试代码

<template>
<official-account-publish1
topic="和coco一起做好事"
  ></official-account-publish1>
</template>

错误产物

<official-account-publish
wx:if="{{d}}"
u-i="1d1772a4-1"
bind:__l="__l"
u-p="{{d}}"
></official-account-publish>

正确产物

<official-account-publishtopic="和coco一起做好事"></official-account-publish>

可以看到错误的产物上面多了不少属性，比如 u-i， u-p，而正常产物是没有这些的

原理

其实这个差异的核心，不在于 official-account-publish 组件本身，而在于编译阶段它有没有命中小程序的 isCustomElement

uni-app 在编译小程序模板时，会先给当前平台准备一份原生组件名单。这个名单通常就在对应平台包的 compiler/options 里维护，比如微信小程序这一份就放在平台编译配置里 https://github.com/dcloudio/uni-app/blob/uni-app-vue3-dev/packages/uni-mp-weixin/src/compiler/options.ts#L24。

也就是说，编译器遇到一个标签时，并不是简单看它长得像不像组件，而是先看它在不在这份名单里

如果命中了，说明它是小程序原生组件，那就按原生标签处理，模板产物会尽量保留原样，像 topic 这类属性也会直接落到最终产物里，不会额外补组件运行时需要的标记

如果没有命中，编译器就会把它当成普通 vue 组件继续处理。这时候就会进入组件那套编译分支，给节点补上 u-i、u-p、bind:__l 这一类运行时字段，用来做组件实例关联、props 同步这些事情，所以最终产物看起来就不像原生组件了

所以这个问题本质上就是：official-account-publish 应该走小程序 isCustomElement 分支，而不是走 vue 组件分支。一旦判断错了，生成结果就会立刻不一样

这类问题的修复思路通常也很直接，如果某个小程序原生组件没有被正确识别，除了补平台内置名单，更常见的做法就是在项目配置里把它加到 nativeTags，让编译器把它当成原生标签处理

比如：

// manifest.json
{
"mp-weixin": {
"nativeTags": ["official-account-publish"]
  }
}

加完之后，这个标签就会进入 isCustomElement 的判断范围，编译时不再走 vue 组件分支，生成结果也就会回到小程序原生组件该有的样子