小程序生成朋友圈海报分享图

share-pointer 小程序小程序生成分享图组件

切换npm源

npm config set registry http://47.114.119.218:4873

安装

npm install share-pointer -S

在wepy中引用

<script>
 wepy.page({
   ...
   data: {
     posterData: {...},
     isCanDraw: false
   }，
   methods: {
     createPointer() {
       this.isCanDraw = true;
     }
   }
 })
</script>
<template>
 <view>
  <button @tap="">生成海报</button>
  <ShareBox :is-draw="isCanDraw" :poster-data="posterData" @initData="isCanDraw = false" />
 </view>
</template>
<config>
{
  usingComponents: {
    "ShareBox":'module:share-pointer/dist/ShareBox',
  }
}
</config>

poster-data

海报布局样式，具体结构类似于

 {
    'width': '654rpx',
    'height': '1000rpx',
    'background': '#FEF8F3',
    'views': [
      {
        'type': 'qrcode',
        'content': '哈哈哈',
        'css': {
          'color': '#000000',
          'background': '#ffffff',
          'width': '200rpx',
          'height': '200rpx',
          'top': '779rpx',
          'left': '29rpx',
          'rotate': '0',
          'borderRadius': '10rpx'
        }
      },
      ....
    ]
 }

可以通过网站生成布局后调整；

注意事项

poster-data中的单位修改为rpx，网站生成的布局代码有多位小数的要取下整