小程序进阶之路：跨平台开发避坑指南 _小程序

作者：阿里巴巴文娱技术阿里技术

文章插图

阿里妹导读：小程序的开发不可避免的会面临跨平台开发的问题。各小程序平台有哪些特点？如何处理各平台的差异？本文分享淘票票在跨平台开发上的经验总结，包含了技术演进及差异控制策略，希望能帮助同学们提前避坑。
文末福利：下载《小程序大世界》电子书。
在 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 背景
以微信小程序为蓝本的百度小程序，也同样具备相似的商业定位。依赖百度这样的老牌搜索门户，百度小程序更加偏向目的性强的搜索热词进行小程序的关联调起和互动，这也是百度小程序和其他小程序的区别。