阿里妹导读：小程序的开发不可避免的会面临跨平台开发的问题。各小程序平台有哪些特点？如何处理各平台的差异？本文分享淘票票在跨平台开发上的经验总结，包含了技术演进及差异控制策略，希望能帮助同学们提前避坑。

文末福利：下载《小程序大世界》电子书。

在 2019 年，阿里巴巴文娱的淘票票几乎涉足了当时市面上所有的小程序，其中在不少平台上，我们是阿里第一批吃螃蟹的技术团队。回顾过往，我们做过很多尝试，也踩过很多坑。

我们特别整理了支付宝小程序、百度小程序、字节跳动小程序、快应用的开发经验，希望为你带来启发。

一 支付宝小程序

支付宝内的淘票票用户主要是以购票为主，工具属性比较明显。淘票票入口众多，均引导跳转到小程序，引导用户在小程序内进行购票、娱乐消费、收藏、添加到首页/桌面、分享等行为。

淘票票支付宝小程序，经历了近一年的起步开发，以及一年多的版本迭代，业务开发涵盖了购票、视频、资讯、社区等多个场景。

1 小程序开发

1） 在核心业务中慎用 web-view

实际项目线上运行情况及用户反馈表明：web-view 初始化较慢、易受网络干扰、性能差（对比离线包及普通 H5 页面）、问题较多，建议不要在核心业务中使用 web-view 进行承载。

2） 自有城市体系与支付宝城市组件的适配技巧

由于支付宝的城市组件是基于自身城市体系的，淘票票拥有独立的城市体系，所以需要城市选择组件适配不同城市体系的场景。经过几轮推动迭代，淘票票线上已使用城市选择组件，已支持复写当前定位城市、历史访问城市、热门城市、城市列表信息等。使用my.chooseCity、my.onLocatedComplete、my.setLocatedCity 三个 JSAPI 可实现对应效果。

3） 如何实现沉浸式效果（透明导航栏）？

• 首先在 page.json 配置 “transparentTitle” 为 “auto” 属性，开启沉浸式布局。

• 其次，页面布局适配沉浸式顶部透明导航栏即可，通过 my.getSystemInfo 获取 titleBarHeight 及 statusBarHeight 可计算出顶部透明高度。

注意：Android 5.0 以下由于不支持沉浸式状态栏，所以页面会从状态栏下开始布局。

4） 小程序 tabBar 换肤、红点

主要使用的JSAPI及event：my.setTabBarStyle、my.setTabBarItem、page.onTabItemTap，参数参考官方文档即可。注意事项如下：

• 小程序触发 relaunch 时，tabBar 的样式会被清除，需要再次设置，目前建议在 app.onShow 里多次触发设置逻辑。

• 尽量使用本地图片，在线图片有个下载的过程，体验不太好，且弱网下图片载入可能失败。

• my.setTabBarItem 的参数每一项均需要赋值，否则 Android 可能会报 “invalid parameter”。

2 小程序开发注意事项

• 不要使用 tnpm 安装依赖，tnpm 软连接目前支持有问题。

• devDependencies 和 dependencies 需要分开，将 devDependencies 移到项目代码外层，否则会额外增加包大小。

• 设置 transparent/pullRefresh 等 window 配置时，跳转别的页面会被继承，需要在 app.json 初始化此类配置信息规避。

• web-view 里面的页面会失去下拉刷新、resume 等特性。

• Android 低版本不支持 sticky 属性。

• 某个值控制 dom 是否渲染，下次更新时此值若为 undefined 时不会销毁掉会被忽略掉。

• window.atob、window.btoa 需要第三方库来替代。

• lodash 某些方法不能直接使用，因为小程序构建时无 global 对象。

3 小程序监控

使用阿里云的 ARMS 平台，参考官方文档接入即可。

• 优点：有实时大盘，排查用户日志方便，上报更自由、丰富。

• 缺点：有接入成本、需要开发，增加包大小，且要收费。

4 小程序权限

小程序有权限管控，无论是申请 JSAPI 权限还是 H5 域名配置，都是需要打新的包上传才能生效。

二 百度小程序

1 背景

以微信小程序为蓝本的百度小程序，也同样具备相似的商业定位。依赖百度这样的老牌搜索门户，百度小程序更加偏向目的性强的搜索热词进行小程序的关联调起和互动，这也是百度小程序和其他小程序的区别。

由此，我们在 2018 年底进行了百度小程序的开发工作，由于在前期积累了小程序开发经验，百度小程序的开发更加的平稳和快速，不到一个月就上线运营了。

2 应用场景

百度小程序入口：

三种入口：百度App搜索关联、百度贴吧关联、其他百度生态搜索关联。

3 开发实战

下面是淘票票百度小程序开发过程中遇到的坑和总结：

1）基础开发

百度小程序的开发与微信、头条小程序的开发方式和框架概念非常相似，都属于前端开发的一块子集，主要可以分为 4 块来构建百度小程序的页面：

• 第一块：HTML。构建页面框架：使用 xxx.swan 文件进行页面元素框架的搭建，具有独特的 HTML 标签如 view，scroll-view 等。

• 第二块：CSS。管理页面样式：使用 xxx.css 文件进行页面样式的管理，基本的 CSS 的样式都大部分支持。

• 第三块：JS。编写页面逻辑：使用 xxx.js 文件进行页面逻辑的书写，小程序具有其独特的生命周期管理方法。

• 第四块：JSON。组件注册：百度小程序支持通过组件的方式进行页面的搭建，通过在 xxx.json 中注册组件供页面使用。

2）template 模板使用

与其他的小程序相同，百度小程序也提供了模板 template 的能力，使用模板可以提高工程化和代码可维护性，开发者可以在模板中设计代码片段，向外暴露接口注入外界变量之后，可以在合适的时机去使用该代码片段。

但是在百度小程序使用 template 使用时，需要注意传递数据时需要使用 {{{ }}} 三层花括号包裹对象，否则数据注入时会出现异常。

百度小程序的 template 的使用：

天津市犀思科技有限公司是专业从事web应用定制开发的一家公司，主营业务包括定制营销型网站建设、微信小程序开发、微信公众号开发、APP定制开发、天津企业微信开发、ERP、CRM、OA等企业应用场景信息化解决方案等服务，致力于成为中国领先的IT服务及行业解决方案的提供商。