How to realize cross end development of graphics framework cluster (uniapp + wechat applet)

Time:2021-10-14

uni-app

We provide a uni app component, which needs to be registered after introduction:

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

export default {
    components:{
        uiClunch
    }
};

After registration, you can use it on the page:

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

Warm tip: the width and height attributes above support common operations. In addition to numbers, they also support Px, VH, VW, rpx and other units.

Finally, start the drawing:

var clunch = this.$refs.clunch.new({
    //Currently, only MouseMove events are supported
    template:``,
    // ......
},seriesList);

Warm tip: serieslist is optional. It represents the custom components used in the drawing in addition to the basic built-in components!

Wechat applet

We provide a wechat applet component, which needs to be installed first:

npm install --save clunch

After installation, configure the initialization command:

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

Then perform the following:

npm run init-clunch

Next, you need to build NPM (through “tools” – “build NPM” in the wechat applet development tool interface).

Then register the component:

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

After registration, you can use it on the page:

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

Warm tip: the width and height attributes above support common operations. In addition to numbers, they also support Px, VH, VW, rpx and other units.

Finally, start the drawing:

this.selectComponent('#clunch').new({
    //Currently, only MouseMove events are supported
    template:``,
    // ......
} , seriesList , clunch => {
    // todo
});

Warm tip: serieslist is optional. It represents the custom components used in the drawing in addition to the basic built-in components!