终于到了我超期待的一门课~~

课程目标:

  • 认识和了解小程序的业务产品价值
  • 学习和掌握小程序相关技术原理

# 小程序的发展历程

# 发展历程

image.png

image.png

# 核心数据

image.png

# 小程序生态

image.png

# 业务价值

# 与 WEB 的区别

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

# 三大价值

# 渠道价值

  • 便捷导流

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

# 业务探索价值

  • 快速试错

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

# 数字升级价值

  • 容错空间大,覆盖范围广

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

# 小程序技术解析

# 小程序原理

第三方开发应用最简单最方便的方式?

  • WebView + JSBridge
    • WebView:移动端提供的运行 JavaScript 的环境,相当于 App 内的浏览器页面
    • JSBridge:顾名思义,作为桥梁开发者可以调用 App 本身的一些 api

几个问题:

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

而小程序通过以下方式,解决了这些问题:

  • 开发门槛低 ——HTML+JS+CSS
  • 接近原生的使用体验 —— 资源加载 + 渲染 + 页面切换
  • 安全管控 —— 独立 JS 沙箱:隔绝操作 dom 的方式
    • 不操作 DOM 如何控制页面渲染?
    • Data -> 根据数据处理 DOM -> 页面

image.png

# 小程序语法

image.png

如图:比如字节小程序是 TTML/JS/TTSS,而微信小程序则是 WXML/JS/WXSS,对应 HTML/JS/CSS

# 实现简易番茄时钟

下面试一试在微信小程序上实现如图一个番茄钟~(不同的小程序语法上大同小异)

代码片段

番茄钟.gif

# 编写 tomatoClock.wxml(html)

简单的用 html 写个界面先~

<view class="container">
  <view class="clock"></view>
  <button wx:if="" class="button" bindtap="onReset">重置</button>
  <button wx:else class="button" bindtap="onStart">开始</button>
</view>

实现页面与 js 中数据的双向绑定(该数据更新时页面也会进行渲染~)

# 编写 tomatoClock.js

编写 js 进行事件函数、该页面数据的绑定

// pages/apply/tomatoClock/tomatoClock.js
const DEFAULT_TIME = 25*60; // 25 分钟
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;
  const mText = `0${minutes}`.slice(-2);
  const sText = `0${seconds}`.slice(-2);
  return `${mText} : ${sText}`;
}

从后往前截断实现前导 0 补全,就可以展示两位数时间(学到了!)

然后是事件的处理,setTimer 函数设置一个间隔 1s 的定时器,设置初始 time 为默认时间,每隔 1s 使得当前 time-1 (同时页面也会刷新),onStart 事件在开始时设置定时器并置 running 为 true,onReset 事件在重置时时清除定时器,设置 running 为 false 并将 timeText 设置为默认时间

Page({
  /**
   * 页面的初始数据
   */
  data: {
    timeText: formatTime(DEFAULT_TIME),
    running: false
  },
  setTimer:function() {
    this.timer = setInterval(() => {
      this.time = this.time - 1;
      if(this.time < 0) {
        clearInterval(this.timer);
        return;
      }
      this.setData({
        timeText: formatTime(this.time)
      })
    }, 1000);
  },
  // 事件函数 开始时设置定时器并置 running 为 true
  onStart: function() {
    if(!this.timer) {
      this.time = DEFAULT_TIME;
      this.setTimer();
      this.setData({
        running: true
      })
    }
  },
  // 事件函数 重置时清除定时器,设置 running 为 false 并将 timeText 设置为默认时间
  onReset: function() {
    clearInterval(this.timer);
    this.timer = null;
    this.time = DEFAULT_TIME;
    this.setData({
      timeText: formatTime(DEFAULT_TIME),
      running: false
    });
  },
  //else 生命周期函数(监听页面加载、渲染等)
})

# 编写一点点 wxss(css)

可以在 app.wxss 中,实现全局通用的 css 如 container 等

/**app.wxss**/
page { background-color: #97ABFF; }
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 200rpx 0;
  box-sizing: border-box;
  background-color: #97ABFF;  
}

在页面自己的 css 里 (index.wxss),写该页面所需的 css~

/**index.wxss**/
.clock {
  line-height: 400rpx;
  width: 400rpx;
  text-align: center;
  border-radius: 50%;
  border: 5px solid white;
  color: white;
  font-size: 50px;
  font-weight: bold;
}
.button {
  margin-top: 200rpx;
  text-align: center;
  border-radius: 10px;
  border: 3px solid white; 
  background-color: transparent;
  font-size: 25px;
  color: white;
  padding: 5px 10px;
}

# 相关拓展

什么是跨端框架?

  • 复杂应用构建
  • 一次开发可以跨多端(微信小程序、各系小程序等等)

# 跨端框架介绍

image.png

# 跨端框架原理

# 编译时

# AST 语法树

抽象语法树 - 维基百科

计算机科学中,抽象语法树Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。之所以说语法是 “抽象” 的,是因为这里的语法并不会表示出真实语法中出现的每个细节。比如,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现;而类似于 if-condition-then 这样的条件跳转语句,可以使用带有三个分支的节点来表示。

和抽象语法树相对的是具体语法树(通常称作分析树)。一般的,在源代码的翻译和编译过程中,语法分析器创建出分析树,然后从分析树生成 AST。一旦 AST 被创建出来,在后续的处理过程中,比如语义分析阶段,会添加一些信息。

image.png

解析 -> 生成 AST 语法树 -> 生成页面

image.png

如:

<View>{foo ? <View /> : <Text />}</View>

-> 转化为字节小程序的语法

<view><block tt: if={foo}><view /></block><block tt:else><text /></block></view>

天然缺陷:无法完全抹平差异

  • 小程序本身是有很多限制的
  • 所以大部分方案都是运行时方案

# 运行时

# 虚拟 DOM

本质为 js 中的一个对象,有很多 dom 中的属性值标签等,通过这个对象可以生成我们的实际 DOM

# Template 组件

小程序中提供的动态生成的模板。

image.png

# 运行时结构

image.png

  • 运行时的方案也不是完美的
  • 在一些场景下相比原生小程序的语法性能会更差
  • 大部分场景下都可!

# 总结感想

这节课大致讲解了小程序的发展历程和技术解析,实现了一个简易的番茄钟小程序~

本文引用的大部分内容来自张晓伟老师的课