打包mac应用_把网址链接打包成电脑软件的制作方法

前言:

  • 学习一下把web页面打包成运行在桌面的应用, 并支持win / mac / linux 等平台, 记一下使用过程, 有需要的大(同)佬(学)可以玩玩~

第一步 – 安装 node.js

  • node.js下载地址:http://nodejs.cn/download/

  • 下载 Windows 安装包 (.msi) 和 Windows 二进制文件 (.zip)

  • 提示:如果你是Windows系统,就下载 Windows 安装包,Mac系统就下载 Mac 安装包(本文以 Windows 系统为例进行安装)

6e6232998a088ba702228e3e1e0c811d.png

  • 下载这两个文件,下载后把他们放到桌面,将 Windows 二进制文件 (.zip) 解压到桌面

  • 你的桌面上会有这样两个文件

2dce53d54242dd9c5e409e2d7b040ece.png

然后双击 Windows 安装包 (.msi) (也就是红色方框里的第一个图标)进行安装

da768a44a1922b6629fd00c3ec00d924.png

d78c329e9617940302835f045dd91810.png

9b300c3aac85786116bf541f88dfebbc.png

36600ea65699168a6e3d21b60fce622a.png

45f8694c808c271f90e109b094dd94a0.png

3357b052aed587e4e755b57f1de51776.png

1b3abd3557abbc2f5a037855ecdec023.png

一直点击 Next 直至安装完成

第二步 – 安装 nativefier

  • 打开 命令提示符(详细步骤;开始-所有程序-附件-命令提示符)

77bed23e1fb1600caf1042def45161f5.png

d94623278695ebb27639a05eceab43ff.png

  • 在命令提示符内输入:npm install nativefier -g

  • 然后回车键,等待安装完成,完成后是这个样子

37ab071413cf40b1a04484918c6636ee.png

然后继续输入:nativefier "https://blog.kosr.cn/"


24ed4dbddd9190648c5abf100035bd4f.png

  • 提示:记得将nativefier "https://blog.kosr.cn/" 中的 https://blog.kosr.cn/ 换成你自己的网址,其他的不用修改

  • 第一次打包需要下载 Eletron 框架, 很慢, 要有耐心……

  • 运行完毕, 会生成一个 100 多 m 的应用, 路径一般为C:\Users\Administrator\ xxx --win32-x64 如图

d123facf9484d790a69646c7f6c8086c.png

这样你的专属软件就做好了

第三步 – 拓展 – 自定义软件图标和名字

  • 如果你想的话,可以将第二步中的代码替换为以下代码

nativefier --name "app名字" "https://blog.kosr.cn"  // 自定义名字 navivefier --name "app图标路径" "https://blog.kosr.cn"  // 自定义图标
  • 注意: 图标要用ico格式

第四步 – 结尾说明

  • nativefier还提供了很多可选参数, 有需求请阅读 官方API 文档

  • 软件完成后的目录

bbd258fc1a35fbc70dd093f3152dd85a.png

0988f2d7e649e73b8640b84aed802415.png

打开后的样子:

9c69aa82985844c2488e48c36d3e15ae.png

其实就是一个网页, 但是相比在浏览器里会少了地址栏, 标签栏等等杂七杂八的东西, 看着舒服一些, 还能 Alt+tab 切窗口, 看起来更舒服是不…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值