@antv/f6-wx
微信小程序f6组件
Last updated 9 days ago by openwayne .
MIT · Original npm · Tarball · package.json
$ cnpm install @antv/f6-wx 
SYNC missed versions from official npm registry.

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 由两种模式, minimini-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

Current Tags

  • 0.0.4                                ...           latest (9 days ago)

4 Versions

  • 0.0.4                                ...           9 days ago
  • 0.0.3                                ...           22 days ago
  • 0.0.2                                ...           4 months ago
  • 0.0.1                                ...           4 months ago
Downloads
Today 0
This Week 0
This Month 24
Last Day 0
Last Week 12
Last Month 21
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |