【附源码】微信原生开放标签不好用？使用Rollup与Web Components撸个更好的！

微信提供了 wx-open-launch-weapp、wx-open-launch-app 两个开放标签，支持在微信公众号页面上跳转到小程序或绑定了的 app，这为 h5 页面引流提供新的手段。比起过往的一些方式，开放标签更为方便直接。特别是 wx-open-launch-weapp，在微信朋友圈对小程序不友好的今天，朋友圈 h5 拉起小程序也算一种曲线救国的手段。但由于一些原因，这些标签在使用的过程中多少有些让人不愉快。

网页拉起微信小程序

开放标签的那些坑

以 wx-open-launch-weapp^[1] 为例来说

• 样式问题比较严重，如项目中的样式无法影响到 template 中的节点，需要将样式用 style 标签或内联的方式写到 template 中；标签无法自适应宽高，js 监听节点变化后修改步骤繁琐；标签必须有内容才能正常触发等等。

• 后续其他平台跟进的话会有多种逻辑类似的标签存在，有一定的维护管理成本。

• 开发体验不好，使用特殊写法可以使用但不符合正常的编写习惯，如不使用标签嵌套，而是让开放标签直接浮动在内容之上。但这样的方式需要每个使用到的节点都需要注意嵌套关心、样式、事件等等。

• 流行框架的支持需要对修改模版标签。如果同时有多个框架打算用的话会有复用上的烦恼。

在对着网络一顿搜索后发现，现在在网上的各种文章中对于开放标签的解决方案大多集中在使用标签的前置条件跟开发框架的简单结合上，基本上都没有解决样式、复用性、开发体验上的问题。

鉴于有上面的总总问题，为了 保住发际线 保持良好的开发体验，需要尽量填平这些坑。解决开发体验虽然可以通过在所选技术框架的模块化机制封装开放标签，但由于上面提到的这个方案会受限于技术框架，只能在同框架中使用。在一番斟酌后决定使用 Web Components^[2] 来做模块封装，用 rollup.js^[4] 来处理多个环境中使用的问题。

选择 Web Components^[2] 主要有以下的原因：

• 由浏览器支持，不受技术框架限制。

• 生命周期支持。

• 可以有效隔离内外部逻辑。

• 支持正常的标签嵌套写法。

• 轻量。

rollup^[4] 是一个构建工具，不但支持打包成 ES Module 也支持打包成其他解决方案的模块（如 CommonJS）。相比起 webpack ，rollup 在做通用模块、类库上更为简单易用。我们使用 rollup 来让模块可以在多个技术环境中使用，支持多种加载模式，并且在开发过程中放心使用各种新特性。

关于开放标签使用的前置条件请到模块仓库查阅 README.md 中的相关事项或查看官方文档

提示 为了节省篇幅，本文在代码部分做了一些简略用了一些注释替代，具体的代码请到模块仓库查看。仓库地址于文章末尾附上。

基础工程搭建

对于 rollup 工程来说，一般是使用 rollup.config.js 文件来配置工程。rollup 会根据返回的配置数量来决定输出什么类型的模块。我们需要支持 CommonJS 方案，直接加载方案及 ES Module 方案，因此需要配置三个方案配置文件，并根据方案调整配置。

主要依赖模块与基础配置字段

rollup 跟其他的构建工具一样，需要定义输入与输出，并通过各种 plugin 来实现各种功能的支持。在我们这个场景，入口文件都是同一个，通过不同的配置让 rollup 输出成不同的模式。

• input 入口文件配置，可以是一个或多个文件。

• output 输出配置，这里的配置决定了最后会输出什么内容。主要是由输出配置中的 format 字段决定。

• plugins 类型配置中用到的插件。

const isProduction = process.env.NODE_ENV === "production";
const cwd = __dirname;

// 入口文件
const input = join(cwd, "src/index.ts");

// 基本的配置