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

这是我参与「第四届青训营 」笔记创作活动的的第14天，整理一下之前课上关于小程序开发的知识。

一、本节课主要内容

1. 小程序技术的业务价值
2. 小程序技术解析
3. 相关拓展——跨端框架

二、详细知识点介绍

1. 小程序的业务价值

• 与 Web 的区别
  • 有着固定的语法以及统一的版本管理，平台可以更方便地进行审核
  • 平台能够控制每个入口，如二维码、文章内嵌、端内分享，入口上也能带来更好的用户体验
  • 小程序基于特殊的架构，在流畅度上比 Web 更好，有更优秀的跳转体验
• 三大价值
  • 渠道价值：由于小程序的便捷性，依托于超级平台，小程序能够充分地为很多场景导流
  • 业务探索价值：相比于原生 APP，小程序的开发难度和成本都较低
  • 数字升级价值：线下场景的小程序覆盖范围都很广

2. 技术解析

• 小程序原理：Webview + JSBridge

为了解决网页切换体验不佳的问题，采用多 Webview 的方式进行页面渲染

为了保证安全可控，采用逻辑层与渲染层分离的方式，避免开发者直接修改 DOM，而只需将页面数据通过 JS 传递给渲染层

• 小程序语法（以字节小程序为例）：TTML、JS、TTSS

<view
    tt:for="{{list}}"
    tt:if="{{isEnabled}}"
    bindtap="onTap"
/>

使用tt:for实现循环渲染

使用tt:if实现条件渲染

使用bind实现事件绑定

Page({
    data: {
        list: ["a", "b", "c"],
        isEnabled: true,
    },
    onTap() {
        console.log("tap")
    }
})

使用data定义响应式变量

view {
    background-color: "red";
}

3. 相关拓展

• 需要解决的问题：复杂应用构建、跨多端开发
• 跨端框架：remax、taro、uniapp等

三、课后个人总结

这节课上老师以字节小程序的语法为例讲解了小程序技术的基本原理和使用方法，随着各平台对于小程序技术的推进，小程序已经和 Web 一样逐渐成为了前端工程师必须掌握的技术，同时一些跨端框架的出现也为我们使用 Web 开发相关框架进行小程序开发提供了便利。

四、引用参考