青訓營 |「小程序技術全解」筆記

終於到了我超期待的一門課～～

課程目標：

認識和了解小程式的業務產品價值
學習和掌握小程式相關技術原理

小程式的發展歷程#

發展歷程#

核心數據#

小程式生態#

業務價值#

與 WEB 的區別#

有著固定的語法以及統一的版本管理，平台可以更方便的進行審核
平台能夠控制各個入口，如二維碼，文章內嵌，端內分享。入口上也能帶來更好的用戶體驗
小程式基於特殊的架構，在流暢度上比 WEB 更好，有更優秀的跳轉體驗

三大價值#

渠道價值#

便捷導流

由於小程式的便捷性，依托於超級平台，小程式能夠充分為很多場景導流，如美團和美團優選微信小程式帶來的流量占比分別是 40% 和 80%

業務探索價值#

快速試錯

相比原生 APP 來說，小程式的開發難度和成本都降低的很多，這就創造了很多場景開發者能夠用小程式來快速試錯，不斷探索新的業務價值

數字升級價值#

容錯空間大，覆蓋範圍廣

線下到線上如何做？從輕消費類的快餐、茶飲到地產汽車等大宗消費，小程式都展示了良好的容錯空間。線下場景的小程式覆蓋範圍很廣。

小程式技術解析#

小程式原理#

第三方開發應用最簡單最方便的方式？

WebView + JSBridge
- WebView：移動端提供的運行 JavaScript 的環境，相當於 App 內的瀏覽器頁面
- JSBridge：顧名思義，作為橋樑開發者可以調用 App 本身的一些 api

幾個問題：

無網絡的情況體驗不佳
網頁切換體驗不佳
如何管控保證安全

而小程式通過以下方式，解決了這些問題：

開發門檻低 ——HTML+JS+CSS
接近原生的使用體驗 —— 資源加載 + 渲染 + 頁面切換
安全管控 —— 獨立 JS 沙箱：隔絕操作 dom 的方式
- 不操作 DOM 如何控制頁面渲染？
- Data -> 根據數據處理 DOM -> 頁面

小程式語法#

如圖：比如字節小程式是 TTML/JS/TTSS，而微信小程式則是 WXML/JS/WXSS，對應 HTML/JS/CSS

實現簡易番茄時鐘#

下面試一試在微信小程式上實現如圖一個番茄鐘～（不同的小程式語法上大同小異）

代碼片段

番茄鐘.gif

編寫 tomatoClock.wxml（html）#

簡單的用 html 寫個界面先～

<view class="container">
  <view class="clock">{{timeText}}</view>
  <button wx:if="{{running}}" class="button" bindtap="onReset">重置</button>
  <button wx:else class="button" bindtap="onStart">開始</button>
</view>

{{timeText}} 實現頁面與 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;
}

跨端框架介紹#

跨端框架原理#

編譯時#

AST 語法樹#

抽象語法樹 - 維基百科

在計算機科學中，抽象語法樹（Abstract Syntax Tree，AST），或簡稱語法樹（Syntax tree），是源代碼語法結構的一種抽象表示。它以樹狀的形式表現編程語言的語法結構，樹上的每個節點都表示源代碼中的一種結構。之所以說語法是 “抽象” 的，是因為這裡的語法並不會表示出真實語法中出現的每個細節。比如，嵌套括號被隱含在樹的結構中，並沒有以節點的形式呈現；而類似於 if-condition-then 這樣的條件跳轉語句，可以使用帶有三個分支的節點來表示。

和抽象語法樹相對的是具體語法樹（通常稱作分析樹）。一般的，在源代碼的翻譯和編譯過程中，語法分析器創建出分析樹，然後從分析樹生成 AST。一旦 AST 被創建出來，在後續的處理過程中，比如語義分析階段，會添加一些信息。

解析 -> 生成 AST 語法樹 -> 生成頁面

如：

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

-> 轉化為字節小程式的語法

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

天然缺陷：無法完全抹平差異！

小程式本身是有很多限制的
所以大部分方案都是運行時方案

運行時#

虛擬 DOM#

本質為 js 中的一個對象，有很多 dom 中的屬性值標籤等，通過這個對象可以生成我們的實際 DOM

Template 組件#

小程式中提供的動態生成的模板。

運行時結構#

運行時的方案也不是完美的
在一些場景下相比原生小程式的語法性能會更差
大部分場景下都可！

總結感想#

這節課大致講解了小程式的發展歷程和技術解析，實現了一個簡易的番茄鐘小程式～

本文引用的大部分內容來自張曉偉老師的課

cos