小游戏示例说明文档

项目简介

本项目展示了 OPPO 小游戏平台的各种能力,旨在给 OPPO 小游戏开发者体验视觉、操作效果与代码参考,是使用 Cocos 引擎开发的小游戏,并上架到了 OPPO 小游戏大厅上,可直接在小游戏大厅搜索“示例”体验

主界面 广告 banner 广告

项目目录结构

项目代码资源统一放在 assets 文件夹下,目录采用扁平化的结构,一个 ts 文件代表一个页面,页面中也尽量放不超过五个功能,方便查看 demo 参考代码

源码 demo 下载

├─assets                                             项目代码资源统一存放地
|   ├─Scene                                          存放各种场景页面
|   |   ├─ad                                         存放广告相关的场景页
|   |     |-ad.fire                                  广告
|   |     |-bannerAd.fire                            banner 广告
|   |     |-insertAd.fire                            插屏广告
|   |     |-interstitialVideoAd.fire                 插屏视频广告
|   |     |-nativeAd.fire                            原生广告
|   |     |-smallNativeAd.fire                       原生广告 320 x 210
|   |     |-bigNativeAd.fire                         原生广告 640 x 320
|   |     └rewardVideoAd.fire                        激励视频广告
|   |   ├─main.fire                                  首页
|   |   ├─pay.fire                                   支付
|   |   ├─platform.fire                              平台能力
|   ├─Script                                         存放页面代码逻辑 ts 文件
|   |    ├─ad                                        广告相关
|   |     |-Ad.ts                                    广告首页
|   |     |-BannerAd.ts                              banner 广告
|   |     |-InsertAd.ts                              插屏广告
|   |     |-InterstitialVideo.ts                     插屏视频广告
|   |     |-NativeAd.ts                              原生广告
|   |     |-SmallNativeAd.ts                         原生广告 320 x 210
|   |     |-BigNativeAd.ts                           原生广告 640 x 320
|   |     └RewardVideoAd.ts                          激励视频广告
|   |   ├─pay                                        支付
|   |     |-Pay.ts                                   发起支付
|   |   ├─platform                                   平台能力
|   |    └Platform.ts                                首页
|   ├─Texture                                        存放图片资源
├─build                                              项目构建后会生成build目录
|   ├─quickgame                                      项目名
|   |   └dist/com.oppo.littleGameDemo.signed.apk     小游戏示例游戏包名,移动至手机games目录下,即可在快应用中调试游戏

代码规范

  1. 一个页面一个 ts 文件, ts 文件命名采用驼峰,统一放在 Script 里面,以文件夹分类,采用 es6语 法
  2. 图片资源统一放在 Texture

各页面注意点

页面功能点具体逻辑参考代码注释,以下列出注意点:

  1. 平台能力 Platform.ts
    • 版本号:暴露了全局变量 window.Global.platformVersionCode ,方便其他功能(比如环境检测)的 platformVersionCode 获取
      qg.getSystemInfo({
      success: res => {
        console.log(`系统信息: ${JSON.stringify(res)}`)
        // 全局储存平台版本号,后续可以通过 window.Global.platformVersionCode 获取,以检测某些游戏能力平台版本是否支持
        window.Global = {
          platformVersionCode: res.platformVersionCode
        }
      },
      fail: err => {
        console.log(`获取系统信息出错: ${JSON.stringify(err)}`)
      }
      })
      
  2. 支付 Pay.ts

    • 流程:
      ①.小游戏点击发起支付按钮,发送 appid、 token 等数据给服务器
      ②.服务器处理整合数据(请求数据携带回调 URL,方便平台返回数据)并用私钥签名,向平台发起统一下单请求
      ③.平台返回订单号等数据给服务器的回调地址,服务器返回时间戳、订单号、appkey、支付签名给小游戏
      ④.小游戏调起平台发起支付的接口请求
      ⑤.用户支付,可设置支付通知
    
    • 服务器代码:置于 server 文件夹下,是用 Node.js 编写的 demojava 的签名步骤可参考小游戏开发文档
    • 小游戏支付代码:置于 Pay.ts, 注意支付之前得先登录获取 token

项目调试方法

  • 小游戏示例:使用 CocosCreator 构建发布后将 build\quickgame\dist 目录下的 com.oppo.littleGameDemo.rpk 复制粘贴到 OPPO 手机的 games 目录下,之后在快应用中可查看到应用效果,并可在 chrome 调试,具体调试方法参考小游戏文档: chrome 调试runetime 使用说明
  • 支付服务端:所在 server 目录执行 node index.js 即可,注意先 npm i 安装依赖
© 2020 OPPO. All rights reserved.

results matching ""

    No results matching ""