Pake - 🤱🏻 非常に単純な Rust パッケージ Web ページを使用して、小さな Mac App 🤱🏻 A simple way to package a web page with Rust to create Mac App を生成します。

(🤱🏻 很简单的用 Rust 打包网页生成很小的 Mac App 🤱🏻 A simple way to package a web page with Rust to create Mac App.)

Created at: 2022-10-14 17:32:57
Language: Rust

中国語 | English

Pake

Rust パッケージ Web ページを使用して小さな Mac App を生成するのは簡単で、WeChat 読書、Flomo、RunCode、Witeboard、ToolsFun、Vercel、即時、RoamResearch などをサポートする Tauri を使用して、詳細な小さなホワイト開発チュートリアルが下部に表示されます。

特性

🏂 小さい: 従来の Electron シェル パッケージと比較して、サイズは 50 倍近く小さく、通常は 2M (データ)
😂 高速:P ake の基になる Rust Tauri フレームワークでは、パフォーマンス エクスペリエンスは JS フレームワークよりもはるかに軽量でメモリが少なくなります
🩴 特:単なるパッケージではなく、ユニバーサルショートカットの透過性、没入型ウィンドウ、ドラッグ、パッケージスタイルの互換性を
🐶実現再生:非常に単純な小さなおもちゃ、Rustは、以前のシェルWebページの古いアイデアの遊びを置き換え、PWAも非常に良いです、フレンドリーなコミュニケーションはスプレーしないでください

ショートカット キー

  1. command + ←
    : 前のページに戻ります
  2. command + →
    : 次のページに移動します
  3. command + ↑
    : ページの先頭まで自動的にスクロールします
  4. command + ↓
    : ページの一番下まで自動的にスクロールします
  5. command + r
    : ページを更新します
  6. command + w
    : ウィンドウを非表示にし、終了しない

また、フルスクリーン切り替えのために頭をダブルクリックし、ウィンドウを移動するために頭をドラッグし、他のニーズがあり、歓迎します。

効果

WeRead Download Flomo Download
RunCode Download Witeboard Download
ToolsFun Download Vercel Download

より一般的なアプリのダウンロードは、Release で見ることができます。

開発

開始する前に Tauri を参照して環境をすばやく構成し、Windows、Linux システムのパッケージをパッケージ化する場合は、Building のドキュメントを参照してください

// 安装依赖
npm i

// 调试
npm run dev

// 打包
npm run build

新しいかばんを打つ

  1. ディレクトリの下の 4 つのフィールドを変更し、icon が icons ディレクトリから 1 つを選択するか、macOSicons に行って製品名に準拠したフィールドをダウンロードすることができます
    src-tauri
    tauri.conf.json
    productName、icon、title、identifier
  2. カタログの下の with_url フィールドを変更して、Web ページをパッケージ化する必要があるアドレスを指定します
    src-tauri/src
    main.rs
  3. npm run dev
    ローカル デバッグは、コンテナーデバッグのために devtools の 2 つのコメント (検索) を開くことができ、没入型ヘッドに適していなければ、コメントを削除できます
    main.rs
    _devtools
    .with_titlebar_transparent(true)
  4. npm run build
    実行するとパッケージ化され、devtools モードがオンになっている場合は、コメント アウトすることを忘れないでください

高度な

元のステーション広告を削除したり、不要なモジュールを削除したり、再設計したりするなど、スタイルを書き換えるにはどうすればよいですか。

  1. まず、devtools デバッグ モードをオンにし、変更する必要があるスタイル名を見つけ、まず devtools で効果を検証する必要があります
  2. でスタイルの場所 (検索 ) を見つけ、オーバーライドする必要があるスタイルにプラスを追加し、模倣できるケースがあります
    main.rs
    style.innerHTML
  3. 正式にパッケージ化する前に、devtools コメントを削除することを忘れないでください

キーボード ショートカットなどのイベント スヌーピングの実装など、JS のロジックを挿入するにはどうすればよいですか。

  1. 上記1例の準備と一致している
  2. 参照 中のイベントリスニング(検索)は、直接書くことができ、ここでは、基本的なフロントエンド技術の詳細です
    main.rs
    document.addEventListener

Web のドラッグ、スクロール、特別なクリックなど、コンテナー内のイベントと Pake 通信を行う方法

  1. 上記1例の準備と一致している
  2. の通信コード (検索) を参照し、イベント のリッスンを記述し、イベントとパラメーターを渡します
    main.rs
    postMessage
    window.ipc.postMessage
  3. その後、参照コンテナーはイベント (検索) を受信し、自分で処理し、tauri と wry の公式ドキュメントを参照できます
    window.drag_window

最後に

  1. 新しいアイデアがあれば、新しい技術を学ぶ喜びが私に教えてくれることを願っています
  2. Mac App を作るのに適した Web ページを見つけたら、その Web ページを追加するように私に言ってください