# f6 for wx

微信小程序中快速使用 F6 的小工具，帮助用户封装了一些基础的操作，用户也可以参考这里的封装自行处理

## 基础参数

| 属性名 | 默认值 | 类型 | 是否必传 | 描述 |
| --- | --- | --- | --- | --- |
| width | 100 | Number | 否 | canvas 的宽度，这个值是页面中组件的宽度 |
| height | 100 | Number | 否 | canvas 的高度，这个值是页面中组件的高度 |
| pixelRatio | 1 | Number | 否 | 设备像素比，这个字段很关键！！！不传递绘制的图非高清！！！字段来自 getSystemInfo/getSystemInfoSync |
| onInit | 空 | Function | 否 | canvas 初始化完成后返回，会携带相关的信息回来，具体看下方表格 |
| onTouchEvent | 空 | Function | 否 | 所有的 touch 事件都来源这里，如果需要 f6 处理事件，都需自行传递，未统一处理的原因为，业务方可能需自行定制 |
| onError | 空 | Function | 否 | canvas 创建失败的回调 |
| style | 空 | String | 否 | 就是简单的 css 样式 |

## onInit 函数的回调

| 参数 | 描述 |
| --- | --- |
| context | canvas 的 context，由组件创建 |
| rect | 组件当前所在的位置 |
| canvas | native canvas 返回的 element |
| renderer | 渲染模式，在小程序下，f6 由两种模式， `mini` 和 `mini-native` 分别对应 web-canvas 和 native-canvas |

## 推荐组件

目前存在 2 个组件，一个是 container，另一个是 canvas，container 写法限制性较多，建议使用 canvas，两个组件差别不大，只是事件回传的操作些许区别。

- canvas(推荐)

canvas 使用 bind:来触发事件，会更容易和原有代码结合

```
<f6-canvas
  width="{{width}}"
  height="{{height}}"
  forceMini="{{forceMini}}"
  pixelRatio="{{pixelRatio}}"
  bind:onTouchEvent="handleTouch"
  bind:onInit="handleInit"
></f6-canvas>
```

js 中处理事件

```
Page({
  data: {
  },
  handleInit(ctx, rect, canvas, renderer) {
  },
  handleTouch(e) {
  },
})

```

- container

```
<f6-canvas
  width="{{width}}"
  height="{{height}}"
  forceMini="{{forceMini}}"
  pixelRatio="{{pixelRatio}}"
  onTouchEvent="{{handleTouch}}"
  onInit="{{handleInit}}"
></f6-canvas>
```

js 中处理事件, 如果使用 container，只能在 data 中处理逻辑

```
Page({
  data: {
    ...
    handleInit(ctx, rect, canvas, renderer) {
    },
    handleTouch(e) {
    },
  },
})

```

# demo

https://github.com/openwayne/g6-component-wx-demo