# @tbminiapp/egret-appx-component

> egret component

Latest version **0.1.21** (published 2020-12-29) · 0 weekly downloads

## Install

```sh
npm install @tbminiapp/egret-appx-component
pnpm add @tbminiapp/egret-appx-component
yarn add @tbminiapp/egret-appx-component
bun add @tbminiapp/egret-appx-component
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.21 |
| Published | 2020-12-29 |
| First published | 2020-04-22 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 352.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | chuyi |
| Maintainers | tbminiapp |

## Links

- npm: https://www.npmjs.com/package/@tbminiapp/egret-appx-component
- npm.io page: https://npm.io/package/@tbminiapp/egret-appx-component

## Recent versions

- 0.1.21 (latest) — 2020-12-29
- 0.1.20 — 2020-08-07
- 0.1.19 — 2020-08-07
- 0.1.18 — 2020-08-07
- 0.1.17 — 2020-07-16
- 0.1.16 — 2020-07-14
- 0.1.15-lazada — 2020-07-14
- 0.1.15 — 2020-07-09
- 0.1.14 — 2020-06-02
- 0.1.13 — 2020-05-27
- 0.1.12 — 2020-05-22
- 0.1.11 — 2020-05-19
- 0.1.10 — 2020-05-09
- 0.1.9 — 2020-05-08
- 0.1.8 — 2020-05-06
- … 3 more at https://npm.io/package/@tbminiapp/egret-appx-component/versions

## README

## 项目介绍

白鹭引擎(egret)小程序组件。可在支付宝/淘宝小程序环境下运行白鹭游戏。

## 如何使用egret 小程序组件

- Step1: 使用[小程序IDE](https://opendocs.alipay.com/mini/ide)，创建工程

- Step2: 打开app.json，添加如下配置

```
{
  "window": {
    "enableSkia": "true"
  }
}
```

- Step3: 安装egret组件

```
npm i @tbminiapp/egret-appx-component --by=yarn --save
```

- Step4: index.json中添加如下配置使用egret组件:

```
  "usingComponents": {
    "egret": "@tbminiapp/egret-appx-component/es/index"
  }
```

- Step5: 在axml中声明egret标签:

```
<view class="container">
  <egret
    onComponentReady="onComponentReady"
  />
</view>
```

- Step6: 引入白鹭游戏逻辑js文件，在onComponentReady生命周期函数中调用egret#runEgret启动游戏:

```
  require('path/to/game/js');// 确保game已绑定到$global变量上，名称为Main

  ...
  onComponentReady() {
    const {window} = $global;
    const {egret} = window;

    egret.runEgret({
      entryClassName: 'Main',
      orientation: 'auto',
      frameRate: 30,
      scaleMode: 'showAll',
      contentWidth: 480,
      contentHeight: 800,
      showFPS: false,
      fpsStyles: 'x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9',
      showLog: false,
      maxTouches: 2,
      //----auto option end----
      renderMode: 'canvas',
      audioType: 0,
      calculateCanvasScaleFactor: function(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio || context.backingStorePixelRatio ||
            1;
        return (window.devicePixelRatio) / backingStore;
      }
    });
  },
```

---
_Source: https://npm.io/package/@tbminiapp/egret-appx-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._