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

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

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

分享要点：

1、发展历程

• 发展历程
• 核心数据
• 小程序生态

2、业务价值

• 与web区别
• 三大价值

3、技术解析

• 小程序原理
• 小程序语法
• 实现番茄时钟

4、相关拓展

• 跨端框架介绍
• 跨端框架原理

一、发展历程

发展历程、核心数据、小程序生态

二、业务价值

1、与web区别

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

2、三大价值

1. 渠道价值
2. 业务探索价值
3. 数字升级价值

三、技术解析

1、小程序原理

WebView：可以简单的理解为app内置的浏览器，可以在app内展示网页。

JSBridge：js和native代码之间的桥梁，让两者能够沟相互调用。如代码注入、url拦截等。

常见问题：

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

特点：

• 开发门槛低 HTML+ JS + CSS
• 接近原生的使用体验 资源加载＋渲染＋页面切换
• 能够保证安全可控 独立JS沙箱

2、小程序语法：

TTML：

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

JS：

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

TTSS:

 view{
     background-color:"red";
     width:750rpx;
 }

四、相关拓展

1、跨端框架

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

常见框架：

2、跨端框架原理

①编译时方案：

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

②运行时方案：

• 虚拟DOM
• Template组件

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