关于前端:图形框架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 可选，示意绘图中除了根本的内置组件外应用到的自定义组件！