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

你好2007 -
图形框架clunch如何实现跨端开发(uniapp+微信小程序)
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可选,表示绘图中除了基本的内置组件外使用到的自定义组件!
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

Tags 标签

前端html5canvasuniapp微信小程序

扩展阅读

加个好友,技术交流

1628738909466805.jpg