图形框架clunch如何实现跨端开发（uniapp+微信小程序）

Posted 2021-09-03 你好2007

uni-app

我们提供的是一个uni-app组件，引入以后需要进行注册：

import uiClunch from \'clunch/platform/uni-app/index.vue\';

export default {
    components:{
        uiClunch
    }
};

注册完毕就可以在页面中使用了：

<ui-clunch ref=\'clunch\' width=\'100vw\' height=\'100vh-10px\'></ui-clunch>

温馨提示：上面的宽、高属性支持常见的运算，除了数字外，还支持px、vh、vw和rpx等单位。

最后，启动绘图：

var clunch = this.$refs.clunch.new({
    // 目前只支持mousemove事件
    template:``,
    // ......
},seriesList);

温馨提示：seriesList可选，表示绘图中除了基本的内置组件外使用到的自定义组件！

微信小程序

我们提供的是一个微信小程序组件，首先需要安装：

npm install --save clunch

安装完毕以后，配置初始化命令：

// package.json
{
    "init-clunch": "clunch --weixin ./ui-clunch"
}

然后执行一下：

npm run init-clunch

接着，你还需要构建npm（通过在微信小程序开发工具界面的『工具』->『构建 npm』）。

然后注册组件：

// page.json
{
    "usingComponents": {
        "ui-clunch": "../../ui-clunch/index"
    }
}

注册完毕就可以在页面中使用了：

<ui-clunch id=\'clunch\' width=\'200px\' height=\'100px\'></ui-clunch>

温馨提示：上面的宽、高属性支持常见的运算，除了数字外，还支持px、vh、vw和rpx等单位。

最后，启动绘图：

this.selectComponent(\'#clunch\').new({
    // 目前只支持mousemove事件
    template:``,
    // ......
} , seriesList , clunch => {
    // todo
});

温馨提示：seriesList可选，表示绘图中除了基本的内置组件外使用到的自定义组件！