微信小程序跳一跳html版复原（three.js+tween.js）

发表于 | 分类于 ， | 阅读次数:

一、浏览器运行

需要安装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打包

1、安装 node.js

#下载：https://nodejs.org/en/
cmd输入node -v 和npm -v查看是否安装成功
在这里插入图片描述

2、安装 electron

命令行下载淘宝镜像命令工具 cnpm

1
npm install cnpm -g --registry=http://registry.npm.taobao.org

用 cnpm 命令安装 electron

1
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中：

1
2
3
4
5
{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

在main.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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.

在项目目录下运行

1
electron .

在这里插入图片描述

4、electron-packager打包为.exe

（1）全局安装electron-packager

1
npm install electron-packager -g

（2）运行打包命令

1
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

1
npm install asar -g

（2）使用asar指令进行加密

在resources目录下使用asar指令进行加密

1
asar pack ./app app.asar

在这里插入图片描述
将原来的app文件夹删除，这样生成的app.asar就加密了之前的源代码
双击YOU_JUMP_I_JUMP.exe运行

0%