干货 | 微信小程序一键转百度小程序,携程火车票团队是这样做的

作者简介

张海明,携程火车票研发部开发经理。2015年加入携程,从事火车票Android、ReactNative和小程序相关研发工作。

一、前言

随着微信小程序的逐渐火爆,百度、支付宝等平台纷纷推出各自的小程序平台。面对众多平台,携程第一时间上线了自己的小程序。在带来巨大流量的同时,也带来了更多的工作量。如何保证各个平台小程序的质量、迭代速度以及减少工作量成为我们思考的问题。

二、概述

本文将根据携程火车票小程序团队从微信小程序转百度小程序的实践过程以及最终的实践成果,从以下几个方面来进行阐述:

  • 为什么要进行微信小程序转百度小程序
  • 微信转百度小程序的思路
  • 转化调整过程中遇到的问题以及解决方案
  • 实践成果及后续展望

三、为什么要进行微信小程序转百度小程序

在百度平台的小程序开放后,我们基于微信小程序的业务版本,快速投入资源,上线了第一版功能较为简单的小程序,去对市场进行试探。

经过了一段时间的观察,发现百度小程序的流量很可观,觉得有必要对百度小程序做对应的优化。我们当时面临的情况如下:

①因为需要保证微信小程序的质量,我们必须使用原生微信小程序进行开发。

②主流的小程序转换方式:如使用类似Taro、remax等框架,需要进行完整的开发,这需要投入很多的资源,且基于①的原因,我们无法复用到微信。

③使用百度原生语言开发:和②一样,在投入资源的情况下,可复用性不高。

④需要考虑后续扩展到其他小程序平台。

⑤微信小程序和百度小程序具有一定的相同点。

⑥使用内嵌H5没有原生API支持,部分功能受限(支付、分享等)。

⑦我们的主要工作在于自己的业务模块,基础构件已由框架同事全部支持。

基于上述情况,我们决定尝试用现有的微信小程序代码直接转换为百度小程序代码。

四、微信转百度小程序的目标及思路

4.1 微信转百度小程序的目标

参考技术社区的转换方案,结合我们自身的需要,我们拟出初步目标:支持微信小程序一键转换为百度小程序,且支持迭代转换。

4.2 微信转百度小程序的思路

一键转换工具我们选择了开源工具wx2swan ,在工具的介绍中,开发者提到了下面这句话:

工具帮你迁移80%的代码,可能只节省你50%的工作量。

而在初步实践中,也验证了开发者的观点,减少这50%的工作量也成了我们工作的重中之重。

在具体讨论时,我们主要有两个方案:

1)微信小程序代码转换后,进行代码搬运。

在转换后的代码上进行修改,配合百度小程序平台带来的某些差异进行处理。这种方案是我们最先提出的,但是该方案存在两个缺点。

①搬运代码进行修改,工作量较大,业务流程很有可能存在较多隐患,出现bug时,排查解决等也会耗费很多的时间;
②解决了我们当前的需要,但是当后面需要继续迭代百度小程序时,又会面临①中的问题,无法减轻更多的工作量。

我们团队继续讨论其他可行性,于是出现了第二个方案。

2)结合百度小程序的差异,基于现有的微信代码进行修改。

这个方案基本思路就是抹平两个平台的差异,做到微信小程序一套代码,转换后基本甚至完全可以在百度上运行。同样的,该方案的缺点我们也进行了分析。

①工作量大,需要在微信代码的基础上,一个一个页面的去趟"坑",如某些api的使用,页面展示差异等,并需要提出解决方案;
②业务流程、功能策略在两个平台上的差异需要做一定的修改,如分享、活动入口等。

但是该方案可以避免①中的持续迭代带来工作量问题,我们选择了该方案。

五、转化调整过程中遇到的问题以及解决方案

5.1 平台差异性抹平

这一部分的工作主要在API和平台某些特性如UI上。

特性(UI)上差异处理如下:

  • icon-font使用base64方式差异,百度小程序不支持woff2:统一使用了truetype

    @font-face {font-family: "xxx-iconfont"; src: url('data:application/octet-stream;bas...') format('truetype');} .ifont-add:before { font-family: 'xxx-iconfont'; content: "\e7f8";}

  • for循环和判断条件一起使用时,百度小程序会生成空dom:for循环使用block嵌套

    <block wx:for="{{arr}}" wx:for-item="s" wx:key="{{index}}"> <view class="cls"wx:if="{{some condition}}" data-index="{{index}}" bindtap="taptap"> <view class="cont">{{s.name}}</view> </view></block>

  • 百度小程序中swan不支持位运算:移至至js中
  • 百度小程序中swan 运算符 < <= 导致页面展示异常:已反馈至百度开发者中心,暂时改写
  • ...其他不再赘述

JavaScript层的处理

这一部分工作由框架同事提供,主要包含以下两个方面:

  • 劫持Page/componet。提供统一的Page示例和Componet实例,来与各小程序的生命周期进行兼容。
  • 通过注入wx/swan,劫持api,统一挂载到全部的对象上。对于我们业务BU的使用,只需要通过globalAPI.API的方式调用即可。

5.2 wxs改写

wxs是微信小程序特有的脚本语言(不同于JavaScript),可使用在wxml中,部分场景下可以快速且优雅的解决问题,但是具有一定的限制,比如该部分和JavaScript代码隔离,且不能调用小程序提供的API等。

在转换百度时,该功能不能正常使用,所以我们放弃了该功能,逻辑全部在JavaScript中实现。

5.3 H5数据传递

部分业务流程中,如果需要跳转至H5页面,且需要H5传递数据,则H5页面需引入百度sdk。

5.4 业务差异化处理

这一部分我们定义了全局的平台判断:

initConfig() {        //根据appid判断各平台      //channel代表平台      //requestChannel用于请求头,便于标识服务端识别      switch (appId) {          case baiduAppid:                config.channel = 'Baidu';                config.requestChannel = "RequestChannel.Baidu";                break;            default:                config.channel = 'WX';                config.requestChannel = "RequestChannel.WX";                break;        }        //定义全局平台属性,方面调用        config.isCtripApp = config.channel === 'WX';        config.isBaiduApp = config.channel === 'Baidu'        Object.assign(global.config, config)    }

在具体业务场景时,我们通过判断平台,来做不同的表现。

PageInit:this.data = {    isBaiduApp:global.config.isBaiduApp}UseIt:if(this.data.isBaiduApp){    //do your business}

另一部分,在网络请求中,我们也是在header中追加了平台的信息,以方便后台服务进行业务控制:

header: {    'request-type': `${global.config.requestChannel}`  }

5.5 工作流的制定

为了不影响微信小程序的工程,我们使用git分支进行操作。

  • --->首次开发
  • 基于release_wx新建develop_baidu分支;
  • 对于百度小程序的适配,全部在develop_baidu分支进行;
  • 使用develop_baidu进行转换,生成的代码拷贝至百度小程序仓库并提交;
  • --->迭代开发
  • release_wx merge至develop_baidu分支;
  • 对于有修改的代码进行检查
  • 使用develop_baidu进行转换,生成的代码拷贝至百度小程序仓库并提交;

六、实践成果及后续展望

根据之前设定的目标,微信小程序调整后基本完成的预期的目标:

在微信小程序代码的基础上,支持一键转成百度小程序,且可进行持续的迭代更新。

而在此过程中,我们摸索出来的较为稳定的开发方式、流程,是我们对其他小程序推进更新的有益尝试。

按照此方式,我们业已完成了对快应用的适配,并有计划推广至其他平台。也期待对于和我们一样,在以微信小程序开发为主,其他平台尝试转译的同学有一定帮助。

5G、人工智能等热门话题云集

11月9日上海

戳下方图片直达

↓↓↓

本文分享自微信公众号 - 携程技术中心(ctriptech)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java架构学习路线

8种创建Java线程的方式,你知道几个?

创建线程,是多线程编程中最基本的操作,彤哥总结了一下,大概有8种创建线程的方式,你知道吗?

8700
来自专栏跟Qt君学编程

分享一个Qt的pdf查看器

  这个基于qmake的项目定义了两个构建目标:qpdf共享库(ppdflib)和pdfviewer基于qpdf库的示例PDF查看器。

21920
来自专栏前端自习课

【JS】370- 总结异步编程的六种方式

众所周知 JavaScript 是 单线程工作,也就是只有一个脚本执行完成后才能执行下一个脚本,两个脚本不能同时执行,如果某个脚本耗时很长,后面的脚本都必须排队...

8720
来自专栏智能计算时代

「首席架构师精选」JavaScript图表库的比较

有几种不同类型的图表。最常见的四种图形可能是线形图、条形图和直方图、饼图和笛卡儿图。它们通常用于,而且最好用于,完全不同的东西。

5920
来自专栏掌上编程

Java IO与NIO

七 Java NIO AsynchronousFileChannel异步文件通

10730
来自专栏好好学java的技术栈

面试官:Logback如何配置,才能提升TPS?

SpringBoot工程自带logback和slf4j的依赖,所以重点放在编写配置文件上,需要引入什么依赖,日志依赖冲突统统都不需要我们管了。logback框架...

9440
来自专栏前端自习课

【JS】369- 20个常用的JavaScript字符串方法

concat() 方法用于连接两个或多个字符串,此方法不改变现有的字符串,返回拼接后的新的字符串。

7720
来自专栏前端自习课

【JS】368- 浅析JavaScript异步

一直以来都知道 JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况。一般被问到异步的时候脑子里第一反应就...

11130
来自专栏编程语言xuetang

Apache开源日志框架Log4j配置指南

Log4j是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台、文件、GUI组件,甚至是套接口服务器、NT的事件记录器、U...

9440
来自专栏编程语言xuetang

Java各版本特性一览-从Java1.0到Java12

初代版本,伟大的一个里程碑,但是是纯解释运行,使用外挂JIT,性能比较差,运行速度慢。

11930

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励