记录微信原生小程序迁移为字节小程序

最新推荐文章于 2024-05-15 19:43:10 发布

十个美梦盖过天空

最新推荐文章于 2024-05-15 19:43:10 发布

阅读量2.1k

点赞数 4

文章标签：小程序微信微信小程序

本文链接：https://blog.csdn.net/m0_60835161/article/details/121556785

版权

项目场景：

之前接到一个项目，是一个微信小程序原生开发，后来甲方提出需求，就是能不能把微信小程序的内容再发布到抖音、头条上面去。所以最快的方法就是直接将微信原生小程序迁移到字节小程序。

实现方案：

之前微信小程序是采用原生+ vant-webapp(@1.6.8)开发的，在这种前提下。考虑了三种迁移方案。

方案一:使用字节小程序官方开发工具内置的迁移方法。

通过百度查询，这种方案应该是目前使用最多的方法。基本原理就是将微信的API前缀WX替换为字节小程序的前缀TT，简单粗暴，但是有很多API是不兼容的，需要自己手动修改代码。

参考地址:字节小程序官方迁移

方案二:使用Taro转换。

这种方法是先将原生微信小程序转为Taro,然后再将Taro打包为字节小程序。这样相比方案一就多了一个环节，环节越多，出现的问题相对来说就要多一点。所以在转换过程中，要先解决微信小程序转换为Taro时候的报错，不然在编译为字节小程序时会失败，其次，在转为字节小程序之后，依然会有一些报错。也是需要我们去解决的。

参考地址：微信小程序迁移Taro

方案三：使用Antmove。

这个方法和方案一流程类似，是直接将原生微信小程序代码转为目标平台小程序代码。但是和方案一的区别是不是粗暴的去替换API前缀，官方的说法是这样的：

Antmove转换小程序大致分为三个阶段，分别为转换前、转换中和转换后
转换前，Antmove对小程序做了预处理，包括判断小程序的平台、使用者配置的开发环境、判断转换的完整小程序还是组件维度等。
转换中，Antmove对模版，样式，Json，Js等文件进行处理，以达到跨平台开发的目的。
转换后，在转换后的文件中生成_antmove文件，该文件中包含对API、组件、生命周期的差异支持和抹平。

参考地址:Antmove官方文档

方案总结：

上述三种方案我都分别去尝试过，三种方案的优缺点在上面已经说明。方案二相对来说过于繁琐，优先放弃。方案三中微信转字节的插件是beat版本，也没有采用。所以最终还是采用了方案一，但是，最终的转换代码并不是用方案一的插件产出的，我在github上找到一个其他开发者编写的转换工具产出的。转换原理类似，只是针对于我的项目来说，转换后的代码报错相对来说要少一点。

转换后的报错总结：

Tips：以下总结的问题/报错是针对我自己的项目总结出来的，所以具体情况具体分析。

关于nextTick报错。
vant的吸顶效果无效。
组件关系Api。
待续...

解决方案：

针对问题1，在社区查询了一下，发现很早之前有人反馈过这个问题，官方只记录了并说后续会支持，另一种官方解决方案是setData({},callback)的回调方法里面进行nextTick的相关操作。这样的方式并不适合我的项目场景。最终将nextTick改写为setTimeout来解决，达到了预期效果。

迁移后代码为：

// vant sticky组件 index.js代码片段

setDataAfterDiff: function (data) {
      var _this = this;
       tt.nextTick(function () {
          var diff = Object.keys(data).reduce(function (prev, key) {
            if (data[key] !== _this.data[key]) {
              prev[key] = data[key];
            }
            return prev;
          }, {});
          if (Object.keys(diff).length > 0) {
            _this.setData(diff);
          }
          _this.$emit('scroll', {
            scrollTop: _this.scrollTop,
            isFixed: data.fixed || _this.data.fixed,
          });
      });
    },

修改后代码为:

    setDataAfterDiff: function (data) {
      var _this = this;
        setTimeout(function(){
          var diff = Object.keys(data).reduce(function (prev, key) {
            if (data[key] !== _this.data[key]) {
              prev[key] = data[key];
            }
            return prev;
          }, {});
          if (Object.keys(diff).length > 0) {
            _this.setData(diff);
          }
          _this.$emit('scroll', {
            scrollTop: _this.scrollTop,
            isFixed: data.fixed || _this.data.fixed,
          });
        },50)
    },

针对问题2，项目中使用了vant的sticky组件，转换为字节后，没有达到预期效果，经过调试排查，发现只有页面初始化之后，监听页面滚动的事件执行了一次。后续页面滚动并没有持续打印。后面尝试在需要监听页面的js文件中加上了onPageScroll()，达到了预期效果。

针对问题3，vant库中会存在一些组件嵌套关系。如grid和grid-item、tabs和tab...在使用了这些组件地方，都会调用vant开发者封装的一个公共js文件relation.js。这里面有用到一个api是getRelationNodes()。一开始我以为报错是因为字节不支持这个api，查阅官方文档后，确实是有这个api的。不同点微信小程序中，这个api是同步返回值的，在字节小程序中，这个api是异步返回值的。因此，需要把这块代码改造一下。

迁移后代码为：

 // vant relation.js 代码片段
Object.defineProperty(this, 'parent', {
     get: function () {
          return _this.getRelationNodes(path)[0];
      },
 });

修改后代码为：

 Object.defineProperty(this, 'parent', {
     get: function () {
        return new Promise( n => _this.getRelationNodes(path,(t) => { 
            n(t); 
         })
    );
  },
});

2021.12.14更新：

之前提到过字节在获取组件间关系时是异步返回值的，在改造代码后，运行代码并不能触发组件的relations.linked 钩子(不知道是否和改造的代码有关系)。社区发帖无果，果断使用了uniapp重构了代码。其实将原生微信小程序转为uniapp也挺快的，将微信小程序语法转为Vue语法。其次就是替换"wx."前缀为"uni."。几乎是无痛转换，可能是我目前的项目功能相对简单，而且只运行在微信小程序平台和字节小程序平台。