uni-app 编译小程序原生组件时疑似丢属性，可以给官方提 PR 了

前言

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

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

html 复制代码

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

html 复制代码

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

html 复制代码

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

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

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

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

除此之外，项目侧还可以通过 manifest.json 里的 nativeTags 再补一份，最后一起参与 isCustomElement 判断

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

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

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

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

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

比如：

json 复制代码

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

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

我建了一个微信群（非官方），大家可以在群里和我沟通交流 uniapp 开发遇到的问题、uniapp 的源码等问题。