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

Azure_
141 阅读6分钟

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

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

发展历程

时间线

2017

  • 1月

    • 微信小程序正式发布
    • 小程序全面进入用户的日常生活工作

  • 3月

    • 小品程序面向个人开发者开放
    • 自此，小程序数量进入爆发期

  • 4月

    • 公众平台第三方平台宣布支持小程序
    • 小程序进入“0”门槛开发时代
    • 微信开放名为【小程序码】的新型图形码
    • 小程序应用场景更具想象空间

  • 9月

    • 支付宝小程序面向用户全面公测
    • 小程序成为互联网下半场竞争的关键

2018

  • 1月

    • 微信小程序实现直接打开APP能力
    • 小程序让APP不再是孤岛

  • 3月

    • 微信小程序插件功能开放
    • 小程序生态进一步开放

  • 4月

    • 百度推出小程序
    • BAT已全部加入小程序生态圈

  • 9月

    • “小程序+云开发”正式上线
    • QQ小程序内测上线
    • 今日头条小程序平台正式发布
    • 淘宝小程序“轻店铺”开始内测
    • “巨头”加速布局小程序生态

2019

  • 1月

    • 微信更新7.0版本，主页下拉出现小程序桌面
    • 小程序“操作系统“潜质初现

  • 3月

    • 小程序纳入腾讯最高战略
    • 微信好物圈上线
    • 腾讯直播内测
    • 小程序+直播为电商市场再添变数

  • 4月

    • 微信开放全量搜索
    • 微信公众号可自由挂在小程序
    • 海量流量”开闸“，加速小程序对各市场渗透

  • 5月

    • 腾讯推出”生态车联网“解决方案，小程序迎来车载版本
    • 小程序助力”万物互联“全面落地

  • 9月

    • 微信小程序开放”视频前贴广告“和”视频广告“组件
    • 微信小程序嗑内嵌腾讯直播
    • 小程序商业化基础初步完成

  • 10月

    • 滴滴在微信入口小程序化，”十二宫格“全部升级为小程序，
    • 京喜完成微信一级入口切换
    • 小程序成为主流流量承载方式

  • 11月

    • 微信入口上线”智慧零售“小程序
    • 小程序开发包总包上限升至12M
    • 基础能力升级，小程序应用领域充满想象空间

  • 12月

    • 12月20日全球小程序生态大会：阿拉丁创始人史文禄定义小程序互联网时代到来

2020

  • 2月

    • 实时疫情地图小程序
    • 政务类疫情小程序上线
    • 疫情防控类小程序
    • 微信官方正式宣布，小程序直播能力启动公测
    • 疫情催生小程序加速应用

  • 3月

    • 微信全网开通小程序直播，并且所有小程序都可以申请直播
    • 微信PC端新功能小程序面板上线
    • 微信开启视频号灰度测试
    • 小程序+直播功能打造商家线上经营闭环，完成快速转型

  • 4月

    • 复工复产就业类小程序纷纷上线
    • 模板消息正式下线，订阅消息正式上线
    • 小程序服务用户功能更完善

  • 7月

    • 微信视频号改版升级
    • 微信品牌小程序正式开启公测
    • 微信小商店全量上线
    • 微信灰度发布”购物直播“功能
    • 强化小程序搜索能力，提升社交电商商业应用功能

  • 9月

    • “视频号推广”小程序上线
    • 视频号接入搜一搜
    • 微信是哦i你好激发小程序商业价值

  • 10月

    • 微信视频号开始内测直播间，并打通小商店，开放30分钟以内市场视频序
    • 视频号+直播+小程序商业闭环逐步成熟

  • 11月

    • 朋友圈只当视频号直播
    • 快手小程序平台开启内测
    • 互联网巨头全面逐鹿小程序战场

  • 12月

    • 视频号直播推流
    • 视频号直播可跳转小程序
    • 促进小程序电商的繁荣与发展

核心数据

image.png

小程序生态

image.png

业务价值

与Web的区别

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

三大价值

  1. 渠道价值

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

  2. 业务探索价值

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

  3. 数字升级价值

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

技术解析

小程序原理

第三方开发用最简单最方便的方式(WebView+JSBridge)

无网络情况下体验不佳？

网页切换体验不佳？

如何管控保证安全？

解决方案需要开发门槛低——>HTML+JS+CSS

接近原生使用体验——>资源加载+渲染+页面切换

能够保证安全可控——>独立JS沙箱

不操作DOM如何控制页面渲染——>DATA->根据数据处理DOM->页面

image.png

小程序语法

  • TTML image.png
  • JS image.png
  • TTSS image.png

相关拓展

跨端框架

解决问题

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

常见框架

image.png

跨端框架原理

编译时方案

编译时方案有个天然的缺陷，无法完全抹平差异，不论是React还是Vue等各种框架，他的用法都十分多样，而且会不断添加新的特性，而小程序本身却有很多限制，很多特性无法进行转换，所以就要给框架的书写代码的时候添加上很多限制，这就背离了我们的初衷，所以现在更多的方案是采用运行时方案

运行时方案
  • 虚拟DOM
  • Template组件

在一些场景下相比小程序原生语法性能会更差

总结

对于我们而言小程序更多的是直接上手开发，而忽略了对于它更深层次的学习，这节课简单介绍了关于跨端开发小程序的知识及原理，认识和了解小程序的业务产品价值，学习和掌握小程序相关技术原理，给了我们一个深入学习的指引，也为本届字节青训的课程画上了句号。

avatar
文章
阅读
粉丝