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

小程序技术全解

一、小程序简述

发展历程

核心数据

小程序生态

二、业务价值

与 Web 区别

⭐ 有着固定的语法以及统一的版本管理,平台可以更方便的进行审核

⭐ 平台能够控制各个入口,如二维码，文章内嵌，端内分享。入口上也能带来更好的用户体验

⭐ 小程序基于特殊的架构，在流畅度上比比WEB更好，有更优秀的跳转体验

三大价值

⭐ 渠道价值：由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流，如美团和美团优选微信小程序带来的流量占比分别是40%和80%。

⭐ 业务探索价值：相比原生APP来说，小程序的开发难度和成本都降低的很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探素新的业务价值。

⭐ 数字升级价值：线下到线上如何做？从轻消费类的快餐、茶饮到地产汽车等大宗消费，小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广。

三、技术解析

小程序原理

WebView + JSBridge

⭐ Webview：我们可以简单理解为 app 内置的浏览器，我们可以在 app 内展示网页。

⭐ jsbridge：js 和 native 代码之间的桥梁，让两者能够沟通相互调用，实现 jsbridge 的方式有很多，如代码注入，url 拦截等，总之它的作用就是让 js 和 native 代码能够相互沟通和调用。

存在问题

⭐ 无网络的情况体验不佳

⭐ 网页切换体验不佳

⭐ 如何管控保证安全

如何解决

🙌 特点

⭐ 开发门槛低：HTML + CSS + JS

⭐ 接近原生的使用体验（多WebView）：资源加载 + 渲染 + 页面切换

⭐ 安全管控（JSCore）：独立 JS 沙箱，禁用了 dom 的 api 操作。

小程序语法

实现番茄时钟

TTML

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

JS

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,
    }，
    setTimer: function () {
        this.timer = setInterval(()=> {
            this.time = this.time - l;
            if (this.time < 0){
                clearInterval( this.timer );
                return;
            }
            this. setData({
                timeText: formatTime(this.time),
            })
        }，1000)
    }，
    // ...more
})

Page({
    // ...more
    onStart: function () {
        if (!this.timer) {
            this.time = DEFAULT_TIME
            this.setTimer()
            this.setData({
                running: true
            })
        }
    },
    onReset: function () {
        clearInterval(this.timer)
        this.timer = null
        this.time = DEFAULT_TIME
        this.setData({
            timeText: formatTime(this.time),
            running: false
        })
    }
})

四、相关拓展

跨段框架介绍

❓ 需要解决的问题

⭐ 复杂应用构建

⭐ 一次开发可以跨多端

原理

编译时

⭐ AST：抽象语法树（Abstract Synax Tree，AST）是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

👇 Vue -> TTML

// Vue
<View>(foo ? <View /> : <Text />)</View>
// TTML
<view><block tt:if=(foo)<view /></block><block tt:else<text /></block>)</view>

❌ 缺点：编译时方案有个天然的缺陷，无法完全抹平差异，不论是 React和 Vue 等各种框架，它们的用法都十分多祥，而且会不断添加新的特性，而小程序本身确有很多的限制，那么在转换过程中，很多特性没有办法进行转换，所以就要给框架的书写代码的时候加上很多限制，这背离了我们的初衷。

运行时

⭐ 运行时的方案能够实现主要依赖这两个部分，一个是虚拟 DOM，一个是 template 组件。

👇 setData 是小程序的性能瓶颈，运行时的方案，需要传递虚拟dom的各种属性到渲染层。

❌ 缺点：在一些场景下相比小程序原生语法性能会更差，比如长列表，当然现在针对各种场景出现了很多优化手段。

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