banner
cos

cos

愿热情永存，愿热爱不灭，愿生活无憾
github
tg_channel
bilibili
ホームアーカイブ关于♪歌单NFT作品集

青训营 |「小程序技術全解」ノート

#前端#小程序#JavaScript#青训营102
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
这篇文章介绍了小程序的发展历程和技术解析，并实现了一个简易的番茄钟小程序。小程序具有固定的语法和统一的版本管理，平台可以更方便地进行审核。小程序基于特殊的架构，在流畅度和跳转体验上优于Web。小程序的三大价值包括渠道价值、业务探索价值和数字升级价值。小程序的技术解析包括使用WebView和JSBridge作为第三方开发应用的方式，以及解决无网络和网页切换体验不佳的问题。小程序的语法类似于HTML、JS和CSS。最后，文章通过编写代码实现了一个简易的番茄钟小程序。

ついに私が超楽しみにしていた授業が始まりました～～

コースの目標：

  • ミニプログラムのビジネス製品価値を認識し理解する
  • ミニプログラムに関連する技術原理を学び習得する

ミニプログラムの発展過程#

発展過程#

image.png

image.png

コアデータ#

image.png

ミニプログラムエコシステム#

image.png

ビジネス価値#

WEB との違い#

  • 固定された文法と統一されたバージョン管理があり、プラットフォームはより便利に審査を行うことができる
  • プラットフォームは各入口を制御できる、例えば QR コード、記事内埋め込み、アプリ内共有。入口でもより良いユーザー体験を提供できる
  • ミニプログラムは特別なアーキテクチャに基づいており、流暢さにおいて WEB よりも優れており、より優れた遷移体験を提供する

三大価値#

チャネル価値#

  • 簡便な流入

ミニプログラムの利便性により、スーパー プラットフォームに依存し、ミニプログラムは多くのシーンに流入を十分に提供できる。例えば、美団と美団優選の WeChat ミニプログラムがもたらすトラフィックの割合はそれぞれ 40% と 80% である。

ビジネス探索価値#

  • 迅速な試行錯誤

ネイティブ APP と比較して、ミニプログラムの開発難易度とコストは大幅に低下しており、これにより多くのシーンの開発者がミニプログラムを使用して迅速に試行錯誤し、新しいビジネス価値を探求できる。

デジタルアップグレード価値#

  • 大きな許容範囲、広範なカバレッジ

オフラインからオンラインにどうするか？軽消費型のファーストフード、ティー飲料から不動産、自動車などの大宗消費まで、ミニプログラムは良好な許容範囲を示している。オフラインシーンのミニプログラムは非常に広範囲をカバーしている。

ミニプログラム技術解析#

ミニプログラム原理#

サードパーティの開発アプリケーションを最も簡単かつ便利に作成する方法は？

  • WebView + JSBridge
    • WebView：モバイル端末が提供する JavaScript を実行する環境で、アプリ内のブラウザページに相当する
    • JSBridge：その名の通り、開発者がアプリ本体のいくつかの API を呼び出すための橋渡し

いくつかの問題：

  • 無ネットワークの状況では体験が良くない
  • ウェブページの切り替え体験が良くない
  • 安全性を保証するための管理方法

ミニプログラムは以下の方法でこれらの問題を解決した：

  • 開発の敷居が低い ——HTML+JS+CSS
  • ネイティブに近い使用体験 —— リソースの読み込み + レンダリング + ページ切り替え
  • セキュリティ管理 —— 独立した JS サンドボックス：DOM 操作を隔離する方法
    • DOM を操作しない場合、ページのレンダリングをどう制御するか？
    • Data -> データに基づいて DOM を処理 -> ページ

image.png

ミニプログラム文法#

image.png

図のように：例えばバイトのミニプログラムは TTML/JS/TTSS であり、WeChat のミニプログラムは WXML/JS/WXSS で、HTML/JS/CSS に対応する。

簡易ポモドーロタイマーの実装#

以下のように WeChat ミニプログラムでポモドーロタイマーを実装してみます～（異なるミニプログラム文法は大同小異です）

コードスニペット

番茄钟.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 を補完することで、2 桁の時間を表示できます（学びました！）

次にイベントの処理を行い、setTimer 関数で 1 秒間隔のタイマーを設定し、初期 time をデフォルト時間に設定し、1 秒ごとに現在の 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 で、container などのグローバルに共通する css を実現できます。

/**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;
}

関連拡張#

クロスエンドフレームワークとは何ですか？

  • 複雑なアプリケーションの構築
  • 一度の開発で複数のエンド（WeChat ミニプログラム、各種ミニプログラムなど）に対応

クロスエンドフレームワークの紹介#

image.png

クロスエンドフレームワークの原理#

コンパイル時#

AST 構文木#

抽象構文木 - ウィキペディア

コンピュータサイエンスにおいて、抽象構文木（Abstract Syntax Tree、AST）、または略して構文木（Syntax tree）は、ソースコードの文法構造の抽象的な表現の一つです。プログラミング言語の文法構造を木構造で表現し、木の各ノードはソースコードのある構造を示します。文法が「抽象的」とされるのは、ここでの文法が実際の文法のすべての詳細を示さないからです。例えば、ネストされた括弧は木の構造に暗黙的に含まれ、ノードの形では表示されません。一方、if-condition-thenのような条件ジャンプ文は、3 つの分岐を持つノードを使用して表現できます。

抽象構文木に対して具体構文木（通常は解析木と呼ばれる）があります。一般的に、ソースコードの翻訳とコンパイルプロセスにおいて、構文解析器は解析木を作成し、その後解析木から 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 を生成できます。

テンプレートコンポーネント#

ミニプログラムで提供される動的に生成されるテンプレート。

image.png

ランタイム構造#

image.png

  • ランタイムのソリューションも完璧ではない
  • 一部のシーンではネイティブミニプログラムの文法に比べて性能が劣ることがある
  • 大部分のシーンでは問題ない！

まとめと感想#

この授業では、ミニプログラムの発展過程と技術解析を大まかに解説し、簡易的なポモドーロタイマーのミニプログラムを実現しました～

本文で引用したほとんどの内容は、張曉偉先生の授業に基づいています。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。