Navigation

第 3 部分 - 如何使用插件

Published on 23rd April 2021

我们开始启用游戏网络货币化插件,看看有哪些功能可用。

我们开始之前,您应该已经向 Coil 和像 Uphold 等数字钱包服务提供商注册。如果您未注册,请返回第 2 部分进行注册, 因为从这一步开始,每个步骤都以注册为基础。

登录Coil 网站,然后进入设置寻找付款,然后就看到您的支付指示器:

付款指示器

下载插件

下载或浏览游戏网络货币化 GitHub repo。如果您习惯使用 git,就可以通过以下网址浏览:

https://github.com/photonstorm/gamewebmonetization.git

或者 ssh:

git@github.com:photonstorm/gamewebmonetization.git

如果您愿意,您可以下载整个 repo 的 zip 文件。

一旦文件下载到您的计算机,就可以在 plugin/dist/ 文件夹找到该插件,其名为 GameWebMonetization.js

创建测试页面

为了检查该插件是否正常工作,我们创建一个简单的测试页面。打开您喜欢的代码编辑器,创建新文件夹,并在其中保存空 index.htmlmain.js 文件。

基文件

我们首先编辑 index.html ,通过调用 main.js 并将其定义为一个模块,创建其基本结构。将以下内容粘贴到索引文件中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏网络货币化</title>
</head>
<body>
    <script src="./main.js" type="module"></script>
</body>
</html>

plugin/dist/GameWebMonetization.js 复制插件,因此,它将和您已经获取的索引和主文件在一起:

基文件

此版本的插件显示为 ESM(ES 模块),所以我们可以直接将其加载到 main.js。在本教程中,我们使用导入和现代 JavaScript。不过,如果您需要 ES5 和 TypeScript 版本,也可以在 plugin 文件夹中找到它们。但是,在本教程其余部分,我们使用 ESM。

编辑 main.js,导入您的插件:

import { GameWebMonetization } from './GameWebMonetization.js';

导入模块后,我们可以实例化插件。构造函数需要含 paymentPointer 的配置对象。这就是为何您必须从钱包服务中获得配置对象的原因。

将以下内容添加到 main.js,切记用您自己的以下内容,替换 paymentPointer 值:

const gameWebMonetization = new GameWebMonetization({ paymentPointer: '$ilp.uphold.com/zdXzL8aWJ4ii' });

我们所做的是导入模块,创建插件的实例,并为其分配一个支付指示器。现在,我们只需要启动支付指示器。

在浏览器中打开 index.html。在本教程中,我们使用的是 Visual Studio CodeLive Server 扩展程序,但您可以使用任何方法,只要文件是提供给您的浏览器,而不是直接打开的。

打开后,它仍然会显示该网站未货币化。这是因为我们已经准备好插件,但尚未_开始_货币化:

未货币化 coil 插件

我们返回并编辑 main.js,启动货币化流程。可以通过start()方法进行此操作:

import { GameWebMonetization } from './GameWebMonetization.js';

const gameWebMonetization = new GameWebMonetization({ paymentPointer: '$ilp.uphold.com/zdXzL8aWJ4ii' });

gameWebMonetization.start();

现在,如果我们返回浏览器并刷新,我们会看到我们的网站开始货币化:

可货币化

恭喜!本页面正通过 Interledger 协议将少量的货币流入到您的数字钱包。

如果出错,记得检查:

  1. 您是否有 Coil 订阅账户。
  2. 您已经充分验证您的 Uphold(或其他钱包)服务
  3. 支付指示器 URL 已经在代码中更改为您自己的指示器 URL。
  4. 您在服务测试页面,而不是在浏览器中直接打开它。

仅使用此配置,您就已经成功将此页面货币化。但是,至少给游戏玩家一些奖励,这点很重要。若要做到这一点,您可以利用插件提供的方法和属性。下面我们来深入探讨这些问题。