uniapp微信小程序生成分享海报

目前uniapp微信小程序生成分享海报有很多种方式，本文介绍使用Painter+拖拽的方式

.插件地址

Painter (Painter 的插件)
拖曳布局组件 （大神写的拖拽布局）

.引入Painter

1.可以直接下载源码，然后再uniapp 项目下新建文件夹static,将Painter/components/painter/的文件拷贝到文件夹下，然后在page.json对应页面引入组件

                "usingComponents":{
                    "painter":"/static/painter/painter"
                }

也可以直接使用git 命令
git submodule add https://github.com/Kujiale-Mobile/PainterCore.git components/painter，记得文件放在static 文件下，不要放在components下，不然编译后找不到组件
2.在https://lingxiaoyi.github.io/painter-custom-poster布局好你需要的海报样子，然后复制代码，如图

image.png ，接在在你的项目下新建card.js文件，把刚复制的内容粘贴到里面，
3.在页面内引入card.js

import Card from './card.js';

在template中如下代码

<view>
  <view class="content-img" @longPress="saveImage">
    <image :src="imagePath" @tap="previewClick" class="img-preview" mode="scaleToFill"></image>
  </view>
  <view class="canvas-box">
    <painter customStyle='margin-left:40rpx' :palette="template" @imgErr="imgErr" @imgOK="onImgOK" />
  </view>
</view>

在script中如下代码

methods:{
            initData(){
                uni.showLoading({
                    title:"拼命生成中...",
                    mask:true,
                });
                this.template = new Card ().palette()
            },
            onImgOK(e) {
                this.imagePath = e.detail.path;
                uni.hideLoading();
            },
            imgErr(e){
                uni.hideLoading();
                uni.showModal({
                    title:'提示',
                    content:"生成海报失败",
                    showCancel:false,
                })
                console.log(e);
            },
            saveImage() {  //长按保存
                var _this = this;
                uni.authorize({
                    scope:"scope.writePhotosAlbum",
                    success() {
                        uni.saveImageToPhotosAlbum({
                            filePath: _this.imagePath,
                            success(){
                                uni.showModal({
                                    title:"保存成功",
                                    content:"图片已成功保存到相册，快去分享到您的圈子吧",
                                    showCancel:false
                                })
                            }
                        });
                    }
                })

            },

}

onLoad的时候调用

onLoad(){
  this.initData()
}

到此页面已经生成海报。。。