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

b) WebView 容器页登录
由于百度小程序无法操作到 WebView 容器的 cookie 信息，所以在 WebView 容器页进行登录时，势必要进行一次从服务端获取登录 cookie 的过程。目前可以在进入需要登录校验登录的 WebView 容器页之前，先发起获取 cookie 的服务端请求，服务端处理好用户登录信息校验之后就可以提供一个同步 cookie 的专用页面。当接口返回链接之后，小程序的 WebView 容器需要做的就是访问这条链接将服务端返回的 cookie 同步到 WebView 容器中，这样 WebView 容器就具备了可供校验的登录信息。
完成上述页面的登录操作之后，小程序登录流程就结束了。
4 百度小程序总结
本文着重描述的是开发过程中大概率会遇到的问题和解决方案，最好结合官方文档一起查看。
三字节跳动小程序
1 背景
字节跳动小程序是基于字节跳动全产品矩阵开发，与图文、视频等场景有着天然的搭配性，带动小程序分发，由内容为小程序带量以及裂变。作为一个大流量且高度活跃的平台，具有很大用户增量挖掘空间。
对于头条系应用，同一小程序可以同步上线多个宿主端，目前已开放今日头条、抖音、头条极速版。无论是抖音，还是今日头条，都属于内容分发平台，相比公众号读者，抖音用户相对更年轻，而头条则拥有大量三四线城市读者，这正好契合了电影作为内容消费的特质，帮助淘票票更好的拉动下沉用户。基于头条、抖音平台自身的优势，我们在 2019 年上线了淘票票字节跳动小程序。
2 应用场景
今日头条的六个主要场景：

信息流推荐
搜索直达
头条号挂载小程序
分享
中心化入口
留存入口

文章插图

今日头条
抖音的四个主要场景：

小视频挂载
企业号主页
搜索展示
留存入口

文章插图

广告投放
3 基础介绍
字节跳动小程序基本开发思路类似于前端开发，并增强调用大量端能力，性能体验优于普通 Web。上层架构基于 JS 开发，可以辅助开发者进行良好得开发。框架结构和开放式类似于支付宝小程序、微信小程序和百度小程序。
目录结构：主要分为以下几类的文件：

.json 为后缀的 JSON 配置文件，这个文件配置了小程序所有页面的路径和界面展现样式等。

.ttml 结尾的模板文件，用来描述当前这个页面的文件结构，类似于网页中的 HTML 文件。

.ttss 结尾的样式文件，描述页面样式，类似于网页中的 CSS 文件。

.js 结尾的 JS 文件，处理这个页面和用户的交互。

文章插图

目录结构
四快应用卡片
1 概述
当前，基于超级 APP 推出的各种小程序，对手机厂商的分发能力及话语权有明显削弱趋势。因此国内各手机厂商在推出快应用后，也逐渐对外开放手机负一屏的能力，为快应用及其他服务提供直接的入口。
2 卡片类型
快应用的卡片类型可以分为：应用类型的卡片、服务类型的卡片和其它类型的卡片。

应用类型的卡片：是用户订阅的一种卡片，内容相对固定。

服务类型的卡片：针对用户关心数据的状态，内容实时变更。

其它类型的卡片：自定义卡片，根据实现对应内容展示及跳转。

3 应用卡片的具体接入
卡片的开发基于快应用，所使用的 API 是快应用的子集，部分 API 不能在卡片中使用。目前已知的 vivo，OPPO，NUBIA 都需要卡片的开发不依赖主 rpk，也就是需要保证卡片能脱离主 rpk 独立渲染，为保证卡片的独立渲染，不能使用 this.$app 相关对象及文件 app.ux 中声明的工具类或生成的对象。
1）卡片的初始化配置
a) 配置文件
所有的卡片都需要和快应用中声明页面一样在 manifest.json 中声明。具体是在 router.widgets 中配置，各厂商之间有部分差异，但差异不大。
b) 卡片配置文件注意事项