devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-03-23 23:37:49

赞

踩

微信小程序转换为快手小程序

背景

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

恰好近期有这么一次需求要将现有的微信小程序上开发别家的小程序，这个事要么通过现在比较好的方案uni-app来做，要么就用对应的原生小程序来写。但是从零开始做，工作量实在太大了，周期好长呀，那么多页面，得搞到啥时候。就在决定开始调研uni-app来做的时候，恰好有一天在微信上看见了一篇技术文章：开源｜wwto：小程序跨端迁移解决方案——微信转其他小程序 最后放弃了使用uni-app来做，尝试通过这个工具来转换。

下面也将围绕 wwto 这个工具库，通过将我们现有的微信小程序转支付宝小程序来了解其转换原理，同时呢会说下在转换的过程中遇到的各种问题是如何解决的，希望对有需要的同学能有所帮助。

wwto架构图

在了解 wwto 这个工具库后，它大致的架构是这样的，下面这张图是使用作者的，更权威一点。

通过了解 编译 以及 运行时 这两个模块的实现过程就能够明白小程序转换的过程中做些事情以及怎么去做的了。

下面对这两个阶段所做的事简单说下： 

编译阶段

在 编译 阶段主要对4个文件做了处理，分别是：*.js、 *.json、 *.wxml、 *wxss。

*.wxml 的处理

部分代码如下，可看源码wxml.js

  1. function convert(wxmlText, isWpy) {
  2.   return wxmlText
  3.     .replace(/wx:/g, 'a:')
  4.     .replace(/a:for-items/g, 'a:for')
  5.     .replace(/a:for-key/g, 'a:key')
  6.     //  data-set 全部转为小写
  7.     .replace(/data-[^=\s]=/g, (match) => match.toLocaleLowerCase())
  8.     // // s:for-index="{{idx}}" -> s:for-index="idx"
  9.     .replace(/a:for-index=['"]({{\w+}})['"]/ig, (match) => match.replace('{{', '').replace('}}', ''))
  10.     // 自定义组件命名不能用驼峰
  11.     .replace(/<[\w]+/ig, (match) => {
  12.       return isWpy ? match : match.replace(/[A-Z]/g, (m) => ['-', m.toLowerCase()].join(''));
  13.     })
  14.     // 事件绑定名称对齐
  15.     .replace(/\s+catch[\w]+=['"]/ig, (match) => match.replace(/catchsubmit/ig, 'onSubmit')
  16.       .replace(/catch(\w)/g, (m, p1) => ['catch', p1.toUpperCase()].join('')));
  17.       
  18.     ... 省略
  19. }
  20.  
  21.  
  22. module.exports = convert;

通过对文件的处理例如：

<view bind:cellTap='onTabMyCrad' wx:if="{{hasJoin}}">...</view> 
‍ 
变成了
<view onCellTap='onTabMyCrad' a:if="{{hasJoin}}">...</view>

也就是把微信的语法转换为目标小程序的语法结构。

*.js 的处理

部分代码如下，源代码script.js

  1. function convert(jsText, isWpy) {
  2.   return jsText
  3.     .replace(/(require\(['"])(\w+)/g, '$1./$2')
  4.     .replace(/(from\s+['"])(\w+)/g, (match, p1) => {
  5.       // 相对路径以./开头
  6.       return match.replace(p1, [p1, isWpy ? '' : './'].join(''));
  7.     })
  8.     .replace(/\.properties/g, (match) => {
  9.       return match.replace('.properties', '.props');
  10.     })
  11.     .replace(/Component\([\s\S]+methods:[^{]*{/, (match) => {
  12.       return [
  13.         match,
  14.         `,\r\ntriggerEvent: function(name, opt) {
  15.             this.props['on' + name[0].toUpperCase() + name.substring(1)]({detail:opt});
  16.           },\r\n`
  17.       ].join('');
  18.     })
  19.     .replace(/[\s\S]+/, (match) => {
  20.       // 只处理组件
  21.       if (!match.match(/Component\(/)) return match;
  22.       
  23.       ... 省略
  24.     });
  25. }
  26.  
  27.  
  28. module.exports = convert;

通过对组件的处理如图：

这么转换的目的也就是原文 开源｜wwto：小程序跨端迁移解决方案——微信转其他小程序 提到的 ：

支付宝小程序组件的生命周期函数与微信小程序完全不一样，也没有一一对应的关系。这种情况无法使用简单的方法名正则替换，本方案是注入支付宝小程序组件的生命周期函数，在这些生命周期函数中在调用微信小程序的生命周期函数，这样一来就避免了方法名替换无法一一对应的问题，也能更方便地书写适配代码。

对 *.json 以及 *wxss 的处理就不列出代码了，可看源码：json.js 、wxss.js。

讲完了编译阶段的处理，我们在看一下 运行时 阶段又做了哪些事情。

运行时

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

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

  1. function convert(opt = {}) {
  2.   const src = opt.source || './src';
  3.   const dest = opt.target || './alibaba';
  4.   const assets = opt.assets || config.getAssets(src);
  5.   
  6.   ...省略
  7.   // 注入适配器代码
  8.   gulp.src(sysPath.resolve(__dirname, '../../../node_modules/mp-adaptor/lib/alibaba.js'))
  9.     .pipe(rename('adaptor.js'))
  10.     .pipe(gulp.dest(dest)).on('end', () => {
  11.       logger.info('复制 adaptor.js 完成！');
  12.     });
  13.  
  14.  
  15.   // 处理脚本文件
  16.   gulp.src(`${src}/**/*.js`)
  17.     .pipe(replace(/[\s\S]*/g, (match) => converter.script(match)))
  18.     .pipe(through2.obj(function(file, enc, cb) {
  19.       const path = file.history[0].replace(file.base, '');
  20.       const spec = path.split(sysPath.sep);
  21.       const adaptor = new Array(spec.length - 1).fill('..').concat('adaptor.js').join('/');
  22.       const str = [
  23.         `import wx from '${adaptor.replace(/^\.\./, '.')}';`,
  24.         ab2str(file.contents)
  25.       ].join('\r\n');
  26.       file.contents = str2ab(str);
  27.  
  28.  
  29.       this.push(file);
  30.       cb();
  31.     }))
  32.     .pipe(gulp.dest(dest));
  33. }
  34.  
  35.  
  36. module.exports = convert;

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

  1. function getInstance() {
  2.   // eslint-disable-next-line no-undef
  3.   const wx = my;
  4.   wx.has_ali_hook_flag = true;
  5.   
  6.   const {
  7.     getSystemInfo
  8.   } = wx;
  9.   wx.getSystemInfo = function(opt) {
  10.     ...省略
  11.     return getSystemInfo.call(this, opt);
  12.   };
  13.   ...省略
  14.   return wx;
  15. }
  16.  
  17.  
  18. export default getInstance();
  1.  
  2. 上面的适配代码：主要就是包装抹平微信与支付宝两个平台间api的调用差异，既可以使用原微信wx.*的方式来调用，也可以使用支付宝小程序平台my.*的方式来调用api，说白了就是对微信的
  1. api包装了一层。
  2.

通过分析 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导致的问题，通过调试了好长时间，终于找到了问题的根源所在，我已经在github上 向wwto 开源者提issue了，可查看adaptor.js 重复执行 了解，并且我已提交了PR进行了修正。

对于第一个大问题，做的事就相对比较多了，如果在不了解wwto这个工具库代码实现思路情况下，可能是无法解决的，当时能想到的解决办法就是，仿照vantUI组件库的代码实现，重新采用微信自定义组件的形式重写，但是这样做工作量又上去了，比起使用uni-app来，这个不可行，工作量也好大呀！这个时候，我几乎又要放弃使用这个工具来转换了。

那这里能不能换别的思路去解决呢？答案肯定是有的，前提就是了解wwto工具的代码实现过程以及思路：wwto是在转换的时候，通过修改原微信小程序的文件，那么我就能够仿照其思想在小程序运行时添加兼容的代码来让vantUI微信小程序组件库能够跑在支付宝小程序中，听起来是多么一件有趣的事。

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

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

  1. let Behavior = p => p
  2. export const basic = Behavior({
  3.     methods: {
  4.         $emit(...args) {
  5.           let name = args[0];
  6.           let onPropsfn = this.props['on' + name[0].toUpperCase() + name.substring(1)];
  7.           // 可以正则匹配 data-*值 ['datadata-mm', 'data-', 'data-1'].filter(v => v.match(/^data-\w+/))
  8.           let index = this.data && this.data['data-index'];
  9.           if (onPropsfn) {
  10.             if (args.length == 1) {
  11.               onPropsfn({detail: undefined})
  12.             } else if (args.length == 2) {
  13.               onPropsfn({detail: args[1], currentTarget:{dataset: {index: index}}})
  14.             } else if (args.length >= 3) {
  15.               onPropsfn.apply(this, args);
  16.             }
  17.           }
  18.           // this.triggerEvent(...args);
  19.         },
  20.       ... 省略
  21.     }
  22. });
添加的代码实现：都是参考wwto实现的思路。

2、源代码component.js 修改如下，主要是解决微信小程序中一些特性功能如：externalClasses、properties、behaviors => 模拟到支付宝小程序中，如果有兴趣可以比对添加的代码，如何抹平这些特性差异，其中微信的relations组件特性，没法模拟，替代方案就只能用支付宝小程序相关组件了。

  1. import { basic } from '../mixins/basic';
  2. import { observe } from '../mixins/observer/index';
  3. function mapKeys(source, target, map) {
  4.     Object.keys(map).forEach(key => {
  5.         if (source[key]) {
  6.             target[map[key]] = source[key];
  7.         }
  8.     });
  9. }
  10. function noop() {}
  11. function VantComponent(vantOptions = {}) {
  12.     const options = {};
  13.     mapKeys(vantOptions, options, {
  14.         data: 'data',
  15.         props: 'properties',
  16.         mixins: 'behaviors',
  17.         methods: 'methods',
  18.         beforeCreate: 'created',
  19.         created: 'attached',
  20.         mounted: 'ready',
  21.         relations: 'relations',
  22.         destroyed: 'detached',
  23.         classes: 'externalClasses'
  24.     });
  25.     options.properties = options.properties || {};
  26.     // relations 微信组件特性，暂时没法模拟到支付宝
  27.     const { relation } = vantOptions;
  28.     if (relation) {
  29.         options.relations = Object.assign(options.relations || {}, {
  30.             [`../${relation.name}/index`]: relation
  31.         });
  32.     }
  33.     // add default externalClasses
  34.     options.externalClasses = options.externalClasses || [];
  35.     options.externalClasses.push('custom-class');
  36.     // add default behaviors
  37.     options.behaviors = options.behaviors || [];
  38.     options.behaviors.push(basic);
  39.     // map field to form-field behavior
  40.     if (vantOptions.field) {
  41.         options.behaviors.push('wx://form-field');
  42.     }
  43.     // add default options
  44.     options.options = {
  45.         multipleSlots: true,
  46.         addGlobalClass: true
  47.     };
  48.     observe(vantOptions, options);
  49.  
  50.  
  51.     /**
  52.      *  参照wwto => 运行时调整options
  53.      */
  54.      
  55.     /**
  56.     *  mixins
  57.     */
  58.     options.mixins = options.mixins || [];
  59.     options.mixins = options.mixins.concat(options.behaviors);
  60.  
  61.  
  62.     /**
  63.      *  const lifeCircleNames = ['created', 'attached', 'ready', 'detached'];
  64.      */
  65.     options.methods = options.methods || {};
  66.     const lifeCircleNames = ['created', 'attached', 'ready', 'detached'];
  67.     lifeCircleNames.forEach(name => {
  68.       let methods = options.methods[name] = options.methods[name] || options[name] || noop;
  69.       // fix selectComponents api
  70.       if (name == 'ready') {
  71.         options.methods[name] = function() {
  72.           if(this.data.id){
  73.             var app = getApp();
  74.             app.globalData.insComp = app.globalData.insComp || {};
  75.             app.globalData.insComp[this.data.id] = this;
  76.           };
  77.           methods();
  78.         }
  79.       }
  80.     })
  81.  
  82.  
  83.     /**
  84.      *  处理this.__observers
  85.      */
  86.     let has = Object.prototype.hasOwnProperty;
  87.     let propMap = {};
  88.     let observerMap = null;
  89.     let walkProps = obj => {
  90.       Object.keys(obj).forEach((key) => {
  91.         if (!has.call(obj, key)) return
  92.         let item = obj[key];
  93.         // String Number Boolean 设定默认值
  94.         if (item === String) {
  95.           propMap[key] = '';
  96.         } else if (item === Boolean) {
  97.           propMap[key] = false;
  98.         } else if (item === Number) {
  99.           propMap[key] = 0;
  100.         } else if (item && typeof item == 'object') {
  101.           let type = item.type;
  102.           if (!('value' in item)) {
  103.             if (type === String) {
  104.               propMap[key] = '';
  105.             } else if (type === Boolean) {
  106.               propMap[key] = false;
  107.             } else if (type === Number) {
  108.               propMap[key] = 0;
  109.             } else {
  110.               propMap[key] = ''; // 暂时默认值
  111.             }
  112.           } else {
  113.             propMap[key] = item.value;
  114.           }
  115.  
  116.  
  117.           if (item.observer) {
  118.             // debugger
  119.             observerMap = observerMap || {};
  120.  
  121.  
  122.             if (typeof item.observer === 'function') {
  123.               observerMap[key] = item.observer;
  124.             } else { // 微信小程序中observer也可以使用对象的形式
  125.               observerMap[key] = function() {
  126.                 this[item.observer] && this[item.observer].apply(this, arguments);
  127.               };
  128.             }
  129.           }
  130.         } else {
  131.           propMap[key] = item;
  132.         }
  133.       });
  134.     }
  135.  
  136.  
  137.     // 处理properties => props
  138.     let properties = options.properties;
  139.     walkProps(properties);
  140.  
  141.  
  142.     let mininsProperties = options.mixins.filter(item => item.properties);
  143.     mininsProperties.forEach(item => {
  144.       walkProps(item.properties);
  145.     })
  146.  
  147.  
  148.     /**
  149.      *  处理 externalClasses 同时手动拷贝class
  150.      */
  151.     let externalClasses = options.externalClasses;
  152.     externalClasses.forEach(clas => {
  153.       propMap[clas.replace(/-(\w)/g, (match, p) => p.toUpperCase())] = '';
  154.     })
  155.  
  156.  
  157.     options.props = propMap;
  158.     options.props.__observers = observerMap
  159.  
  160.  
  161.     /**
  162.      *  my生命周期函数
  163.      */
  164.     options.didMount = function(){
  165.       this.data = Object.assign({}, this.data, this.props);
  166.  
  167.  
  168.       this.created && this.created.apply(this, arguments);
  169.       this.attached && this.attached.apply(this, arguments);
  170.       this.ready && this.ready.apply(this, arguments);
  171.  
  172.  
  173.       /**
  174.        *  解决初始化observer component 组件
  175.        */
  176.       if (this.props.__observers) {
  177.         Object.keys(this.props.__observers).forEach(key => {
  178.           this.props.__observers[key].call(this, this.props[key])
  179.         })
  180.       }
  181.     }
  182.  
  183.  
  184.     options.didUnmount = function(){
  185.       this.detached && this.detached.apply(this, arguments);
  186.     }
  187.  
  188.  
  189.     options.didUpdate = function(prevProps, preData) {
  190.       for (let key in this.props) {
  191.         if (this.props.__observers && typeof(this.props.__observers[key]) === 'function') {
  192.           if (JSON.stringify(prevProps[key]) !== JSON.stringify(this.props[key]) &&
  193.           JSON.stringify(preData[key]) !== JSON.stringify(this.props[key])) {
  194.             this.setData(Object.assign({}, this.data, {[key]: this.props[key]}));
  195.             this.props.__observers[key].apply(this, [this.props[key], prevProps[key]]);
  196.           }
  197.         } else if (this.props[key] !== prevProps[key]) {
  198.           this.data[key] = this.props[key];
  199.           this.setData(this.data);
  200.         }
  201.       }
  202.     }
  203.  
  204.  
  205.     Component(options);
  206. }
  207. export { VantComponent };

到这里主要的问题解决了，其他一些微信小程序到支付宝小程序的差异就不都列出来了，可以灵活的修改wwto 的代码来实现转换时的差异， 如果后期有同样需求的同学尝试转换时有遇见问题，也可留言交流。

最后

最初在决定到底要不要使用wwto这个工具来转换微信小程序的时候，心里面也是没底的，毕竟刚开源，我估计是第一个在刚开源的时候来做转换的。而且本身也从未开发过支付宝小程序，也不知道支付宝小程序和微信小程序有哪些大致的差异，再加上调研技术上也没有给充裕的时间来决策到底用什么方案来实现其他平台的小程序。


最后决定使用wwto来做这件事，主要是不想做重复的工作，对仅仅使用新的技术框架uni-app来重写，估计对我来说短期也不会有太多的技术积累收益，当然同时呢我也想快速的了解微信和支付宝的一些差异，重要的一点就是wwto开源的，每个部分的源代码都能debug。综合以上几点于是决定来趟一下这个浑水，总的结果来说，项目周期缩短了好多，大致花了两周的时间来完成了，也了解了支付宝小程序和微信小程序之间的一些差异，解决了好多问题，解决问题的过程中也很头疼...

最后转换后的效果图就不给出了，欢迎在微信和支付宝中搜索: “咔咔找车” 小程序看两者差异。

推荐文章

好文我在看????

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/298421?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号