半自动化迁移方案

<aside> 💡 ☑️ 表示已完成， 🤖 表示自动迁移 🚧 表示正在迁移中 🤚 需要手动修复或重构

</aside>

• ☑️🤖 页面包裹 @WKPage

  • 通过获取 app.js 页面配置，遍历页面，为页面组件添加 WKPage。
  • WKPage 在 h5 端会实现导航栏、抹平某些生命周期差异、另外也方面后续统一埋点和注入逻辑

  工具： Babel

• ☑️🤖 组件包裹 @WKComponent

  • 实现 componentDidShow、componentDidHide
  • 默认关闭样式隔离
  • 和 @WKPage 一样抹平某些生命周期差异、另外也方面后续统一埋点和注入逻辑

  工具：Babel

• 样式隔离与样式兼容

  因为微信小程序样式默认是隔离的，所以改造相对来说比较容易和安全。在 H5 端，样式隔离的临时性是添加一个类命名空间。将该组件的其他CSS规则都放在该命名空间下，确保不污染其他组件。

  但是这个方案也不是万无一失，它可以避免兄弟之间的样式污染，但是子孙之间还是可能出现样式污染问题。这个只能后续手动测试和重构了。

  迁移步骤：

  1. ☑️🤖🤚 样式表引用分析。如果样式表被多个组件引用，该样式表无法安全地添加命名空间。 需要手动进行适配

     多次被引用的样式表应该考虑提取到全局或重构

  2. ☑️🤖🤚 样式内 @import 处理。

     样式内 @import 样式会导致代码重复。这里应该考虑重构

  3. ☑️🤖🤚 组件包含多个样式表，且样式表没有被其他模块导入，建议合并

  4. ☑️🤖 命名空间化

     • 忽略已经关闭隔离的组件。这类组件已经暴露在全局，不需要处理
     • 忽略白名单。例如 WXParse 这些特殊的第三方组件。
     • 忽略已经 BEM 改造的组件，这些组件文件头部需要添加 // @BEM 注释
     • 忽略已经添加命名空间的组件，这些组件文件头部添加了 // @scoped 注释
     • 忽略 CSS Module。这些样式表以 *.module.css 为扩展名

     1. 命名空间化

        • 在组件根节点添加命名空间。例如:

          // @scoped
          function Foo(props) {
            return (<View data-scoped="sc-pdi-foo" className="sc-pdi-foo">
              <View className="title">{props.title}</View>
             {props.children}
            </View>)
          } 
          

        • 样式表的所有样式规则都放在命名空间下. 例如：

          /**
           * @scoped
           */
          .sc-pdi-foo {
            /*...*/
            .title {/*...*/}
          }
          

  5. ☑️ WKComponent 关闭样式隔离。保证各种样式行为统一

  6. ☑️🤖 externalClasses 处理。

     • 开启 externalClasses 的组件，需要将对应的 class 转换为 this.props.{驼峰式 class}
     • 对于引用了externalClasses 的组件，需要将对应的 props 改为 驼峰式

  7. ☑️🤖 将所有字符串形式的 style 属性，使用 _safe_style_ 包裹，这个函数在运行时转换为对象。 后续手动重构

  8. 🚧 样式单位。禁止使用非标准的单位，例如 rpx、rem。应该使用 px 由 Taro 来转换为合适的平台单位

  9. 不允许使用标签选择器，比如 image、page 在H5端不支持

  10. page 选择器迁移，在H5和RN 不支持page 选择器

      组件中禁止使用 page 因为无法确定优先级, 多个组件间会互相干扰，应该通过页面组件根节点来设置页面样式

  工具：Babel，PostCSS

• API

  • ☑️🤖🤚 统一以 wxApi 属性的方式调用，方便进行统一的代理。
  • 🤚create*Context 迁移

  工具：Babel