目录
一、浏览器运行
需要安装Tomcat后以类似 http://localhost:8080/zjgame/zjgame.html
的方式访问,否则本地图片无法加载。
注:本项目基于Three.js,是对微信小游戏跳一跳的html版改写,只供研究学习使用。
GitHub:https://github.com/zj19941113/You_Jump_I_Jump ,只供个人研究学习使用。
Three.js+tween.js 基础(一):https://blog.csdn.net/ffcjjhv/article/details/86632320
配置腾讯云服务器 通过域名访问自己的网页tomcat:https://blog.csdn.net/ffcjjhv/article/details/85140212
二、在桌面运行 electron打包
跳一跳桌面应用程序Jump_Jump-win32-x64,链接:https://pan.baidu.com/s/13iZylPrwSYAUITwhaUZwIg ,提取码:ho62 ,下载解压后可直接玩耍~
1、安装 node.js
#下载:https://nodejs.org/en/
cmd输入node -v
和npm -v
查看是否安装成功
2、安装 electron
命令行下载淘宝镜像命令工具 cnpm
npm install cnpm -g --registry=http://registry.npm.taobao.org
用 cnpm 命令安装 electron
cnpm install electron -g
cmd输入electron -v
查看是否安装成功
3、运行
下载:https://github.com/zj19941113/You_Jump_I_Jump ,并解压,将zjgame.html
重命名为index.html
。
复制粘贴下面的 package.json
和 main.js
文件,最终目录如图
在package.json中:
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
在main.js中
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
在项目目录下运行
electron .
4、electron-packager打包为.exe
(1)全局安装electron-packager
npm install electron-packager -g
(2)运行打包命令
electron-packager . YOU_JUMP_I_JUMP --win --out outApp --arch=x64 --app-version 1.0.0 --electron-version 5.0.0 --overwrite --ignore=node_modules
在outApp\YOU_JUMP_I_JUMP-win32-x64\
文件夹下生成可执行文件YOU_JUMP_I_JUMP.exe
5、源码加密
在YOU_JUMP_I_JUMP-win32-x64\resources\app
里有写的源码。写的代码完全暴露在用户电脑上是非常不安全的,可以通过electron 自带的加密功能解决这个问题。
(1)全局安装 asar
npm install asar -g
(2)使用asar指令进行加密
在resources
目录下使用asar
指令进行加密
asar pack ./app app.asar
将原来的app文件夹删除,这样生成的app.asar就加密了之前的源代码
双击YOU_JUMP_I_JUMP.exe
运行