chore: 添加小程序演示示例 (#1830)

packages/f2-my/examples/test/.mini-ide/project-ide.json

@@ -0,0 +1,3 @@
+{
+  "enableLegacyRemoteDebug": false
+}

packages/f2-my/examples/test/app.acss

@@ -0,0 +1,3 @@
+page {
+  background: #f7f7f7;
+}

packages/f2-my/examples/test/app.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+App({
+  onLaunch(_options) {
+    // 第一次打开
+    // options.query == {number:1}
+    console.info('App onLaunch');
+  },
+  onShow(_options) {
+    // 从后台被 scheme 重新打开
+    // options.query == {number:1}
+  },
+});

packages/f2-my/examples/test/app.json

@@ -0,0 +1,8 @@
+{
+  "pages": [
+    "pages/index/index"
+  ],
+  "window": {
+    "defaultTitle": "My App"
+  }
+}

packages/f2-my/examples/test/babel.config.json

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "runtime": "automatic",
+        "importSource": "@antv/f2"
+      }
+    ]
+  ]
+}

packages/f2-my/examples/test/mini.project.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "beforeCompile": "npm run beforeCompile"
+  },
+  "enableNodeModuleBabelTransform": true,
+  "component2": true,
+  "enableAppxNg": true
+}

packages/f2-my/examples/test/package.json

@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "beforeCompile": "babel pages --out-dir pages --only **/*.jsx"
+  },
+  "dependencies": {
+    "@antv/f2": "^5.0.0",
+    "@antv/f-my": "^1.0.0",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-react-jsx": "^7.16.0"
+  }
+}

packages/f2-my/examples/test/pages/index/chart.js

@@ -0,0 +1,23 @@
+import { Chart, Interval } from '@antv/f2';
+import { jsx as _jsx } from "@antv/f2/jsx-runtime";
+export default (props => {
+  const {
+    data
+  } = props;
+  return _jsx(Chart, {
+    data: data,
+    children: _jsx(Interval, {
+      x: "genre",
+      y: "sold",
+      color: "genre",
+      selection: {
+        selectedStyle: {
+          fillOpacity: 1
+        },
+        unSelectedStyle: {
+          fillOpacity: 0.4
+        }
+      }
+    })
+  });
+});

packages/f2-my/examples/test/pages/index/chart.jsx

@@ -0,0 +1,22 @@
+import { Chart, Interval } from '@antv/f2';
+
+export default (props) => {
+  const { data } = props;
+  return (
+    <Chart data={data}>
+      <Interval
+        x="genre"
+        y="sold"
+        color="genre"
+        selection={{
+          selectedStyle: {
+            fillOpacity: 1,
+          },
+          unSelectedStyle: {
+            fillOpacity: 0.4,
+          },
+        }}
+      />
+    </Chart>
+  );
+};

packages/f2-my/examples/test/pages/index/index.acss

@@ -0,0 +1,5 @@
+/* required by usingComponents */
+.container {
+  width: 100%;
+  height: 600rpx;
+}

packages/f2-my/examples/test/pages/index/index.axml

@@ -0,0 +1,3 @@
+<view class="container">
+  <f-canvas onRender="onRenderChart" data="{{chartData}}"></f-canvas>
+</view>

packages/f2-my/examples/test/pages/index/index.js

@@ -0,0 +1,71 @@
+// 通过 createElement 方式创建
+// import { createElement } from '@antv/f2';
+import Chart from './chart';
+
+/* eslint-disable */
+import { jsx as _jsx } from "@antv/f2/jsx-runtime";
+const data1 = [{
+  genre: 'Sports',
+  sold: 275
+}, {
+  genre: 'Strategy',
+  sold: 115
+}, {
+  genre: 'Action',
+  sold: 120
+}, {
+  genre: 'Shooter',
+  sold: 350
+}, {
+  genre: 'Other',
+  sold: 150
+}];
+const data2 = [{
+  genre: 'Sports',
+  sold: 275
+}, {
+  genre: 'Strategy',
+  sold: 115
+}, {
+  genre: 'Action',
+  sold: 20
+}, {
+  genre: 'Shooter',
+  sold: 50
+}, {
+  genre: 'Other',
+  sold: 50
+}];
+var isAppX2CanvasEnv = function isAppX2CanvasEnv() {
+  return my.canIUse('canvas.onReady') && my.canIUse('createSelectorQuery.return.node');
+};
+Page({
+  data: {
+    // chartData: data1,
+  },
+  onReady() {
+    this.setData({
+      chartData: data1
+    });
+    // 模拟数据更新
+    setTimeout(() => {
+      this.setData({
+        chartData: data2
+      });
+    }, 2000);
+  },
+  onRenderChart(props) {
+    console.log('isAppX2CanvasEnv', isAppX2CanvasEnv());
+    const {
+      data
+    } = props;
+    return _jsx(Chart, {
+      data: data
+    });
+
+    // 如果不使用 jsx, 用下面代码效果也是一样的
+    // return createElement(Chart, {
+    //   data: data,
+    // });
+  }
+});

packages/f2-my/examples/test/pages/index/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "f-canvas": "@antv/f-my"
+  }
+}

packages/f2-my/examples/test/pages/index/index.jsx

@@ -0,0 +1,52 @@
+// 通过 createElement 方式创建
+// import { createElement } from '@antv/f2';
+import Chart from './chart';
+
+/* eslint-disable */
+
+const data1 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const data2 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 20 },
+  { genre: 'Shooter', sold: 50 },
+  { genre: 'Other', sold: 50 },
+];
+
+var isAppX2CanvasEnv = function isAppX2CanvasEnv() {
+  return my.canIUse('canvas.onReady') && my.canIUse('createSelectorQuery.return.node');
+};
+
+Page({
+  data: {
+    // chartData: data1,
+  },
+  onReady() {
+    this.setData({
+      chartData: data1,
+    });
+    // 模拟数据更新
+    setTimeout(() => {
+      this.setData({
+        chartData: data2,
+      });
+    }, 2000);
+  },
+  onRenderChart(props) {
+    console.log('isAppX2CanvasEnv', isAppX2CanvasEnv());
+    const { data } = props;
+    return <Chart data={data} />;
+
+    // 如果不使用 jsx, 用下面代码效果也是一样的
+    // return createElement(Chart, {
+    //   data: data,
+    // });
+  },
+});

packages/f2-my/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@antv/f2-my",
+  "private": true,
+  "version": "5.0.0",
+  "homepage": "https://github.com/antvis/f2",
+  "bugs": {
+    "url": "https://github.com/antvis/f2/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/f2"
+  },
+  "author": "https://github.com/orgs/antvis/people"
+}

packages/f2-wx/examples/test/app.js

@@ -0,0 +1,20 @@
+// app.js
+/* eslint-disable */
+App({
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || [];
+    logs.unshift(Date.now());
+    wx.setStorageSync('logs', logs);
+
+    // 登录
+    wx.login({
+      success: () => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      },
+    });
+  },
+  globalData: {
+    userInfo: null,
+  },
+});

packages/f2-wx/examples/test/app.json

@@ -0,0 +1,13 @@
+{
+  "pages":[
+    "pages/index/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle":"black"
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

packages/f2-wx/examples/test/app.wxss

@@ -0,0 +1 @@
+/**app.wxss**/

packages/f2-wx/examples/test/babel.config.json

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "runtime": "automatic",
+        "importSource": "@antv/f-engine"
+      }
+    ]
+  ]
+}

packages/f2-wx/examples/test/package.json

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "beforeCompile": "babel pages --out-dir pages --only **/*.jsx"
+  },
+  "dependencies": {
+    "@antv/f2": "^5.0.0",
+    "@antv/f-wx": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-react-jsx": "^7.16.0"
+  }
+}

packages/f2-wx/examples/test/pages/index/chart.js

@@ -0,0 +1,28 @@
+import { Chart, Interval, Axis, Legend, Tooltip } from '@antv/f2';
+import { jsx as _jsx } from "@antv/f-engine/jsx-runtime";
+import { jsxs as _jsxs } from "@antv/f-engine/jsx-runtime";
+export default (props => {
+  const {
+    data
+  } = props;
+  return _jsxs(Chart, {
+    data: data,
+    children: [_jsx(Axis, {
+      field: "genre"
+    }), _jsx(Axis, {
+      field: "sold"
+    }), _jsx(Interval, {
+      x: "genre",
+      y: "sold",
+      color: "genre",
+      selection: {
+        selectedStyle: {
+          fillOpacity: 1
+        },
+        unSelectedStyle: {
+          fillOpacity: 0.4
+        }
+      }
+    }), _jsx(Legend, {}), _jsx(Tooltip, {})]
+  });
+});

packages/f2-wx/examples/test/pages/index/chart.jsx

@@ -0,0 +1,26 @@
+import { Chart, Interval, Axis, Legend, Tooltip } from '@antv/f2';
+
+export default (props) => {
+  const { data } = props;
+  return (
+    <Chart data={data}>
+      <Axis field="genre" />
+      <Axis field="sold" />
+      <Interval
+        x="genre"
+        y="sold"
+        color="genre"
+        selection={{
+          selectedStyle: {
+            fillOpacity: 1,
+          },
+          unSelectedStyle: {
+            fillOpacity: 0.4,
+          },
+        }}
+      />
+      <Legend />
+      <Tooltip />
+    </Chart>
+  );
+};