# vvshow

**Repository Path**: wangyuda2017/vvshow

## Basic Information

- **Project Name**: vvshow
- **Description**: 用来学习web前端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mpvue模板

``` 
  1. 使用mpvue2.0

  2. 集成mpvue-entry和mpvue-config-loader，集中式页面配置，统一构建入口

  3. 使用fly.io进行http请求

  4. 使用全局sass文件，不需页面单独引入sass，在src/static/style/base.scss

  5. 拥有events和自己方法myModule

  6. 拥有微信分包功能
```

#### myModule中mpCanvas使用方法
``` javascript
  import myModule from '@/utils/myModule'; 
  var mpCanvas = myModule.get('mpCanvas');

  var renderCanvas = mpCanvas.render.bind(ctx, canvasWidth, canvasHeight);
    // 传入一个数组，指定渲染每一项，所有单位都为数字
    var canvasFile = await renderCanvas([ // renderCanvas返回一个promise对象，可以使用await接收
    { // 画矩形
      type: 'rect',
      style: {
        width: '100%', // 可以指定100%，就是canvas的宽度，height同理
        height: 100,
        top: 40,
        left: 40,
        backgroundColor: '#0000a0', // 背景 可选
        borderWidth: 4, // 和borderColor配合使用 可选
        borderColor: '#00ff00',// 和borderWidth配合使用 可选
        borderRadius: 2 // 画圆角矩形，具体值和50%(圆) 可选
      }
    },

    { // 画图片
    type: 'image',
    props: {
      src: qrcodeBg // 需要下载网络图片，自己下载再传入
    },
    style: {
      left: 0,
      top: 0,
      width: '100%',
      height: '100%'
    }
  },

  { // 画文字
    type: 'text',
    text: '文字A',
    style: {  
      left: 58,
      top: 350, // 以文字top为准
      color: '#666666',
      fontSize: 24,
      width: 530, // 需要文字折行配合rowSpacing使用，规定文字段落的宽度可选
      rowSpacing: 12 // 需要文字折行配合width使用，规定文字行之间的间隔 可选
    }
  },

  ]);



```

###### @author 393640834@qq.com