小程序理解

这是我参与「第四届青训营 」笔记创作活动的的第3天

2017年微信小程序诞生，最近几年小程序数量增长迅速，一定程度上导致全网的app数量减少

小程序的业务价值

小程序有渠道价值，业务探索价值和数字升级价值

技术部分

目前第三方应用最简单最方便的方式WebView+JSBridge；且使用的是类HTML+CSS+JS的语言，上手非常简单

番茄时钟小程序的例子

<view class="container">
    <view class="clock">
        {{timeText}}
    </view>
    <button tt:if = "{{runnning}}" class = "button" bindtap = "onReset"> 重置 </button>
    <button tt:else class="button" bindtap = "onStart"> 开始 </button>
</view>

const DEFAULT_TIME = 25*60;
function formatTime(time) {
    const minutes = Math.floor(time/60);
    const seconds = time%60;
    const mText = '0${minutes}'.slice(-2);
    const sText = '0${seconds}'.slice(-2);
    return '${mText} : ${sText}'
}

小程序的对比

项目	微信小程序	百度小程序	支付小程序	快应用
命名空间	wx	swan	my	无,需要 require 它提供的所有接口按 wx 形式封装
if 指令	wx:if	s-if	a:if	if
for 指令	wx:for wx:for-index wx:for-item	将wx:改成s-	将wx:改成a:	for="(personIndex, personItem) in list"
key 指令	wx:key	s-key	key	tid
<block>容器标签	存在	存在	存在	存在
事件绑定	bind/catch[事件名全小写]="回调名"	bind/catch[事件名全小写]="回调名"	on/catch[事件名驼峰]="回调名"	on[事件名全小写]="回调名/回调(arguments)"
{{}}插值是否支持函数	不支持	不支持	不支持	支持
模块中使用脚本	<wxs />	<filter />	<import-sjs />	<script />
模板文件后缀	wxml	swan	axml	没有独立的文件 放 template 中
样式文件后缀	wxss	css	acss	没有独立的文件 放 style 中，不需要处理 less,sass
template 包含 template	支持	不支持循环中使用 template	支持	未知
template 的 data 是否支持...	{{...aaa}}	{{{...aaa}}} 三个括号	{{...aaa}}	只能一个个数据分开写
缺省的组件(视图容器)	movable-view、cover-view		movable-view、cover-view	未知
缺省的组件(基础内容)	rich-text			未知
缺省的组件(导航)	functional-page-navigator			未知
缺省的组件(媒体组件)	audio、video、camera、live-player、live-pusher			未知
open-data			不支持	未知
样式单位 rpx 支持情况	支持	不支持（用 rem，最新的基础库版本已经支持）	支持	不支持

Referenced from qunarcorp.github.io