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

本堂课重点内容：

发展历程：发展历程、核心数据、小程序生态
业务价值：与web区别、三大价值
技术解析：小程序原理、小程序语法、实现番茄时钟案例
相关拓展：跨端框架介绍、跨端框架原理

详细知识点介绍：

发展历程

让我们先来看一组数据

（数据来源自阿拉丁）

2017年1月9日，微信正式发布的小程序。在这一点上，微信团队花了一年多的时间终于出现了。选举于1月9日公布，因为10年前的今天( 2007年1月9日)，苹果公司发布了iPhone。iphone的发布标志着智能手机的诞生，而applet的发布标志着移动开发的又一片蓝海。

2017年3月27日，一个小程序增加了7个新功能:个人开发者开放、公众号自定义菜单跳小程序、公众号模板消息可打开相关小程序、模板消息跳小程序、绑定时可发送模板消息、兼容线下二维码、App分享用小程序打开。这些能力的更新扩展了小程序的使用，扩大了小程序的使用，并标记了小程序，这些程序已经成为水和电的移动开发领域以及公众。每件新事物的发展都需要团队的努力，小程序的发展也不例外。

2017年4月20日，公众号可以关联不同主体的小程序，这将更利于小程序的营销导流，将公众号和小程序引相引流得以失现。

2017年5月10日，微信发布新版本，支持附近小程序，用户可搜索附近5公里范围内的小程序。此举迈出了线上+线下流量整合的重要一步。

2017年5月19日，小程序页面支持“转发"功能，可转发小程序页面给好友或群。

2017年6月21日，小程序之间可以互相跳转;

......

核心数据

（数据来源自阿拉丁）

可以看出，到2019年直至2020年，全网小程序数量已经远远超过了全网APP数量，一年之内小程序数量暴增，可见小程序在平日常使用中的依赖度是很高的。

小程序生态

（数据来源自阿拉丁）

小程序自得到大多数人们的认可后，市场处于猛增式发展，多数厂家也逐渐推出了属于自己的小程序开发体系如QQ小程序、支付宝小程序、头条小程序等等。

业务价值

与WEB的区别

有着固定的语法以及统一的版本管理,平台可以更方便的进行审核
平台能够控制各个入口，如二维码，文章内嵌，端内分享。入口上也能带来更好的用户体验
小程序基于特殊的架构，在流畅度上比WEB更好，有更优秀的跳转体验

三大价值

渠道价值
- 由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流,如美团和美团优选微信小程序带来的流量占比分别是40%和80%
业务探索价值
- 相比原生APP来说，小程序的开发难度和成本都降低的很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探索新的业务价值
数字升级价值
- 线下到线上如何做?从轻消费类的快餐、茶饮到地产汽车等大宗消费，小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广。

技术解析

小程序原理

第三方开发应用最简单最方便的方式（WebView + JSBridge）
开发门槛低（HTML + JS + CSS）
接近原生的使用体验（资源加载 + 渲染 + 页面切换）
能够保证安全可控（独立 JS 沙箱）

小程序语法（以微信小程序为例）

<view
    wx:for="{{list}}"
    wx:if="isOpen"
    bindtap="onTap"
/>

Page({
    data:{
        list: ["a","b","c"],
        isOpen: true
    }
    onTap: function() {
        console.log('tap me!')
    }
})

view {
    background-color: "red";
    width: 750rpx;
}

实现番茄时钟案例（以微信小程序为例）

<view class="container">
    <view class="clock">
        {{ timeText }}
    </view>
    <button wx:if="{{ running }}" class="button" bindtap="onReset">重置</button>
    <button wx: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}`
}

Page({
    data:{
        timeText: formatTime(DEFAULT_TIME),
        running: false,
    },
    setTime: function () {
        this.timer = setInterval(() => {
            this.time = this.time - 1;
            if (this.time < 0) {
                clearInterval(this.timer);
                return;
            }
            this.setData({
                timeText: formateTime(this.time),
            })
        },1000)
    },
    onStart: function () {
        if (!this.timer) {
            this.time = DEFAULT_TIME
            this.setTime()
            this.setData({
                running: true
            })
        }
    },
    onReset: function () {
        clearInterval(this.timer)
        this.timer = null
        this.time = DEFAULT_TIME
        this.setData({
            timeText: formatTime(this.time),
            running: false
        })
    }
})

(无法展示视频演示效果，截图代替)

课后个人总结：

如今小程序已经遍布我们日常生活，给我们带来了极大地便利性，且现在的小程序开发市场仍在持续扩张，所以我认为在掌握前端的基础学习外，编写小程序技术也是个不错的学习之路，在一些跨端框架上，也集成了像Vue语法或React语法等，极大地减少了开发者的额外学习成本，我们也可以打造一个属于自己的专属小程序平台，让我们一起动起来吧！

小程序技术全解 | 青训营笔记

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

本堂课重点内容：

详细知识点介绍：

发展历程

业务价值

技术解析

相关拓展

课后个人总结：