最近打算写一个用于股票体检的软件,比方股权质押比过高的股票不合格,ROE小于10的股票不合格,PE大于80的股票不合格等等等等,就像给人做体检一样给股票做个体检。也实现了一些依照技术指标、基本面主动选股,实盘交易点回测性能等等等等。我用vue开发了这样一个软件,目前只有我本人在浏览器上应用,许多小伙伴和我说:“你把它做成网站呗”。先不说别的,这种网站只是备案就够我喝一壶的!
所以我就想做成一个PC端的桌面软件,分给小伙伴们在本人的电脑上装置一下就好了!在tauri呈现之前,首选必定是electron,「外围开发语言也就是能够用js、vue之类的就能开发桌面利用」,咱们大家熟知的visual studio code就是应用electron技术开发的,「构建实现之后能够跨端装置。比方:windows、macos、linux全都反对」。然而electron开发进去的安装包切实是太大了,动不动几百MB。有的敌人可能说你看visual studio code安装包也才几十M,然而人家不是微软团队么?集体没那个实力给安装包瘦身。「此时tauri呈现了,electron有的长处他都有,比方反对应用前端语言开发、反对跨端装置,更重要的是应用tauri构建利用安装包个别只有十几MB,本文构建的版本安装文件只有2.9M,也是绝了!」。那么上面咱们就开始第一个tauri桌面利用我的项目吧。
一、筹备工作:
以下的筹备工作是以在windows作为开发操作系统为根底,须要装置的工具。须要留神的是:这些工具时面向开发者的,桌面利用的使用者是不须要装置这些工具的。
1. Microsoft Visual Studio C++ 构建工具
首先须要去装置Microsoft Visual Studio C++构建工具,下载地址:Build Tools for Visual Studio 2022.。这一个步骤能够说是整个tauri开发环境筹备最重要的步骤,笔者之前的简直所有的失败都是因为这一步没有做好。 如果你装置Microsoft Visual Studio C++构建工具的首页面,不是下面的页面,而是上面的页面,证实你之前就曾经装置过“Visual Studio生成工具"。我强烈建议你把曾经装置过的“Visual Studio生成工具"全都卸载,而后再次装置就会进入下面的这个页面,装置过程肯定把上图中红色框框内容全都勾选上。
2. WebView2
下载地址是webview2,下载实现之后按提醒傻瓜式装置即可。
tauri利用是依赖于webview2进行显示渲染的,按理来说,用户应用了tauri开发的桌面利用,用户所在的操作系统就必须装置webview2,否则无奈显示。「然而」通过我和我的小伙伴们的试验,我把webview2 runtime卸载掉,tauri开发的桌面利用同样能够运行。这就有点神奇了,我当初还不理解其中的原理,如果有谁晓得通知我一下,不胜感激。总之,不论用户需不需要装置这个webview2,作为开发者必定是要装置的。
3. Rust
tauri底层是基于rust语言的,所以开发者须要装置rust。https://www.rust-lang.org/too...,留神勾选理论对应的操作系统位数:32位、64位。 倡议装置较新的rust版本,大于1.60.0,能够应用runstc -V
查看rust的版本号。我之前应用的1.60.0
版本的时候,tauri软件构建失败了,如下图。
4.装置nodejs
因为咱们的软件界面外围开发语言依然是javascript,所以须要装置nodejs,要求是12以上的版本。如果曾经装置过, 应用命令node -v
查看一下nodejs的版本号
二、新建tauri我的项目
筹备工作做好之后,咱们应用上面的命令npm create tauri-app
新建tauri我的项目。这个命令会给咱们若干提示信息,而后依据咱们的选项及模板帮忙咱们新建tauri我的项目。命令执行之后会显示一些tauri官网,以及一些构建tauri我的项目的筹备工作的网址链接(筹备工作咱们曾经实现了)。提醒上面的信息,所以咱们只有轻易按键盘上的任意键就能够持续构建我的项目了。
npm create tauri-app…… 这里省略若干行提示信息Press any key to continue...
而后提醒咱们输出项目名称(app name,会在当前目录下新建一个同名的目录)、windows title(就是PC桌面软件左上角的利用名称)。下文中的stock-check和"股票体检"是我输出的app name 和windows title。
? What is your app name? stock-check? What should the window title be? (Tauri App) 股票体检
而后下一步是抉择前端开发(vue)应用的构建工具,咱们抉择应用vite。如果对vite不理解的同学不必慌,这里咱们不必理解vite的用法,甚至不必了解vite是什么,它只作为构建工具被应用。tauri桌面利用开发的大多数场景下,你甚至体验不到它的存在。 下一步提醒是否装置tauri-app/api,当然,咱们开发的就是tauri桌面利用,这个当然要选Y。
? Add "@tauri-apps/api" npm package? (Y/n) Y
而后提示信息,询问咱们应用哪种前端框架进行开发,我抉择vue。如果你对react纯熟,你也能够选react。 这一步执行实现之后,就开始我的项目的代码构造的主动生成工作了,最终显示如下内容,证实咱们的我的项目代码目录生成胜利了。
Your installation completed.$ cd stock-check$ npm run tauri dev
相熟vue前端我的项目开发的敌人看到这个目录构造是不是额定的亲切,除了src-tauri这个目录,其余基本上和vue我的项目构造是一摸一样的。后续咱们进行桌面利用开发的时候,也是和开发vue我的项目是一摸一样的。src-tauri这个目录更多的是在我的项目构建打包过程中失效,开发过程中很少波及。
三、开发环境运行我的项目
在上文新建我的项目实现,最初输入信息提醒咱们:
Your installation completed.$ cd stock-check$ npm run tauri dev
执行cd stock-check
进入到我的项目的目录,执行npm run tauri dev
让我的项目跑起来,跑起来之后能够在浏览器上查看成果,也能够作为windows桌面软件查看成果。然而在笔者试验过程中,在进入我的项目目录之后,在npm run tauri dev
之前还须要执行一个命令npm install
引入前端开发所应用的一些js依赖模块。桌面端利用运行启动成果如下:
第一次运行构建的过程工夫会很长,因为家喻户晓的起因,可能有些依赖包无奈正确装置,须要你当时筹备好一些网络的拜访能力。
四、我的项目打包为msi安装文件
咱们开发一个桌面端的软件,必定是心愿散发进来给用户应用的,所以咱们须要打包一个安装文件,比方:aaa.exe、bbb,msi
之类的。 在src-tauri目录下有一个tauri.conf.json 文件,这个文件是tauri工程项目环境的配置文件,在该文件中JSON构造的tauri > bundle > identifier
默认值是com.tauri.dev
,咱们须要将它批改一下能力打包,个别批改为你所在组织的域名倒排即可,比方:com.zimug.stock-check
。
{ "package": { "productName": "stock-check", "version": "0.1.0" }, "tauri": { "bundle": { "identifier": "com.zimug.stock-check", }, }}
批改实现之后运行打包命令,打包名称版本信息都能够在tauri.conf.json 文件文件中配置,如上文package配置。
npm run tauri build
打包实现之后只有2.9M,会在我的项目的根目录下的相对路径下生成msi安装文件src-tauri\target\release\bundle/msi/stock-check_0.1.0_x64_en-US.msi
,把这个msi文件分发给你的用户,他们就能够在PC端装置应用你开发的windows桌面软件啦。当然tauri和electron一样的是能够跨平台的,也能够打包兼容windows、MacOS、Linux的桌面利用安装包。
五、小问题
有的小伙伴可能会问,我要想应用tauri开发桌面端利用是不是须要学习rust语言啊? 答案是:不须要! 除非你开发那种和windows硬件强关联的桌面利用,比方蓝牙、驱动之类的,否则不须要你有任何的rust语言根底。开发工作大部分就是写界面,写逻辑数据交互,和开发web利用是一样的!
感觉对您有帮忙的话,帮我点赞、分享!您的反对是我不竭的创作能源!。更多精彩内容公众号:字母哥杂谈。字母哥博客:zimug.com