# 快速上手

# 环境准备

在开始 Bling 项目之前，你首先需要熟悉阿里小程序的开发，并准备好阿里小程序的开发环境，你可以通过阅读小程序开发指南的相关教程快速了解。

# 安装小程序组件

在标准小程序目录下执行命令：

npm i mini-ali-bling --by=yarn --save

你也可以在标准小程序目录下的 package.json 添加依赖 "mini-ali-bling": "*"，再执行安装命令：

npm i --by=yarn
# 或
# yarn install

注意

Bling 的小程序组件遵循 SemVer 规范，以上 "*" 是开发时方便，切忌在生产环境使用，即必须固定版本号，否则后果自负。

# 新建 Page

目录如下：

├── index.acss
├── index.axml
├── index.js
└── index.json

# index.json

在 index.json 里引用 Bling 的小程序组件：

{
  "defaultTitle": "Bling DEMO",
  "usingComponents": {
    "bling": "mini-ali-bling/bling"
  }
}

# index.axml

在 index.axml 中使用 <bling /> 组件：

<!-- 使用 ref 绑定 BlingRef 之后，会在组件初始化时触发 BlingRef 方法 -->
<bling
  className="bling"
  ref="BlingRef"
>
  <image src="https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/ants/ant.png" />
</bling>

# app.js

App({
  onLaunch() {
    const { Bling } = $global;

    // 获取引擎单例并启动，用于帧调度（一个 App 只需创建并共用一个）
    Bling.Engine.getInstance().start();
  },
});

# index.js

// 从全局对象 $global 中获取 Bling 对象
// 此对象是在小程序组件 mini-ali-bling 里注入的
const { Bling } = $global;

Page({
  // BlingRef 方法的参数 ref 为自定义组件实例，运行时由框架传递给 BlingRef 方法
  BlingRef(ref) {
    // 存储自定义组件实例，方便下面调用
    this.blingRef = ref;
  },
  onReady() {
    // 新建一个 MoveTo action，时长是3000ms，移动到 {120rpx, 240rpx}
    const action = Bling.MoveTo(3000, Bling.point(120, 240));

    // 使用自定义组件实例（显示对象）并设置其初始位置为 {200rpx, 50rpx}
    this.blingRef.setPosition(200, 50);
    // 执行 action
    this.blingRef.runAction(action);
  },
});

# 使用须知

因为 Bling 使用了小程序自定义组件，并需要 component2 相关功能，所以你的小程序项目要启动 component2。

启用方式：在 IDE 中的 详情 > 项目配置 中，勾选 启用 component2 编译。

← 简介引擎 →