微信原生小程序转其他平台的小程序实践(中)

简介: 如何将现有的微信原生小程序转其他平台的小程序?我想如果打算做这么一件事,或许大多数同学和我一样可能没什么思路。我第一次听说是在一次小程序生态技术大会上,一公司的一位前端技术人员谈到他们公司主要是将自己的微信小程序通过团队开发的工具转成其他平台的小程序,所以当时我也很想了解这个工具是怎么做的,实现过程是什么?

2、在 运行时 阶段又做了哪些事情呢?...


主要在每个js文件头部加入了适配代码adaptor.js


截取部分实现代码如下: 源代码可参考converter.js


function convert(opt = {}) {
  const src = opt.source || './src';
  const dest = opt.target || './alibaba';
  const assets = opt.assets || config.getAssets(src);
  ...省略
  // 注入适配器代码
  gulp.src(sysPath.resolve(__dirname, '../../../node_modules/mp-adaptor/lib/alibaba.js'))
    .pipe(rename('adaptor.js'))
    .pipe(gulp.dest(dest)).on('end', () => {
      logger.info('复制 adaptor.js 完成!');
    });
  // 处理脚本文件
  gulp.src(`${src}/**/*.js`)
    .pipe(replace(/[\s\S]*/g, (match) => converter.script(match)))
    .pipe(through2.obj(function(file, enc, cb) {
      const path = file.history[0].replace(file.base, '');
      const spec = path.split(sysPath.sep);
      const adaptor = new Array(spec.length - 1).fill('..').concat('adaptor.js').join('/');
      const str = [
        `import wx from '${adaptor.replace(/^\.\./, '.')}';`,
        ab2str(file.contents)
      ].join('\r\n');
      file.contents = str2ab(str);
      this.push(file);
      cb();
    }))
    .pipe(gulp.dest(dest));
}
module.exports = convert;


加入的adapter.js 代码是什么样的呢?  参考源码alibaba.js


function getInstance() {
  // eslint-disable-next-line no-undef
  const wx = my;
  wx.has_ali_hook_flag = true;
  const {
    getSystemInfo
  } = wx;
  wx.getSystemInfo = function(opt) {
    ...省略
    return getSystemInfo.call(this, opt);
  };
  ...省略
  return wx;
}
export default getInstance();
上面的适配代码:主要就是包装抹平微信与支付宝两个平台间api的调用差异,既可以使用原微信wx.*的方式来调用,也可以使用支付宝小程序平台my.*的方式来调用api,说白了就是对微信的api包装了一层。


通过分析 wwto 这个工具库的实现过程,也就学习到了如何基于现有的微信小程序转其他平台小程序的实现过程了。下面说下这次转换的过程中遇到了那些问题以及怎么解决的。


微信小程序代码转换阶段-实践


转换的时候遇见这么一些问题:


首先,wwto工具做不到运行时 diff 的抹平,也做不到一个 API 从无到有的过程


1、现阶段我们的微信小程序依赖 vantUI 组件库,使用wwto来转换压根就不支持


2、微信小程序中常用的api:selectComponent 在支付宝里小程序里面不支持


3、微信的分包加载是否支持?不支持又该如何处理等?


对于第二个问题,需要修改 wwto 工具库的代码,使其支持这个api,我这边的实现思路如下: 如Page A 页面依赖 Component B组件,可以在B组件的ready生命周期阶段把当前组件实例this挂载到全局对象getApp()中的某个属性上,然后在Page A中实现selectComponent这个api,这个api就来获取挂载到getApp()上对应的实例组件。


修改处在script.js代码中,可以打开文件比对 如下:



对于第三个问题,通过了解支付宝的分包机制文档,完全可以支持微信小程序的,但是,这里我在调试的时候支付宝开发者工具和到真机预览的时,两者差异完全不一样,在开发者工具完全运行正常,可是在真机预览的时候会遇见各种奇葩问题,大部分都是adaptor.js 重写wx.* 的api导致的问题,通过调试了好长时间,终于找到了问题的根源所在,我已经在githup上 向wwto 开源者提issue了,可查看adaptor.js 重复执行 了解,并且我已提交了PR进行了修正


对于第二个大问题,做的事就相对比较多了,如果在不了解wwto这个工具库代码实现思路情况下,可能是无法解决的,当时能想到的解决办法就是,仿照vantUI组件库的代码实现,重新采用微信自定义组件的形式重写,但是这样做工作量又上去了,比起使用uni-app来,这个不可行,工作量也好大呀!这个时候,我几乎又要放弃使用这个工具来转换了。那这里能不能换别的思路去解决呢?答案肯定是有的,前提就是了解wwto工具的代码实现过程以及思路:wwto是在转换的时候,通过修改原微信小程序的文件,那么我就能够仿照其思想在小程序运行时添加兼容的代码来让vantUI微信小程序组件库能够跑在支付宝小程序中,听起来是多么一件有趣的事


如何去做呢?通过查看了vantUI组件库的代码实现,是可以按这种思路实现的,大致需要修改组件库中两处代码


1、源代码basic.js 修改如下,主要是解决微信小程序triggerEvent api的功能,获取组件实例


let Behavior = p => p
export const basic = Behavior({
    methods: {
        $emit(...args) { 
          let name = args[0];
          let onPropsfn = this.props['on' + name[0].toUpperCase() + name.substring(1)];
          // 可以正则匹配 data-*值 ['datadata-mm', 'data-', 'data-1'].filter(v => v.match(/^data-\w+/))
          let index = this.data && this.data['data-index'];
          if (onPropsfn) {
            if (args.length == 1) {
              onPropsfn({detail: undefined})
            } else if (args.length == 2) {
              onPropsfn({detail: args[1], currentTarget:{dataset: {index: index}}})
            } else if (args.length >= 3) {
              onPropsfn.apply(this, args);
            }
          }
          // this.triggerEvent(...args);
        },
      ... 省略
    }
});
添加的代码实现:都是参考wwto实现的思路


2、源代码component.js 修改如下,主要是解决微信小程序中一系特性功能如:

externalClasses、properties、behaviors => 模拟到支付宝小程序中,如果有兴趣可以比对添加的代码,如何抹平这些特性差异,其中微信的relations组件特性,没法模拟,替代方案就只能用支付宝小程序相关组件了


目录
打赏
0
0
0
0
1
分享
相关文章
微信基于 StarRocks 的实时因果推断实践
本文介绍了因果推断在业务中的应用,详细阐述了基于 StarRocks 构建因果推断分析工具的技术方案,通过高效算子的支持,大幅提升了计算效率。例如,t 检验在 6亿行数据上的执行时间仅需 1 秒。StarRocks 还实现了实时数据整合,支持多种数据源(如 Iceberg 和 Hive)的无缝访问,进一步增强了平台的灵活性与应用价值。
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
LangBot 是一个开源的多模态即时聊天机器人平台,支持多种即时通信平台和大语言模型,具备多模态交互、插件扩展和Web管理面板等功能。
612 14
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2964 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
1164 7
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
47 3
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
1017 1
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
406 12
社交软件红包技术解密(六):微信红包系统的存储层架构演进实践
微信红包本质是小额资金在用户帐户流转,有发、抢、拆三大步骤。在这个过程中对事务有高要求,所以订单最终要基于传统的RDBMS,这方面是它的强项,最终订单的存储使用互联网行业最通用的MySQL数据库。支持事务、成熟稳定,我们的团队在MySQL上有长期技术积累。但是传统数据库的扩展性有局限,需要通过架构解决。
80 18
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
79 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等