uni-app app分享到微信聊天作为小程序，且截图页面作为小程序分享封面保姆级教程（app分享到微信模仿微信小程序分享封面绘制）

注意事项：

分享到朋友圈仅支持分享图文、图片、文字如需要做分享app到朋友圈一般是canvas绘制成海报分享图片。
本项目是基于vue3 hbuilder x3.99实现
代码复制进去就可用，有问题可留言或私信

步骤

1. 封装截图压缩的方法

js部分，在utils.js中封装一个压缩图片的方法，因为分享微信小程序的封面图不能超过120kb（大概），否则会导致微信进行压缩从而超级模糊

export function imageCompress(file){
   
    return new Promise((resolve, reject)=>{
   
        let {
    size,path, tempFilePath } = file
        let type  = path.split(".")[1]
        //大于120kb进行压缩
        if(size <= 120*1024){
   
            resolve(file)
            return false
        } 
        uni.compressImage({
   
            src: tempFilePath,
            quality: 70,
            width:'80%',
            height: 'auto',
            success: res => {
   
                let newPath = res.tempFilePath+type
                uni.getFileInfo({
   
                    filePath:res.tempFilePath,
                    success:async (info)=>{
   
                        console.log('compress img:', info.size / 1024);
                        let newFile = {
   ...file,size:info.size,path:newPath,tempFilePath:res.tempFilePath}
                        resolve(await imageCompress(newFile))
                    }
                })
            },
            fail:err=>{
   
                console.log('compressImage fail:', err)
            }
        })    
    })
}

2. 创建canvas，设置透明度为0，固定定位在页面上，截图绘制 分享

因为分享小程序封面是5:4比例，因此设置成750rpx:600rpx。

<button @click="onShare('微信')">分享到微信</button>
<button @click="onShare('朋友圈')