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

这是我参与「第四届青训营 」笔记创作活动的第8天，今天将课上学习的小程序技术全解分享记录下来，本文从发展历程、业务价值、技术解析和相关拓展四个方面来展开。

发展历程

小程序最开始是由2017年3月腾讯最先发起的依附于微信的小型应用，同年9月支付宝宣布小程序开启公测，随之而来的18/19年 百度 字节等大厂纷纷加入小程序的阵营。在发展的过程中，小程序的数量与App相比呈现压倒性的优势，小程序在市场的价值也越来越得以证明。

业务价值

与传统的web区别

1. 有固定的语法和统一的版本管理平台，平台方可以更方便的审核，这相比于传统web端过于灵活的js机制来说，相对平台的管理更加安全。
2. 平台能够控制各个入口，如二维码，文章内嵌，端内分享。入口的统一也给用户带来更好的体验。
3. 小程序基于特殊的架构，在流畅度上比Web更好，有更优秀的跳转体验。

三大价值

1. 渠道价值。 小程序依赖超级平台，可以给各种场景进行引流，比如说美团优选小程序带来的流量就高达80%
2. 业务探索价值。 小程序开发相比app简单很多，试错成本低，可以不断进行新的业务探索。
3. 数字升级价值。 线下到线上的转移，让轻消费的快餐、茶饮到大宗消费场景，小程序的业务覆盖非常广。

技术解析

小程序原理

小程序出现之前，给第三方平台开放app的应用，使用的方法是webview+jsBridge,但是这种使用方法是有明显的缺陷。

1. 无网络的情况体验不佳
2. 网页切换体验不佳
3. 安全问题无法保证。js动态操纵dom可能导致审核时和上线时内容不同，对平台审核造成很大的困难

鉴于以上问题，小程序就具有明显的优势

1. 使用html css js为开发语言，开发门槛低。
2. 借助多个webview页面实现资源加载 渲染和页面切换来实现接近原生app的体验。
3. 使用独立的js沙箱保证安全问题，只让js操纵数据逻辑对dom禁止操作。这里不操作DOM控制页面的渲染是借鉴了MVVM框架的思想，将数据和视图分开，js操作数据，框架对数据进行渲染。

常用语法

这里以字节小程序为例演示

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

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

view {
width:750rpx
}