Vue.js
基于Vue的微信小游戏框架Gegjs
发布于 3 年前 作者 chaoren 1582 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

背景

相信做前端的朋友对Vuejs的双向绑定与组件化开发绝对印象深刻，笔者也为Vue的诸多特性颇为赞叹，它为前端的生态真的注入了太多力量，它的成功除了得益于Vue自身的健壮性之外，基于它的拓展性也满足了各个不同项目组特定的定制化的需求，也诞生了类似于针对微信小程序开发的mpvue，基于网页端开发的UI架构ElementUI等优秀项目。有些人可能会问，这些铺垫有什么用处，还不是想衬托目前还没有一个项目可以基于Vuejs开发微信小游戏的么？是的，所有的铺垫必然是有目的的，我觉得有必要介绍下这个项目诞生的原因。

首先，笔者从毕业后一直从事的是游戏与3D渲染方面的工作，对前端可以说是不同的领域，直到前两年接触了Webgl后，就慢慢的往Web渲染这块技术靠拢，用到Webgl的过程中也必然会跟前端的主流技术打交道，像jquery，jquery，jquery！有人会很惊叹，什么？这两年还有人用jquery做前端开发的么？很遗憾，当时转Webgl的我确实跟jquery打交道了大半年，主要原因也许是因为渲染层用到dom的机会不太多，也许是因为当时确实不太关注前端的新技术。好吧，主要原因还是因为我个人是个怀旧主义者，这么解释希望读者能接受。直到有一天我接触到了Vue，那一刻我发觉，糟了，大半年的jquery白用了，因为我一直觉得我在jquery领域真的是有见地，所以在此我还是把我这个教训与各位分享，技术千万不要闭门造车，也不要有怀旧的心态，拥抱新技术是技术人时刻应该关注的动向。还是说回接触到Vue后我的一些感触，我发现Vue真的是一个好东西，原本需要操作源数据才能改变的视图，只需要用对象进行管理，一旦数据改变，视图立马改变，通过这种方式很多功能需要繁杂的代码，现在只需要专注于数据层，而后我们的渲染规范就变成了经常与Vue打交道的过程，有些人可能会有疑问，用Vue开发的游戏，性能会有问题么？这个问题往往让人很难回答，开发效率的提升似乎总会带来性能的下降，而性能主要在Vue初始化过程会有影响，这取决于场景数据与复杂度，所以大型游戏不建议使用该方案，因为大型游戏要组织的数据过多，并且场景物体也过于复杂，这里我们先不讨论这个话题，后面有机会我会专门对优化的问题开辟新的章节进行讨论。回到正题，开发后的游戏必然涉及到平台的问题，首先小游戏平台必须要首先考虑，于是就有了这个项目。

介绍

Gengine 是一个基于 Vue.js 核心开发的前端框架，与Vue采用Typescript不同，Geg采用的是Es6开发,并修改了 Vue.js 的底层实现，包括了compile与platforms，并新增gxml部分。框架通过xml组织视图层级，所以它与底层视图渲染的方式,如dom的渲染等并没有直接关系，也因为这个特点，虽然Gengine开发之初是为了使用Vue兼容微信小游戏而设计，但是理论上可以使用Geg.js开发任意特定平台的视图项目。

我们可以通过以下关系来描述Geg.js与MVVM的关系。

                              VIEW MODEL

┌----------┐                ┌---------------┐                          ┌----------┐

|          | ---------------| XMLNodeListen ├------------------------> |          |

|          |                |              |                           |          |

|  View    |                |              |                           |   Model  |

|          |                |              |                           |          |

|          | <------------- | Data Bindings ├<------------------------ |          |

└----------┘                └---------------┘                          └----------┘

    |           

    |                         

    |     ┌--------------------------┐

    └---->|  Geg.js Implementation   |

          └--------------------------┘

上面的关系图表明View视图的渲染逻辑需要用Geg.js针对特定平台实现

安装

# 克隆项目

git clone https://github.com/GengineJS/geg.git

# 进入项目目录

cd geg

# 安装依赖

yarn

# 本地开发 启动项目

yarn min

目录结构

本项目已经为你生成了一个完整的开发框架，提供了Geg.js开发过程中的源码结构，下面是整个项目的目录层级。

├── dist                      # rollup源码构建输出

├── src                      # 源代码

│   ├── compiler              # 编译相关

│   ├── core                  # 源码核心

│   ├── platforms            # 平台相关

│   ├── sfc                  # parser相关

│  └── index.js              # 源码入口

├── .babelrc                  # babel-loader 配置

├── config.js                # rollup配置

├── index.html                # 测试入口html

├── package.json              # package.json

├── test.xml                  # 测试xml模版相关

├── yarn-error.log            # 构建错误log

└── yarn.lock                # 构建依赖相关

初始化

Geg.js是以微信小游戏平台为开发初衷，那么我们以微信小游戏平台Geg-Babylonjs为例,可分为三种初始化方式

1. 加载xml文件。

由于Gengine不对dom进行直接操作,所以这里的el传递的是xml路径

import GegBabylon from './gegbabylon/index.js'

import Geg from './libs/geg.js'

Geg.use(GegBabylon)

let geg = new Geg({

  el: 'src/template.xml'

})

xml格式如下,外层必须通过template进行定义，说明其内部元素为解析模版

<template>

  <engine>

    <scene>

      <camera type="ArcRotateCamera"></camera>

      <light></light>

      <skybox></skybox>

      <mesh type="Sphere" :position="sPosition">

        <physics :mass="10"></physics>

      </mesh>

    </scene>

  </engine>

</template>

2. Geg对象内部定义template字符串。

import GegBabylon from './gegbabylon/index.js'

import Geg from './libs/geg.js'

Geg.use(GegBabylon)

let geg = new Geg({

  el: 'src/template.xml',

  template: "<engine><scene><camera type='ArcRotateCamera'></camera></scene></engine>"

})

3. 通过render与$mount方式。

import GegBabylon from './gegbabylon/index.js'

import Geg from './libs/geg.js'

Geg.use(GegBabylon)

let geg = new Geg({

    components: { App },

    render: (h) => h('App')

}).$mount()

## 官网地址 https://gegjs.com ## 其他语法

想了解更多语法指南，可参考Vuejs

生态圈

除了Vuejs对应插件外,还可以通过以下插件进行Gengine开发

  1. Geg-Babylonjs 通过Gengine实现对Babylonjs 3D引擎的操作。

  2. Geg-Threejs 通过Gengine实现对Threejs 3D引擎的操作。

回到顶部