An overview of the

Everyone is familiar with MPVue, which almost obliterates the differences between the browser side and the applet side. However, due to the nature of applets, some methods and functions in the browser cannot be completely ported to applets. For example, in some canvas applications, there is a big difference between the browser side and the small program. This article focuses on a more elegant way to use the canvas of the applet to smooth out the differences as much as possible. This is thanks to the power provided by MPVue.

Before that, you can take a quick look at this article (rendering your Virtual DOM to Canvas) to see how vnode2Canvas can be used gracefully on the browser side through vUE.

Show me the code

Let’s take a look at the code for drawing canvas in MPvue:

<template>
  <canvas canvas-id="canvas" :style="{width: width + 'px', height: height+'px'}"></canvas>
</template>

<script>

export default {
  data () {
    return {
      width: 0.height: 0}},canvasOptions: {
    canvasId: 'canvas'
  },
  renderCanvas (h) {
    let device = wx.getSystemInfoSync()
    this.width = device.windowWidth
    this.height = device.windowHeight
    return h('view', [
      h('image', {
        props: {
          src: 'https://pic.u51.com/sfs-gateway/api/v1/download/5f7dac8228354008ae6f69f67c1c0fa410d6'
        },
        style: {
          left: 10.top: 10.width: 100.height: 100.fill: '# 000'.fontSize: 18
        }
      }),
      h('text', {
        style: {
          left: 120.top: 10.fill: '# 000'.fontSize: 18.width: 150.ellipse: true}},'hello mpvue! ')]}}</script>
Copy the code

More examples: vnode2Canvas

This creates a canvas:

implementation

I have written an article about vnode2Canvas before, but at that time, I did not support MPVue. The previous implementation mainly used $watch to monitor the changes of Vnode, and then did canvas rendering according to vnode. For technical details, see rendering your Virtual DOM to Canvas

In fact, MPVue is the same as vNode transformation. The only difference is that there is a big difference between the Canvas API and applets on the browser side. So to smooth out the differences, we can learn from the way Axios smoothes the browser and Node sides. That is to say, we can make a rendering adapter for different ends of the rendering:

/** * adapter for browser of weixin Mini Program */
class RenderAdapter {
  constructor () {
    this.platform = constants.IN_WEIXIN ? 'wx' : 'browser'
  }
  renderText (instance, ctx, scrollTop) {
    let renderFn = {
      browser () {
        // Todo canvas Text render
      },
      wx () {
        // Canvas Text render todo applet
      }
    }
    renderFn[this.platform]()
  }
  // ...
}
Copy the code

Second is to pay attention to some small program end of the environment and browser end of the environment some differences, do some adaptive processing. This makes data-driven canvas rendering more elegant and enjoyable in MPVue. At the same time, vnode2Canvas encapsulates many small program canvas processing mechanisms and optimization mechanisms to achieve higher performance and stability.

Afterword.

Vnode2canvas draws canvas through the virtual DOM and uses the data hijacking of Vue to achieve the purpose of data-driven view. Thanks to MPVue, it can also be used in applets. Secondly, vnode2Canvas smooths out the development differences between different ends as much as possible through adapter at the bottom. It also supports event binding and list scrolling for elements inside the Canvas. Also welcome interested partners to discuss ~

With some links to vnode2Canvas:

Vnode2canvas project

Usage documentation in MPVue

Demo on browser