支付宝小程序、百度小程序、微信小程序、今日头条小程序技术分析

一、总述

在如今群雄环伺的小程序赛道上，BAT早已完成了小程序的布局，今日头条也不甘示弱，成为继微信、支付宝、百度之后，第四个推出小程序应用的公司，四家小程序可谓是各有各的特色。小程序出现，让移动应用时代向轻应用时代迈进了一步。
今日头条进军小程序是为什么呢？今日头条是跟风开发小程序的吗？跟风也只是其中一个原因，由于小程序应用体量更轻、对配置要求低、使用路径短、场景和流量更为贴合。不少人认为小程序就是未来接入移动互联服务的最佳入口。而且好多商家利用小程序无需下载APP，获取更加方便，传播更为广泛的特点，在自己的小程序商城中获得了巨大的收益。本文将对于四种小程序在发展现状、自身特色、应用场景以及技术方面进行对比分析。今日头条小程序，由于还未推出小程序平台和相关技术文档，所以涉及到技术方面的分析较少。

小程序共性：

1、小程序应用体量更轻、对配置要求低、使用路径短、场景和流量更为贴合；

2、提供了丰富的 API 、组件；

3、每个页面有独立的作用域，并提供模块化；

4、框架本身并非运行在浏览器中，所以 JavaScript 在 Web 中的一些能力都无法使用，如 document , window等；

5、生命周期函数： 

1）在app.js文件中定义的生命周期方法

onLaunch()--监听小程序初始化 小程序初始化完成（全局只触发一次） 
onShow()--监听小程序显示 小程序启动，或从后台进入前台显示 
onHide()--监听小程序隐藏 小程序从前台进入后台 
onError()--错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发onError并带上错误信息

2）在page页面中定义的生命周期方法

onLoad()--监听页面加载 
onShow()--监听页面显示 
onReady()--监听页面初次渲染完成
onUnload()--监听页面卸载（销毁） 
onHide()--监听页面隐藏

6、在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面；

7、一套代码运行于Android、iOS系统，而且三种小程序相似度很大，学习成本极低，只是赋予了不同的平台特色。可以先开发微信小程序，再在此基础上修改后开发支付宝小程序。

1.全封闭的微信小程序。作为小程序的“鼻祖”微信小程序已经拥有了 2.9 亿日活跃用户，微信小程序数量突破百万，第三方平台数超过 2300 家。微信小程序的开发者数量达到 150 万，微信小程序是全封闭式的，用户只能在微信生态里完成产品闭环。微信小程序的封闭性，使得开发者的小程序的运行范围只能在微信生态体系内，虽然在一定程度上对小程序有规范作用，易于管理，但是其应用范围依然是在一定的界限内。
2.半封闭的支付宝小程序。支付宝小程序通过“718+X”的业务逻辑来打通线上线下，即 7 大入口、1 个闭环、8 大能力再加 X 场景，支付宝小程序目前已重点开放支付收单，会员服务，芝麻信用等8项能力，由于产品闭环需要在阿里的生态下完成，其本身是半开放半封闭的模式，目前支付宝小程序数量共计超过 2 万，日活达 1.2 亿，用户数达 3 亿，小程序平均7 日留存率为 29%。
3.开放的百度小程序。百度于7月份正式推出了小程序，不同于微信和支付宝的封闭模式，百度小程序的主题为开放+AI，百度把“搜索 + 信息流”全域流量都接入小程序开放给开发者，同时通过百度自身的技术优势，给小程序AI赋能。

2018上半年微信小程序数量突破百万，日活高达2.8亿。百度智能小程序达到1.37亿日活量，支付宝达到1.58亿日活量。相比阿里、百度，腾讯借助微信特殊的社交和内容生态，确实提前抢夺了小程序应用的用户红利，尤其是社交裂变所产生的传播效应，似乎已经成为目前小程序专属的玩法。但是说到底，小程序连接流量和场景、内容，而BAT三者的流量本身具有天然的属性差异，这也决定了小程序的刺激因素远不止社交，百度、阿里所具有搜索、电商的互联网基因，使得其小程序的运营规则也各不相同。这也是为什么小程序不能成为腾讯独角戏，百度高调进入这一赛道的原因。从这个角度来看，百度智能小程序的核心竞争力在于搜索，支付宝小程序的核心在于支付，微信小程序的核心在于社交，这就决定了各种小程序的使用场景，每个平台都是结合其庞大入口之上的内容生态和技术应用来发展自身小程序的。

二、详细分析

一、微信小程序 （2017年1月9日正式上线）

强社交属性和高频次流量是微信的强力优势。微信的用户群分布广泛，停留时间长，打开频次高，这些特点使其成为各类资讯、娱乐化内容和休闲游戏生长的肥沃土壤。
微信小程序支持个人申请、企业注册，驻门槛更低。微信的社交属性带来了巨大流量与十亿月活。但在利用社交关系快速取得大量用户之后，留存和回访率又成了小程序最大的“短板”。
阿拉丁公布数据显示，微信小程序已超100万个，开发商更是如蒲公英般，遍地开花。所以微信小程序无疑成为中小企业和零售商最好的选择。截止2018年6月底，微信小程序的数量已经突破百万，小程序的日活页大幅增长到了 2.7 亿，相对于1月初微信官方公布的数据58万个小程序几乎翻了一倍。按照此趋势，到2018年年底，小程序将增长到200万之巨。

二、支付宝小程序 （2017年9月20日正式上线）

支付宝小程序主打营销、信用、风控、金融等差异化能力与优势。致力于走全方位赋能商业的路径,目前主要面向企业级开发者。仅支持企业注册，不支持个人申请。
支付宝本身就具有极强的工具属性，也非常符合符合张小龙口中“即用即走”的标准。蚂蚁金服在今年接连开放出诸多能力，小程序背靠支付宝大数据支持，支付简单化。支付宝的一个特色的模块就是信用市场，小程序应用标准通过支付宝用户的芝麻信用分，为商家提供消费者消费能力的基础信息，同样通过支付宝的信用，为消费者省去很多类似押金的步骤。
为了降低开发门槛，支付宝与微信有着近似的小程序开发框架与产品体验；但在应用场景与发展方向上，支付宝小程序在未来方向并不在不会涉及社交、内容等。在支付宝小程序上实现服务台能力，着重于联动蚂蚁金服保险、安全等能力在出行、水电燃、医疗等领域实现异地归还、助力商家营销等。
由支付宝小程序行业明细来看，目前支付宝政务服务已经覆盖社会保障、交通、警务、民政、旅游类、税务、气象环保等7大类56项服务。结合支付宝本身、或者其他小程序提供的服务结合，就展示出一套结合门店+生活+小程序+服务+整体卡包小程序生态模式。

三、智能小程序 （2018年7月4日正式上线）

百度天然就是用户各类需求的入口，智能小程序与搜索结果自然融合更直观，可以让用户直接使用。反观微信、支付宝小程序，都需要用户在众多小程序中进行筛选，从而间接导致了许多同质的小程序被淹没。
百度强调的是开放生态，主打AI和流量的王牌。百度智能小程序具有入口自然，流量质量高等优势，支持企业、政府、媒体和其他组织申请。百度职能小程序的生态体系对于开发者是十分友好的，开放的110多项AI技术可以让开发者轻松获得AI能力。智能小程序是开放的生态，不仅可以运行于百度的平台，更可以运行于外部App上，开发者一次开发就可以实现多端运行，这和微信小程的封闭生态有着本质的区别。
“体验、流量、智能、开放”是百度智能小程序的四大核心理念。
目前，携程、苏宁易购、唯品会、同程、春雨医生、爱奇艺、优信二手车、查违章等在内的近百家企业成为首批加入智能小程序生态的合作伙伴，并将陆续推出各自的智能小程序。百度APP中进入爱奇艺小程序观看视频，一律没有视频广告。

从目前趋势来看微信还是占领领先地位的。但是，多种小程序之间不可唯流量论，小程序是基于商业和服务去开发的，最终还是要回归商业本质。毕竟小程序天然是一个寄生体，是寄生在微信、支付宝等平台用于服务用户、拓展渠道、探索更多应用场景的重要载体。这意味着，小程序必须与平台的属性特点相契合。小程序承载的是移动互联网时代，便捷生活发展的方向。

四、今日头条小程序

目前开放的小程序入口，只针对 Android 手机，且暂时只对部分公司开放。
5大特点：

	1.可通过搜索关键词进入小程序；
    2.可在不同页面转发到微头条；
    3.微信小程序在同意授权之后，只能通过删除小程序来取消这些信息的授权。今日头条区别于微信，支持随时进行授权设置和权限修改，目前授权主要有头像、昵称和定位等信息。
    4.可使用支付宝支付；
    5.小程序页面可独立于今日头条，与其他小程序无异。

预测未来今日头条小程序发展方向会以内容电商变现和支付领域变现为主。以「猫眼电影」为例，如果用户在今日头条里写了一篇影评，以前并没有很好的转化方式，现在如果在这篇内容里接入「猫眼电影」小程序，用户看完文章后即可跳转到该电影的购买页面，完成购买。

三、技术特点

从技术文档上看，三种小程序的组件都包含视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、开放能力八种类型。API大致分为网络、媒体、文件、数据缓存、位置、设备、界面、开放接口、更新、Worker、数据上报、基础、定时器、地图、WXML、画布、系统、第三方平台、转发、路由、调试。不同平台的提供其小程序的API会因平台性质的不同而有所差异。（三种小程序都有输入框bug，即input聚焦时的抖动）

一、微信小程序

微信支付支持人脸识别，小程序之间的跳转，微信运动（30天之内的步数）。获取用户收货地址，可以调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。同一个公众号下关联的10个同主体小程序和3个非同主体小程序之间，可以调用接口直接相互跳转。小程序之间跳转的功能，使得独立的微信小程序不再是孤岛。

二、支付宝小程序

支付宝小程序的核心竞争力在于支付，小程序提供了跳转支付宝卡包、芝麻认证、信用借还等开放接口。这也将成为小程序开发者选择支付宝小程序的主要原因。
相对于微信小程序，支付宝小程序在底层采用不同的技术选型，在组件上采用了此前成熟的Ant Design 设计，在开放API上则面向自身特色能力来封装，在框架方面采用开源的React/webpack等技术为基础，结合了支付宝自身的多年技术沉淀来实现。
但是从目录结构上来看与微信小程序基本一致，几乎没有什么太大的学习成本。甚至连最大页面跳转深度为5这样的细节规则都与微信小程序同出一辙。目前能到看到的最大区别也只是一些命名规范上的区别，比如将“wx”换掉。如果你连这些都不想做，还可以到支付宝小程序的社区来下载一款“微信小程序转支付宝小程序命令行工具”，批量帮你进行处理。
支付宝小程序创建时的五大坑https://blog.csdn.net/rolan1993/article/details/78060779

微信小程序转支付宝小程序方法：
npm install wx-alipay -g
wxToalipay --src={{小程序源码目录}} --dest={{支付宝小程序目录,可缺省}}
点击回车后就可将微信小程序转换为支付宝小程序，

注：需要注意的是在转换完成后，由于不完善之处，仍有很多地方需要我们自己去进行修改

例如：组件化的使用。需要转换为支付宝的小程序api
选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。
在支付宝小程序的样式中特殊的地方就是：

※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用；

※ 不能使用属性选择器，例如,以下写法不被支持： //这种选择器不被支持 input[name=“title”]{
color: test; }

三、智能小程序

接入AI能力，为开发者提供身份证的文字识别，自动化、智能化的文本审核，语音合成（将文本转换为可以播放的mp3文件），11种类型的图像审核，通用物体及场景识别的图像识别功能。
为开发者提供对接百度搜索生态的能力，为智能小程序导入搜索流量。当用户在百度 App（10.9.5或以上版本）中搜索对应的智能小程序的相关内容时，小程序的相关页面会通过检索，出现在搜索结果页中。开发者只需要进行简单的配置工作，就可以使自己开发的智能小程序被百度搜索收录、分发。

四、今日头条小程序
*今日头条小程序平台和官方文档还未发布。

四、具体对比分析

（一）单个页面文件结构

小程序	HTML（结构）	JavaScript（逻辑）	CSS（样式表）	JSON（配置）
微信小程序	wxml	js	wxss	json
支付宝小程序	axml	js	acss	json
支付宝小程序	swan	js	css	json

ACSS 表示的是原子化 CSS（Atomic CSS），是 Yahoo 提出来的一种独特的 CSS 代码组织方式。ACSS 的独特性在于它挑战了传统意义上编写 CSS 的最佳实践–关注点分离原则。ACSS 认为关注点分离原则会导致冗余、繁琐和难以维护的 CSS 代码。

ACS 的原则是把 CSS 样式打散成尽可能小的部分，每个 CSS 类只对应一条样式规则，从而达到最大化的可复用性。ACSS 的好处在于所生成的 CSS 文件只包含必须的内容，而且冗余很少，可以减少 CSS 文件的尺寸，提高性能。另外 CSS 类所对应的样式规则是不变的，这使得在不同的项目和组件之间共享 CSS 变得很容易。

（二）小程序入口

1.微信小程序

微信内入口：发现、搜索栏、群聊、公众号文章、二维码等

2.智能小程序

百度APP入口：个人中心、搜索、信息流、百家号文章页、二维码等
百度系APP：百度贴吧、百度地图、百度网盘等
合作伙伴APP：58、哔哩哔哩等
平台入口：DUER OS、Apollo等

3.支付宝小程序

支付宝客户端：支付宝首页、应用中心、消息中心、小程序市场、生活号、口碑店铺页、卡券包

3.今日头条小程序

今日头条APP入口：搜索关键词

三大巨头小程序入口的设置，可以看出巨头们对于小程序投入的力度。相对来说，微信非常看重小程序这一块，而支付宝和百度则是把它看作是辅助功能的存在，各有各的好处，各有各的出发点，只要是便于用户使用，都会有市场。而今日头条小程序还处于发展初期，各方面还未完善。

（三）小程序分享方式

1.微信小程序

只支持微信好友和微信群的分享，不支持朋友圈分享

2.支付宝小程序

支持分享到支付宝动态、支付宝好友、微信、QQ、钉钉、新浪微博，支持生成
二维码、吱口令

3.智能小程序

支持转发到百度APP的动态、微信、朋友圈分享

4.今日头条小程序

今日头条小程序仅支持分享到微头条

（四）小程序单位 UI屏幕适配

1.微信小程序
rpx： 1px=2rp，屏幕宽度750rpx

2.支付宝小程序
rpx： 1px=2rp，屏幕宽度750rpx

3.智能小程序
rem： 1px=0.1rem，屏幕宽度3.75rem

（五）直播

1.微信小程序
暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。并且，仅限于企业小程序。

一级类目	二级类目
社交	直播
教育	在线教育
医疗	互联网医院，公立医院
政务民生	所有二级类目
金融	基金、信托、保险、银行、证券/期货、非金融机构自营小额贷款、征信业务、消费金融

2.支付宝小程序
暂不支持

3.智能小程序
限制较少，灵活完备

（六）真机调试

1.微信小程序

微信公众平台上将微信账号绑定为开发者，保证手机和开发者工具的微信账号都有当前小程序的开发者权限。在微信开发者工具上生成真机调试或预览二维码，用手机微信>扫一扫，即可预览。

2.支付宝小程序

支付宝扫一扫

3.智能小程序

可以选择使用开发者工具和控制台两种方式，进行真机调试。

1）现在官网的专用的真机调试安装包，安装针对智能小程序调试的百度 App。
2）手机设置中，设置>关于手机>版本号 2）手机设置中，设置>关于手机>版本号
连续点击五次进入开发者模式，开启 开发者模式>USB调试（类似于安卓APP的开发）。
3）返回手机桌面，可以看到百度
App显示为智能小程序，进入APP首页下拉进入智能小程序。

（七）支付

1.微信小程序

仅限于微信支付（支持人脸识别验证身份）

2.智能小程序

百度收银台，聚合了主流的百度钱包、微信、支付宝、网银等多种支付方式，方便开发者一站式快速接入多种支付渠道。

3.支付宝小程序

直接接入支付宝，其安全性更受用户信赖。

4.今日头条小程序

可使用支付宝支付

三种小程序接入支付的计费方式都是按单笔计算。

（八）小程序审核（仅个人经验）

1.微信小程序
审核迅速，对页面内容和功能要求不高，一般两个小时左右过审
2.支付宝小程序
支付宝审核十分严格，会对程序进行严格的功能测试和性能测试
5.智能小程序
一般需要半个工作日左右

（九）数据绑定 （简单绑定 条件渲染 列表渲染）

1.微信小程序：

src="{{userInfo.avatarUrl}}"

wx:if="{{isShow}}" 

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

2.支付宝小程序

src="{{userInfo.avatarUrl}}"

a:if="{{isShow}}"

3.智能小程序：

src="{{userInfo.avatarUrl}}"

s-if="isShow" 

<view s-for="p in persons">
	{{p.name}}
</view>

（十）事件绑定

1.微信小程序：

<view bindtap="add"> {{count}} </view>

2.支付宝小程序

<view onTap="add"> {{count}} </view>

3.智能小程序：

<view bind:tap="add">{{count}}</view>

关于小程序的一些整理。有些内容可能不准确，望指正！！！