Merge pull request #18 from lucaszhu2zgf/component

新增小程序组件方式的调用

.npmignore

@@ -3,4 +3,5 @@ src
 webpack.config.js
 dist/progress.js
 .vscode
-.babelrc
+.babelrc
+.github

README.md

@@ -11,7 +11,36 @@
 $ npm install mp-progress --save
 ```
 
-## 用法
+## 组件方式的调用（简单易用）
+在对应页面引入组件，初始化data并在wxml中使用组件
+```
+{
+  "navigationBarTitleText": "首页",
+  "usingComponents": {
+    "mpProgress": "mp-progress/dist/component/mp-progress"
+  }
+}
+...
+// 参数使用方式相同，canvasSize默认是400*400
+data = {
+  config: {
+    canvasSize: {
+      width: 400,
+      height: 400
+    },
+    percent: 100,
+    barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
+    needDot: true,
+    dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
+  },
+  percentage: 0
+}
+...
+<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>
+```
+该方式遵从双向绑定数据的原则，当页面改变percentage，mp-progress会自动更新视图
+
+## API方式调用（适合需要在mp-progress上层构建新组件的需求）
 
 传入的单位是`rpx`，即如果canvas宽度为400rpx，则传入400，后续会自动计算真实尺寸
 ```

dist/component/mp-progress.js

@@ -0,0 +1,43 @@
+import MpProgress from "../progress.min.js";
+
+Component({
+    options: {
+        addGlobalClass: true,
+    },
+    properties: {
+        config: {
+            type: Object,
+            value: {}
+        },
+        percentage: {
+            type: Number,
+            value: 0
+        }
+    },
+    data: {
+        customOptions: {
+            canvasSize: {
+                width: 400,
+                height: 400
+            },
+            percent: 100
+        },
+        canvasId: `mp_progress_${new Date().getTime()}`
+    },
+    attached() {
+        const customOptions = Object.assign({}, this.data.customOptions, this.data.config);
+        this.setData({customOptions});
+    },
+    ready() {
+        this._mpprogress = new MpProgress(Object.assign({}, this.data.customOptions, {canvasId: this.data.canvasId, target: this}));
+        this._mpprogress.draw(this.data.percentage || 0);
+    },
+    observers: {
+        'percentage': function (percentage) {
+            if (this._mpprogress) {
+                // 第一次进来的时候还没有初始化完成
+                this._mpprogress.draw(percentage);
+            }
+        },
+    }
+});

dist/component/mp-progress.json

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

dist/component/mp-progress.wxml

@@ -0,0 +1 @@
+<canvas class="mp-progress" type="2d" id="{{canvasId}}" style="width: {{customOptions.canvasSize.width}}rpx; height: {{customOptions.canvasSize.height}}rpx"></canvas>

dist/progress.js

@@ -1,4 +1,4 @@
-/*! mp-progress.js v1.2.8 https://www.npmjs.com/package/mp-progress */
+/*! mp-progress.js v1.2.10 https://www.npmjs.com/package/mp-progress */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();

package.json

@@ -1,8 +1,9 @@
 {
     "name": "mp-progress",
-    "version": "1.2.8",
+    "version": "1.2.10",
     "description": "circle progress for wechat miniprogram",
     "main": "dist/progress.min.js",
+    "miniprogram": "dist",
     "scripts": {
         "debug": "webpack",
         "watch": "webpack --watch",