图形框架clunch如何实现跨端开发(uniapp+微信小程序)
Posted 你好2007
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图形框架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可选,表示绘图中除了基本的内置组件外使用到的自定义组件!
以上是关于图形框架clunch如何实现跨端开发(uniapp+微信小程序)的主要内容,如果未能解决你的问题,请参考以下文章
uniapp推出小程序SDK,会是一场技术驱动的行业变革吗?