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

46 阅读2分钟

微信图片_20220727143617.jpg

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

前言

在日常生活中,我们接触到了五花八门的小程序。那么什么是小程序呢?小程序有什么技术要求呢?今天,本小白就带大家走进小程序的世界吧!

什么是小程序

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序体现了“用完即走”的理念。
站在我个人层面理解小程序,小程序更像是一种“轻量型”APP。它的学习成本不大,上手难度较低,推广成本也比一般APP低,多应用于app场景拓展

图为本人完成的小程序界面截图以及代码片段

屏幕截图 2022-07-26 121423.png

微信图片_20220818215844.png

微信图片_20220820102903.png

微信图片_20220820103754.png

#  发展历程 - 17-18年:发展初期,18年微信小程序正式发布 - 18-19年:小程序发展进入“爆发式”增长阶段 - 2020年:疫情催生小程序加速应用 # 小程序与web的区别 - 有着固定的语法及统一的管理
  • 平台能够控制各个入口
  • 小程序基于特殊的架构,在流畅度上比web更好,有更优秀的跳转体验

小程序的业务价值

小程序主要有三种业务价值:渠道价值、业务探索价值、数字升级价值

  • 渠道价值:为其他场景导流

  • 业务探索价值:降低成本从而创造更多价值

  • 数字升级价值:线上+线下

小程序技术解析

要满足小程序的业务价值,同时符合低成本、轻量型、易上手的特点,小程序采用了第三方开发应用最简单最方便的方式:WebView+JSBridge(网页+沟通桥梁),让js代码和native代码相互沟通

小程序的要求

基于小程序技术解析,人们对小程序主要有三大要求:开发门槛低、接近原生的使用体验、能够保证安全可控。

  • 开发门槛低:大部分开发者能够使用,且学习成本低(三件套)

  • 接近原生的使用体验:资源加载+渲染+页面切换(多webview模式)

  • 安全管控:独立js沙箱

小程序语法

以字节小程序为例,小程序的语法是在“三件套”的基础上删改、补充的

  • TTML:对应web中的html

  • JS:对应web中的js

  • TTSS:对应web中的css

1661050921(1).png

从图中发现,小程序的一个页面中还会有json文件。其实除了这三个基本语法外,小程序还会有json(控制tabbar、头部背景颜色等功能)文件。

1661051070(1).png

小结

今天的小程序技术分享就到这里啦!~有什么可以补充的、或者有不对的地方,欢迎留言指出哦!