目前uniapp微信小程序生成分享海報(bào)有很多種方式铭乾，本文介紹使用Painter+拖拽的方式

.插件地址

Painter (Painter 的插件)
拖曳布局組件 （大神寫的拖拽布局）

.引入Painter

1.可以直接下載源碼磁滚，然后再uniapp 項(xiàng)目下新建文件夾static,將Painter/components/painter/的文件拷貝到文件夾下，然后在page.json對(duì)應(yīng)頁面引入組件

                "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布局好你需要的海報(bào)樣子，然后復(fù)制代碼规哪，如圖

image.png

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:"生成海報(bào)失敗",
                    showCancel:false,
                })
                console.log(e);
            },
            saveImage() {  //長(zhǎng)按保存
                var _this = this;
                uni.authorize({
                    scope:"scope.writePhotosAlbum",
                    success() {
                        uni.saveImageToPhotosAlbum({
                            filePath: _this.imagePath,
                            success(){
                                uni.showModal({
                                    title:"保存成功",
                                    content:"圖片已成功保存到相冊(cè)蝠嘉，快去分享到您的圈子吧",
                                    showCancel:false
                                })
                            }
                        });
                    }
                })

            },

}

onLoad的時(shí)候調(diào)用

onLoad(){
  this.initData()
}

到此頁面已經(jīng)生成海報(bào)。杯巨。蚤告。