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