监听⼩程序web-view页⾯返回_⼩程序进阶之路：跨平台开发
避坑指南
作者： 阿⾥巴巴⽂娱技术 阿⾥技术
阿⾥妹导读：⼩程序的开发不可避免的会⾯临跨平台开发的问题。各⼩程序平台有哪些特点？如何处理各平台的差异？本⽂分享淘票票在跨平台开发上的经验总结，包含了技术演进及差异控制策略，希望能帮助同学们提前避坑。
⽂末福利：下载《⼩程序⼤世界》电⼦书。
在 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、TabItemTap，参数参考官⽅⽂档即可。注意事项如下：
⼩程序触发 relaunch 时，tabBar 的样式会被清除，需要再次设置，⽬前建议在 Show ⾥多次触发设置逻辑。
尽量使⽤本地图⽚，在线图⽚有个下载的过程，体验不太好，且弱⽹下图⽚载⼊可能失败。
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 的使⽤：
作为对⽐，头条、⼩程序 template 需要两层花括号：
3)组件属性的 observer 使⽤
在使⽤组件(Component)是⼤概率会使⽤到属性的 observer ⽅法，当属性被改变时会执⾏属性对应的 observer ⽅法，此处需要注意在使⽤ observer ⽅法时，避免使⽤下划线开头的⽅法名，可能会造成 observer ⽅法的循环调⽤问题。
或者当发现 properties 中的 observer ⽅法被循环调⽤时，检查⼀下 observer 绑定的⽅法是否有下划线。⽅法命名移除下划线，⼤概率可以解决循环调⽤问题。
会出现 observer 循环调⽤的情况：
isShowLoadMore: {            type: Boolean,            value: false,            observer: '_isshowChange'      },
推荐的写法：
isShowLoadMore: {            type: Boolean,            value: false,            observer: 'isshowChange'      },
4)scroll-view 的使⽤
在使⽤ scroll-view 的开发过程中，对存在多个可滑动区域的页⾯且其中⼀个滑动区域为 fixed 样式时，iOS 机型会偶现 scroll-view 空⽩的问题。
可能存在异常的页⾯布局如下:
其中 “可滑动区域 2” 为依赖内容撑开的页⾯ View，当内容到达⼀定长度时，页⾯ View 会提供滑动能⼒。如果使⽤上述写法可能会出现scroll-view 空⽩的问题。
推荐的写法：
5)⼩程序 DSL 页与 WebView 页的登录流程
⼩程序的页⾯实现⽅式可以分为两种：⼀种为⼩程序原⽣的页⾯；另外⼀种是使⽤ WebView 组件，将 H5 页⾯展⽰在⼩程序中。处理两种页⾯的登录时⼀般是先进⾏ DSL 页登录(⼩程序原⽣页⾯)，完成 DSL 页登录后，再进⾏ H5 容器页的登录。
a) DSL 页登录
先进⾏⼩程序的登录授权，获取到⼩程序的登录凭证，拿着登录凭证去⾃⼰的业务服务端获取真实的⼩程序登录信息，当开发者完成上述流程之后，将登录态信息加密后存储在本地。下次进⾏需要登录校验的页⾯时，进⾏本地登录信息的登录校验，则 DSL 页的登录流程就完成了。
b) WebView 容器页登录
由于百度⼩程序⽆法操作到 WebView 容器的 cookie 信息，所以在 WebView 容器页进⾏登录时，势必要进⾏⼀次从服务端获取登录cookie 的过程。⽬前可以在进⼊需要登录校验登录的 WebView 容器页之前，先发起获取 cookie 的服务端请求，服务端处理好⽤户登录信息校验之后就可以提供⼀个同步 cookie 的专⽤页⾯。当接⼝返回链接之后，⼩程序的 WebView 容器需要做的就是访问这条链接将服
务端返回的 cookie 同步到 WebView 容器中，这样 WebView 容器就具备了可供校验的登录信息。
完成上述页⾯的登录操作之后，⼩程序登录流程就结束了。
4 百度⼩程序总结
小程序平台有哪些
本⽂着重描述的是开发过程中⼤概率会遇到的问题和解决⽅案，最好结合官⽅⽂档⼀起查看。
三 字节跳动⼩程序
1 背景
字节跳动⼩程序是基于字节跳动全产品矩阵开发， 与图⽂、视频等场景有着天然的搭配性，带动⼩程序分发，由内容为⼩程序带量以及裂变。作为⼀个⼤流量且⾼度活跃的平台，具有很⼤⽤户增量挖掘空间。
对于头条系应⽤，同⼀⼩程序可以同步上线多个宿主端，⽬前已开放今⽇头条、抖⾳、头条极速版。⽆论是抖⾳，还是今⽇头条，都属于内容分发平台，相⽐读者，抖⾳⽤户相对更年轻，⽽头条则拥有⼤量三四线城市读者，这正好契合了电影作为内容消费的特质，帮助淘票票更好的拉动下沉⽤户。基于头条、抖⾳平台⾃⾝的优势，我们在 2019 年上线了淘票票字节跳动⼩程序。
2 应⽤场景
今⽇头条的六个主要场景：
信息流推荐
搜索直达
头条号挂载⼩程序
分享
中⼼化⼊⼝
留存⼊⼝
今⽇头条
抖⾳的四个主要场景：
⼩视频挂载
企业号主页
搜索展⽰
留存⼊⼝
⼴告投放
3 基础介绍

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。