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

简介: 如何将现有的微信原生小程序转其他平台的小程序?我想如果打算做这么一件事,或许大多数同学和我一样可能没什么思路。我第一次听说是在一次小程序生态技术大会上,一公司的一位前端技术人员谈到他们公司主要是将自己的微信小程序通过团队开发的工具转成其他平台的小程序,所以当时我也很想了解这个工具是怎么做的,实现过程是什么?
import { basic } from '../mixins/basic';
import { observe } from '../mixins/observer/index';
function mapKeys(source, target, map) {
    Object.keys(map).forEach(key => {
        if (source[key]) {
            target[map[key]] = source[key];
        }
    });
}
function noop() {}
function VantComponent(vantOptions = {}) {
    const options = {};
    mapKeys(vantOptions, options, {
        data: 'data',
        props: 'properties',
        mixins: 'behaviors',
        methods: 'methods',
        beforeCreate: 'created',
        created: 'attached',
        mounted: 'ready',
        relations: 'relations',
        destroyed: 'detached',
        classes: 'externalClasses'
    });
    options.properties = options.properties || {};
    // relations 微信组件特性,暂时没法模拟到支付宝
    const { relation } = vantOptions;
    if (relation) {
        options.relations = Object.assign(options.relations || {}, {
            [`../${relation.name}/index`]: relation
        });
    }
    // add default externalClasses
    options.externalClasses = options.externalClasses || [];
    options.externalClasses.push('custom-class');
    // add default behaviors
    options.behaviors = options.behaviors || [];
    options.behaviors.push(basic);
    // map field to form-field behavior
    if (vantOptions.field) {
        options.behaviors.push('wx://form-field');
    }
    // add default options
    options.options = {
        multipleSlots: true,
        addGlobalClass: true
    };
    observe(vantOptions, options);
    /**
     *  参照wwto => 运行时调整options
     */
    /**
    *  mixins
    */
    options.mixins = options.mixins || [];
    options.mixins = options.mixins.concat(options.behaviors);
    /**
     *  const lifeCircleNames = ['created', 'attached', 'ready', 'detached'];
     */
    options.methods = options.methods || {};
    const lifeCircleNames = ['created', 'attached', 'ready', 'detached'];
    lifeCircleNames.forEach(name => {
      let methods = options.methods[name] = options.methods[name] || options[name] || noop;
      // fix selectComponents api
      if (name == 'ready') {
        options.methods[name] = function() {
          if(this.data.id){
            var app = getApp();
            app.globalData.insComp = app.globalData.insComp || {};
            app.globalData.insComp[this.data.id] = this;
          };
          methods();
        }
      }
    })
    /**
     *  处理this.__observers
     */
    let has = Object.prototype.hasOwnProperty;
    let propMap = {};
    let observerMap = null;
    let walkProps = obj => {
      Object.keys(obj).forEach((key) => {
        if (!has.call(obj, key)) return
        let item = obj[key];
        // String Number Boolean 设定默认值
        if (item === String) {
          propMap[key] = '';
        } else if (item === Boolean) {
          propMap[key] = false;
        } else if (item === Number) {
          propMap[key] = 0;
        } else if (item && typeof item == 'object') {
          let type = item.type;
          if (!('value' in item)) {
            if (type === String) {
              propMap[key] = '';
            } else if (type === Boolean) {
              propMap[key] = false;
            } else if (type === Number) {
              propMap[key] = 0;
            } else {
              propMap[key] = ''; // 暂时默认值
            }
          } else {
            propMap[key] = item.value;
          }
          if (item.observer) {
            // debugger
            observerMap = observerMap || {};
            if (typeof item.observer === 'function') {
              observerMap[key] = item.observer;
            } else { // 微信小程序中observer也可以使用对象的形式
              observerMap[key] = function() {
                this[item.observer] && this[item.observer].apply(this, arguments);
              };
            }
          }
        } else {
          propMap[key] = item;
        }
      });
    }
    // 处理properties => props
    let properties = options.properties;
    walkProps(properties);
    let mininsProperties = options.mixins.filter(item => item.properties);
    mininsProperties.forEach(item => {
      walkProps(item.properties);
    })
    /**
     *  处理 externalClasses 同时手动拷贝class
     */
    let externalClasses = options.externalClasses;
    externalClasses.forEach(clas => {
      propMap[clas.replace(/-(\w)/g, (match, p) => p.toUpperCase())] = '';
    })
    options.props = propMap;
    options.props.__observers = observerMap
    /**
     *  my生命周期函数
     */
    options.didMount = function(){
      this.data = Object.assign({}, this.data, this.props);
      this.created && this.created.apply(this, arguments);
      this.attached && this.attached.apply(this, arguments);
      this.ready && this.ready.apply(this, arguments);
      /**
       *  解决初始化observer component 组件
       */
      if (this.props.__observers) {
        Object.keys(this.props.__observers).forEach(key => {
          this.props.__observers[key].call(this, this.props[key])
        })
      }
    }
    options.didUnmount = function(){
      this.detached && this.detached.apply(this, arguments);
    }
    options.didUpdate = function(prevProps, preData) {
      for (let key in this.props) {
        if (this.props.__observers && typeof(this.props.__observers[key]) === 'function') {
          if (JSON.stringify(prevProps[key]) !== JSON.stringify(this.props[key]) &&
          JSON.stringify(preData[key]) !== JSON.stringify(this.props[key])) {
            this.setData(Object.assign({}, this.data, {[key]: this.props[key]}));
            this.props.__observers[key].apply(this, [this.props[key], prevProps[key]]);
          }
        } else if (this.props[key] !== prevProps[key]) {
          this.data[key] = this.props[key];
          this.setData(this.data);
        }
      }
    }
    Component(options);
}
export { VantComponent };


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


最后


最初在决定到底要不要使用wwto这个工具来转换微信小程序的时候,心里面也是没底的,毕竟刚开源,我估计是第一个在刚开源的时候来做转换的。而且本身也从未开发过支付宝小程序,也不知道支付宝小程序和微信小程序有哪些大致的差异,再加上调研技术上也没有给充裕的时间来决策到底用什么方案来实现其他平台的小程序。最后决定使用wwto来做这件事,主要是不想做重复的工作,对仅仅使用新的技术框架uni-app来重写,估计对我来说短期也不会有太多的技术积累收益,当然同时呢我也想快速的了解微信和支付宝的一些差异,重要的一点就是wwto开源的,每个部分的源代码都能debug。综合以上几点于是决定来趟一下这个浑水,总的结果来说,项目周期缩短了好多,大致花了两周的时间来完成了,也了解了支付宝小程序和微信小程序之间的一些差异,解决了好多问题,解决问题的过程中也很头疼...


相关文章
|
6天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
153 7
|
6天前
|
人工智能 安全 机器人
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
LangBot 是一个开源的多模态即时聊天机器人平台,支持多种即时通信平台和大语言模型,具备多模态交互、插件扩展和Web管理面板等功能。
334 14
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
|
9天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2185 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
13天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
133 12
|
25天前
|
存储 缓存 关系型数据库
社交软件红包技术解密(六):微信红包系统的存储层架构演进实践
微信红包本质是小额资金在用户帐户流转,有发、抢、拆三大步骤。在这个过程中对事务有高要求,所以订单最终要基于传统的RDBMS,这方面是它的强项,最终订单的存储使用互联网行业最通用的MySQL数据库。支持事务、成熟稳定,我们的团队在MySQL上有长期技术积累。但是传统数据库的扩展性有局限,需要通过架构解决。
65 18
|
30天前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
43 1
|
1月前
|
移动开发 开发框架 小程序
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
|
1月前
|
消息中间件 监控 小程序
电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
电竞陪玩系统架构涵盖前端(React/Vue)、后端(Spring Boot/php)、数据库(MySQL/MongoDB)、实时通信(WebSocket)及其他组件(Redis、RabbitMQ、Nginx)。通过模块化设计、微服务架构和云计算技术优化,提升系统性能与可靠性。同时,加强全面测试、实时监控及故障管理,确保系统稳定运行。
为什么不加盟线下陪玩APP小程序平台,而是自建平台?
自建线下陪玩APP平台相比加盟,能避免利润抽成,确保所有收益归己,同时提供更高的运营灵活性和稳定性,不受制于合同限制或总平台决策变动,更适合追求长期发展的创业者。
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。

热门文章

最新文章