【教程】如何将自己的编程猫作品在MAC或LINUX上制作成独立应用程序

你有想过把编程猫的作品通过应用程序的方式把它发送给同学或朋友吗?但是现在的编程猫格式工厂只能制作exe应用,无法将它转成mac应用或linux应用,所以这篇文章将教会你们如何将自己的作品在Mac或Linux上制作成独立应用程序。

你需要准备的东西:

  • 良好网速
  • 一台运行着Mac OS/Linux系统的电脑
  • 想搞的心
  • 你的k3作品的.bcm文件(不要含有云数据)
  • 一个icns和png格式的应用图标

一、制作成mac应用程序

1.下载nw.js

这个实际上是一个能够将网页封装成应用的软件,编程猫格式工厂就是运用这个软件进行软件封装的。

国内下载地址:点我下载

(记得划到最下面打开最新版本的文件夹,软件名格式为nwjs-vx.xx.x-osx-x64.zip)
请添加图片描述
请添加图片描述

2.下载打包必要文件

有兴趣的训练师可以看看Windows下的编程猫格式工厂制成的独立应用程序的目录(版本调成win XP版再打包),可以发现有部分运行.bcm文件的必要文件(其实就是些js和css代码)。

在这里我已经为大家打包发出来了,链接:点我!

3.部署应用

将你下载好的nw.js压缩包解压,可以获得一个叫"nwjs.App"的应用。再将上面的必要文件解压,把"nwjs.App"放入"必要文件" 解压的文件夹中(resource.bcm与nwjs.App在同一目录下)
请添加图片描述
请添加图片描述

将你准备的.bcm文件改名为"resource.bcm",拖入上面提到的文件夹中(拖入时一定会问你是否覆盖,选择"是")。双击nwjs.App。Wow!能运行了耶!
请添加图片描述

4.应用设置

(1)打开目录下的package.json,name设置应用名,version设置版本,title设置应用名,width和height设置窗口宽和高,这里根据作品屏幕比例来填写,其中434,666是竖屏,800,600是4:3横屏,800,450是16:9横屏。
请添加图片描述

(2)打开player.3fb825e04b6c3ba91243.js(电脑不行可能会卡),搜索v.0.1.23 (默认版本),将版本号切换成你的作品的版本号。
请添加图片描述

5.应用打包

(1)将png格式的图标名字改成"player_icon.png",拖到解压文件夹进行覆盖。再将文件夹中所有的文件(不包含nwjs.App)压缩成zip文件。
请添加图片描述

(2)打开终端,执行

cd 你文件夹的路径(例如:/Users/yuzifu/Desktop/演示/nwjs封装k3作品必要文件) 

mv 压缩包名 App.nw

(就是把压缩包名字改成App.nw,用代码是因为名字改了可能会变成App.nw.zip,这样不行。)
请添加图片描述

(3)复制App.nw到nwjs.App的"/Contents/Resources"文件夹中,将自己准备的icns图标名字修改成App.icns和document.icns复制到上面所述文件夹中。
请添加图片描述

(4)给nwjs.App改个名字,现在打开?Nice!
请添加图片描述

二、制作成linux应用程序

注:等会图片展示会出现Mac OS的窗口,原因是我Linux是使用虚拟机安装的,有点卡,所以部分图片用Mac OS展示,效果不变请放心!

1.下载nw.js

这个实际上是一个能够将网页封装成应用的软件,编程猫格式工厂就是运用这个软件进行软件封装的。

国内下载地址:点我!

(记得划到最下面打开最新版本的文件夹,软件名格式为nwjs-vx.xx.x-linux-x64.zip
请添加图片描述

2.下载打包必要文件

有兴趣的训练师可以看看Windows下的编程猫格式工厂制成的独立应用程序的目录(版本调成win XP版再打包),可以发现有部分运行.bcm文件的必要文件(其实就是些js和css代码)。

在这里我已经为大家打包发出来了,链接:还是点我!!

3.部署应用

将你下载好的nw.js压缩包解压,解压出来的目录里是nwjs本体和所需依赖。再将上面的必要文件解压,把"必要文件" 解压的文件夹中的所有内容全部复制粘贴到nwjs解压的目录下(resource.bcm与nwjs.App在同一目录下)期间可能有覆盖提示,选择覆盖。
请添加图片描述
请添加图片描述

将你准备的.bcm文件改名为"resource.bcm",拖入上面提到的文件夹中(拖入时一定会问你是否覆盖,选择"是")。双击nw。稍等一会!Wow!能运行了耶!
请添加图片描述
请添加图片描述

现在能运行是能运行了,但对于宽屏作品来说就窗口显得有些不合尺寸,且我们也不想分享自己的作品时带上一个文件夹。

所以后面我们将进行部分设置!!!

4.应用设置

(1)打开目录下的package.json,name设置应用名,version设置版本,title设置应用名,width和height设置窗口宽和高,这里根据作品屏幕比例来填写,其中434,666是竖屏,800,600是4:3横屏,800,450是16:9横屏。
请添加图片描述

(2)打开player.3fb825e04b6c3ba91243.js(电脑不行可能会卡),搜索v.0.1.23 (默认版本),将版本号切换成你的作品的版本号。
请添加图片描述

(3)将准备好的png图片改名为“player_icon.png”,放入nwjs文件夹中进行覆盖
请添加图片描述

再次运行nw,现在就可以发现应用图标和应用名全是自己修改的

5.应用封装

应用封装这里可以选择deb等格式的打包,但我推荐的是使用Appimage实现所有linux发行版运行。

这里我们使用Appimage来进行应用打包。

所有的文件我已打包,下载链接:最后一个了!

1.准备所需文件

解压上面的文件,找到上个教程的应用程序文件夹。

请添加图片描述

2.复制文件

复制应用程序文件夹内所有文件到"AppDir/usr/bin/“中,将以前nw文件命名为"bcm”
请添加图片描述

将"player_icon.png"图片放入 "AppDir/usr/share/icons/hicolor/256x256/Apps/"中,并且修改名字为 “bcm.png”
请添加图片描述

3.修改文件

打开"/AppDir/usr/share/Applications/bcm.desktop"文件,进行部分值修改。

(分类不知道怎么填可以看看这篇
请添加图片描述

打开"AppDir/click_me.sh"文件,修改部分值。(对,就是软链接)
请添加图片描述

4.最后打包准备

运行"click_me.sh",等会会出现3个软链接。
请添加图片描述

打开终端,运行

./Appimagetool-x86_64.AppImage AppDir

请添加图片描述

等待完成后,我们就能打开这个应用了!
请添加图片描述

那这篇教程也就告一段落了,如果有什么不会的或者有问题的,下方评论区见!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值