增加echart示例、图片剪切示例、可滑动九宫格示例、修改部分文字描述、优化列表到详情示例的打开速度

examples/hello-uniapp/App.vue

@@ -75,7 +75,6 @@
 		font-size: 32px;
 		font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
 	}
-
 	.page-head {
 		padding: 60px 50px 80px;
 		text-align: center;
@@ -265,5 +264,4 @@
 		background-color: #F1F1F1;
 		color: #353535;
 	}
-
 </style>

examples/hello-uniapp/components/mpvue-echarts/src/echarts.vue

@@ -0,0 +1,152 @@
+<template>
+  <canvas
+    v-if="canvasId"
+    class="ec-canvas"
+    :id="canvasId"
+    :canvasId="canvasId"
+    @touchstart="touchStart"
+    @touchmove="touchMove"
+    @touchend="touchEnd"
+    @error="error">
+  </canvas>
+</template>
+
+<script>
+import WxCanvas from './wx-canvas';
+
+export default {
+  props: {
+    echarts: {
+      required: true,
+      type: Object,
+      default() {
+        return null;
+      },
+    },
+    onInit: {
+      required: true,
+      type: Function,
+      default: null,
+    },
+    canvasId: {
+      type: String,
+      default: 'ec-canvas',
+    },
+    lazyLoad: {
+      type: Boolean,
+      default: false,
+    },
+    disableTouch: {
+      type: Boolean,
+      default: false,
+    },
+    throttleTouch: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  onReady() {
+    if (!this.echarts) {
+      console.warn('组件需绑定 echarts 变量，例：<ec-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" :echarts="echarts"></ec-canvas>');
+      return;
+    }
+
+    if (!this.lazyLoad) this.init();
+  },
+  methods: {
+    init() {
+      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。'
+          + '参见：https://github.com/ecomfe/echarts-for-weixin'
+          + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
+        return;
+      }
+
+      if (!this.onInit) {
+        console.warn('请传入 onInit 函数进行初始化');
+        return;
+      }
+
+      const { canvasId } = this;
+      this.ctx = wx.createCanvasContext(canvasId);
+
+      const canvas = new WxCanvas(this.ctx, canvasId);
+
+      this.echarts.setCanvasCreator(() => canvas);
+
+      const query = wx.createSelectorQuery();
+      query.select(`#${canvasId}`).boundingClientRect((res) => {
+        if (!res) {
+          setTimeout(() => this.init(), 50);
+          return;
+        }
+        this.chart = this.onInit(canvas, res.width, res.height);
+      }).exec();
+    },
+    canvasToTempFilePath(opt) {
+      const { canvasId } = this;
+      this.ctx.draw(true, () => {
+        wx.canvasToTempFilePath({
+          canvasId,
+          ...opt,
+        });
+      });
+    },
+    touchStart(e) {
+      const { disableTouch, chart } = this;
+      if (disableTouch || !chart || !e.mp.touches.length) return;
+      const touch = e.mp.touches[0];
+      chart._zr.handler.dispatch('mousedown', {
+        zrX: touch.x,
+        zrY: touch.y,
+      });
+      chart._zr.handler.dispatch('mousemove', {
+        zrX: touch.x,
+        zrY: touch.y,
+      });
+    },
+    touchMove(e) {
+      const {
+        disableTouch, throttleTouch, chart, lastMoveTime,
+      } = this;
+      if (disableTouch || !chart || !e.mp.touches.length) return;
+
+      if (throttleTouch) {
+        const currMoveTime = Date.now();
+        if (currMoveTime - lastMoveTime < 240) return;
+        this.lastMoveTime = currMoveTime;
+      }
+
+      const touch = e.mp.touches[0];
+      chart._zr.handler.dispatch('mousemove', {
+        zrX: touch.x,
+        zrY: touch.y,
+      });
+    },
+    touchEnd(e) {
+      const { disableTouch, chart } = this;
+      if (disableTouch || !chart) return;
+      const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
+      chart._zr.handler.dispatch('mouseup', {
+        zrX: touch.x,
+        zrY: touch.y,
+      });
+      chart._zr.handler.dispatch('click', {
+        zrX: touch.x,
+        zrY: touch.y,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

examples/hello-uniapp/components/mpvue-echarts/src/wx-canvas.js

@@ -0,0 +1,73 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+
+    WxCanvas.initStyle(ctx);
+    this.initEvent();
+  }
+
+  getContext(contextType) {
+    return contextType === '2d' ? this.ctx : null;
+  }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent() {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  static initStyle(ctx) {
+    const styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
+      'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
+      'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
+
+    styles.forEach((style) => {
+      Object.defineProperty(ctx, style, {
+        set: (value) => {
+          if ((style !== 'fillStyle' && style !== 'strokeStyle')
+            || (value !== 'none' && value !== null)
+          ) {
+            ctx[`set${style.charAt(0).toUpperCase()}${style.slice(1)}`](value);
+          }
+        },
+      });
+    });
+
+    ctx.createRadialGradient = () => ctx.createCircularGradient(arguments);
+  }
+
+  initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown',
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove',
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup',
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click',
+    }];
+
+    eventNames.forEach((name) => {
+      this.event[name.wxName] = (e) => {
+        const touch = e.mp.touches[0];
+        this.chart._zr.handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
+        });
+      };
+    });
+  }
+}

examples/hello-uniapp/components/page-foot.vue

@@ -0,0 +1,38 @@
+<template name="page-foot">
+	<view class="page-share-title">
+		<text>感谢{{name}}提供本示例，</text>
+		<text class="submit" @tap="submit">我也提交</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "page-foot",
+		props: {
+			name: {
+				type: String,
+				default: ""
+			}
+		},
+		methods: {
+			submit() {
+				uni.showModal({
+					content:"hello uni-app开源地址为https://github.com/dcloudio/uni-app/tree/master/examples，请在这个开源项目上贡献你的代码",
+					showCancel:false
+				})
+			}
+		}
+	}
+</script>
+<style>
+	.page-share-title {
+		text-align: center;
+		font-size: 30px;
+		color: #BEBEBE;
+		margin: 20px 0;
+	}
+
+	.submit {
+		border-bottom: 1px solid #BEBEBE;
+	}
+</style>