init

README.md

@@ -1,2 +1,7 @@
 # wx-f2
-F2 的微信小程序版本
+
+F2 的微信小程序版本。
+
+可用微信开发者工具打开体验~~~
+
+## 使用文档补充中~~~~

app.js

@@ -0,0 +1,39 @@
+//app.js
+App({
+  onLaunch: function () {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+    // 获取用户信息
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+          wx.getUserInfo({
+            success: res => {
+              // 可以将 res 发送给后台解码出 unionId
+              this.globalData.userInfo = res.userInfo
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res)
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

app.json

@@ -0,0 +1,25 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/charts/line/index",
+    "pages/charts/area/index",
+    "pages/charts/bar/index",
+    "pages/charts/column/index",
+    "pages/charts/dodge/index",
+    "pages/charts/stackBar/index",
+    "pages/charts/pie/index",
+    "pages/charts/ring/index",
+    "pages/charts/rose/index",
+    "pages/charts/radar/index",
+    "pages/charts/gauge/index",
+    "pages/charts/double-axis/index",
+    "pages/charts/multiCharts/index"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "backgroundColor": "#eee",
+    "navigationBarBackgroundColor": "#eee",
+    "navigationBarTitleText": "AntV-F2 图表示例",
+    "navigationBarTextStyle": "black"
+  }
+}

app.wxss

@@ -0,0 +1,19 @@
+/**app.wxss**/
+.container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+} 
+
+ff-canvas {
+  width: 100%;
+  height: 100%;
+}

f2-canvas/f2-canvas.js

@@ -0,0 +1,113 @@
+// f2-canvas.js
+import Renderer from './lib/renderer';
+import F2 from './lib/f2';
+let ctx;
+// override
+F2.Util.measureText = function (text, font) {
+  ctx.font = font || '12px sans-serif';
+  return ctx.measureText(text);
+};
+
+F2.Util.addEventListener = function (source, type, listener) {
+  source.addListener(type, listener);
+};
+
+F2.Util.removeEventListener = function (source, type, listener) {
+  source.removeListener(type, listener);
+};
+
+F2.Util.createEvent = function (event, chart) {
+  const type = event.type;
+  let x = 0;
+  let y = 0;
+  const touches = event.touches;
+  if (touches && touches.length > 0) {
+    x = touches[0].x;
+    y = touches[0].y;
+  }
+
+  return {
+    type,
+    chart,
+    x,
+    y
+  };
+};
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'f2-canvas'
+    },
+
+    opts: {
+      type: Object
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  ready: function () {
+    if (!this.data.opts) {
+      console.warn('组件需绑定 opts 变量，例：<ff-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" opts="{{ opts }}"></ff-canvas>');
+      return;
+    }
+
+    if (!this.data.opts.lazyLoad) {
+      this.init();
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    init: function(callback) {
+      const version = wx.version.version.split('.').map(n => parseInt(n, 10));
+      const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
+        || (version[0] === 1 && version[1] === 9 && version[2] >= 91);
+      if (!isValid) {
+        console.error('微信基础库版本过低，需大于等于 1.9.91。');
+        return;
+      }
+
+      ctx = wx.createCanvasContext(this.data.canvasId, this); // 获取小程序上下文
+      const canvas = new Renderer(ctx);
+      this.canvas = canvas;
+
+      const query = wx.createSelectorQuery().in(this);
+      query.select('.f2-canvas').boundingClientRect(res => {
+        if (typeof callback === 'function') {
+          this.chart = callback(canvas, res.width, res.height);
+        } else if (this.data.opts && this.data.opts.onInit) {
+          this.chart = this.data.opts.onInit(canvas, res.width, res.height);
+        }
+      }).exec();
+    },
+    touchStart(e) {
+       if (this.canvas) {
+         this.canvas.emitEvent('touchstart', [e]);
+       }
+    },
+    touchMove(e) {
+      if (this.canvas) {
+        this.canvas.emitEvent('touchmove', [e]);
+      }
+    },
+    touchEnd(e) {
+      if (this.canvas) {
+        this.canvas.emitEvent('touchend', [e]);
+      }
+    }
+  }
+})

f2-canvas/f2-canvas.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

f2-canvas/f2-canvas.wxml

@@ -0,0 +1,10 @@
+<canvas 
+class="f2-canvas" 
+canvas-id="{{ canvasId }}"
+disable-scroll="{{true}}"
+bindinit="init"
+bindtouchstart="touchStart" 
+bindtouchmove="touchMove" 
+bindtouchend="touchEnd"
+>
+</canvas>

f2-canvas/f2-canvas.wxss

@@ -0,0 +1,5 @@
+/* f2-canvas.wxss */
+.f2-canvas {
+  width: 100%;
+  height: 100%;
+}