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

zayyo
134 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 16天

本文分4个部分为大家讲解

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

一、发展历程

image.png

image.png

image.png

核心数据

image.png

小程序生态

image.png

二、业务价值

与 Web 区别

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

三大价值

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

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

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

三、技术解析

小程序原理

定义：

第三方开发应用最简单最方便的方式（WebView + JSBridge）

缺点：

  • 无网络的情况体验不佳问题
  • 网页切换体验不佳问题
  • 如何管控保证安全问题

特点

  1. 开发门槛低：HTML + CSS + JS

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

  3. 安全管控（JSCore）：独立 JS 沙箱，禁用开发者使用JavaScript来操作 dom 的。

既然我们不能操作DOM，那么我们如何来控制页面渲染呢？

使用框架，让框架来帮我们渲染页面，开发者只需要操作数据即可

小程序的实际架构 image.png

小程序语法

image.png

image.png

image.png

如何实现一个番茄时钟

image.png

代码示例：

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
        })
    }
})

四、相关拓展

跨端框架

主要解决的问题

  • 复杂应用构建
  • 一次开发可以跨多端

image.png

跨端框架的原理

编译时

image.png

image.png Vue是如何转变为TTML？ 代码示例：

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

缺陷：

编译时方案有个天然的缺陷，无法完全抹平差异，没有办法完全磨平React和 Vue 的框架语法和小程序语法的差异

原因

React和 Vue ,它们的用法是十分多祥的，而且会随着它们新版本的发布不断添加新的特性，而小程序本身是有很多语法的限制的，那么在转换过程中，它没有办法做到所有特性都进行转换，所以写的时候就会给框架加上很多限制，这背离了我们的初衷。

所以大部分的方案都是采用运行时的方案

运行时

运行时的方案主要依赖于两个部分，一个是虚拟 DOM，一个是 template 组件。

image.png

缺点：在一些场景下相比小程序原生语法性能会更差，例如长列表，针对，比较差的地方我们可以采用混合编程来弥补缺点

总结: 学完这节让我对小程序有了比较清晰的概念，更加了解小程序的编写和实现思路。

avatar
文章
阅读
粉丝