我最近玩了一下 Tauri，这是一个用网络技术开发桌面应用的工具包。下面是我如何让它在 Ember.js 应用中工作的。
什么是 Ember？
Ember.js 是一个类似于 React 和 Vue JS 的前端框架。我用它来构建我的应用程序 Snipline，它也被用于 Intercom 和 LinkedIn 等网站。它有一个类似于 Ruby on Rails 的 "约定大于配置 "的方法。
什么是 Tauri？
Tauri 是一个用网络技术制作桌面应用程序的库。它与 Electron 相似，但有几个关键的区别。
1）它是用 Rust 而不是 Javascript 构建的。
2) 它使用你的操作系统的本地网络浏览器，而不是捆绑 Chrome 浏览器，这导致了相当小的应用程序--至少与 Electron 相比是这样的
安装和开发
以下是我为一个简单的 Ember 应用程序运行的命令，以测试 Ember 和 Tauri 的路由。
作为参考，我使用的是 Node14.17.0.
安装 Ember
npm install -g ember-cliember new tauri-test --lang enember g route indexember g route from-emberember serve
复制代码
我编辑了两个生成的模板，app/templates/index.hbs 和 app/templates/from-ember.hbs。
{{page-title "Index"}}<h1>Hello, Tauri 😄</h1><LinkTo @route="from-ember">Click here</LinkTo>
{{page-title "FromEmber"}}<h1>From Ember 🧡</h1><LinkTo @route="index">Back</LinkTo>
复制代码
这就足够了，可以开始测试路由在应用程序中的工作。
设置 Tauri
首先，按照 Tauri 文档中关于你的操作系统的设置指南。
在这之后，就是把它添加到你的 ember 项目中--参见集成文档。
这就是我所做的，让它工作。
npm install @tauri-apps/cli
// Add the `tauri` command to your `package.json`{ // This content is just a sample "scripts": { "tauri": "tauri" }}
复制代码
运行整个初始化过程。
npm run tauri init
当出现提示时，确保你将开发服务器设置为 http://localhost:4200，将文件的位置（相对于 src-tauri）设置为./dist。
然后就可以运行开发子命令了（确保你的 Ember 服务器也还在运行）。
npm run tauri dev
就这样了! 即使在热重载的情况下，它也能工作!
打包
到此开发工作已经准备好了，下面是如何将应用程序打包以便发布。我不会在本指南中讨论自动更新的问题，但 Tauri 确实有这方面的支持。
ember build --environment=productionnpm run tauri build
复制代码
在 MacOS 上，安装程序.dmg 文件为 5.4MB，.app 文件为 12.4MB。
对于 Windows，生成的 MSI 安装程序为 4.9MB，可执行程序为 8.9MB。
Rust 和 Ember 之间如何通信
再进一步，我想我要测试一个简单的 Ping/Pong 例子，在 Ember 和 Rust 之间进行通信。欲了解更多信息，请查看 Tauri 文档。
下面的代码允许 Ember 向 Rust 传递一个字符串，Rust 检查该值并在文本 "Ping "和 "Pong "之间进行切换。在 Ember 中，我添加了一个按钮，显示响应文本并在点击时更新。
// src-tauri/src/main.rs#![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows")]// Add a new function that takes a string and returns a string#[tauri::command]fn my_custom_command(current_text: String) -> String { // Depending on what we receive from Ember we toggle the response if current_text == "Ping" { "Pong!".into() } else { "Ping".into() }}fn main() { // Add the custom command so that the frontend can invoke it tauri::Builder::default() .invoke_handler(tauri::generate_handler![my_custom_command]) .run(tauri::generate_context!()) .expect("error while running tauri application");}
复制代码
// app/controllers/index.jsimport Controller from '@ember/controller'import { action } from '@ember/object'import { tracked } from '@glimmer/tracking'import { invoke } from '@tauri-apps/api/tauri'export default class IndexController extends Controller { // Set the default button text @tracked buttonText = 'Ping' // Create an action that will be attached to a button in the template @action checkRust() { // Invoke the Rust command and update the button text to the response invoke('my_custom_command', { currentText: this.buttonText }).then(resp => { console.log(resp) this.buttonText = resp }) }}
复制代码
这里是更新后的 app/templates/index.hbs 模板文件。
{{page-title "Index"}}<h1>Hello, Tauri 😄</h1><LinkTo @route="from-ember">Click here</LinkTo><button {{ on 'click' this.checkRust }}>{{this.buttonText}}</button>
复制代码
参考链接:
https://hackernoon.com/how-to-create-small-fast-and-cool-desktop-apps-with-tauri-and-emberjs-fm1634qu
评论