uniapp 分享微信及分享到朋友圈(方法2中)，分享海报(原生 app)，及uni-app 中使用 html2canvas 生成图片_uniapp h5生成图片分享

1.方法一 微信转发及分享到朋友圈

参考链接

2.方法二 微信转发及分享到朋友圈

shareUrl(this.id).then(response => { // 获取二维码跳转地址
                    switch (e.item.name) {
                        case 'wxchum': // 重点是这里
                            uni.share({
                                provider: 'weixin',
                                scene: 'WXSceneSession',
                                type: 0,
                                href: response.share_url,
                                title: this.goods.name,
                                summary: this.goods.description,
                                imageUrl: this.goods.pictures[0],
                                fail(err) {
                                    uni.showToast({
                                        title: err.errMsg,
                                        icon: 'none'
                                    })
                                }
                            })

                            break;
                        case 'wxcircle':
                            uni.share({
                                provider: 'weixin',
                                scene: 'WXSceneTimeline',
                                type: 0,
                                href: response.share_url,
                                summary: this.goods.description,
                                imageUrl: this.goods.pictures[0],
                                fail(err) {
                                    uni.showToast({
                                        title: err.errMsg,
                                        icon: 'none'
                                    })
                                }
                            })
                            break;
                        case 'download':
                            this.canSave = true
                            uni.showLoading({
                                title: '保存中'
                            })
                            this.down()
                            break;
                    }
                }).catch(err => {
                    return
                })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3.生成海报-方法一（app原生截屏）

 down() {
                setTimeout(() => {
                    let pages = getCurrentPages();
                    let page = pages[pages.length - 1];
                    let ws = page.$getAppWebview();
                    let bitmap = new plus.nativeObj.Bitmap('drawScreen');
                    // 将webview内容绘制到Bitmap对象中  
                    ws.draw(bitmap, () => {
                        // 保存图片到本地  
                        bitmap.save("_doc/drawScreen.jpg", {
                            overwrite: true
                        }, res => {
                            uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
                                filePath: res.target, //图片文件路径
                                success: () => {
                                    this.canSave = false;
                                    uni.showToast({
                                        title: '保存图片成功，赶紧去转发给好友吧~',
                                        icon: 'none'
                                    })
                                },
                                fail: function(e) {
                                    uni.showModal({
                                        title: '温馨提示',
                                        content: '保存图片失败，重新再试试~',
                                        showCancel: false,
                                        confirmColor: "#34CE98",
                                        confirmText: '知道了',
                                        success: () => {
                                            this.canSave = false;
                                        }
                                    })
                                    uni.hideLoading()
                                }
                            });

                            bitmap.clear(); // 清除Bitmap对象  
                        }, error => {
                            uni.showModal({
                                title: '温馨提示',
                                content: '保存图片失败，重新再试试~',
                                showCancel: false,
                                confirmColor: "#34CE98",
                                confirmText: '知道了',
                                success: () => {
                                    this.canSave = false;
                                }
                            })
                            uni.hideLoading()
                            bitmap.clear(); // 清除Bitmap对象  
                        });
                        // bitmap.clear(); // 清除Bitmap对象  
                    }, error => {
                        uni.showModal({
                            title: '温馨提示',
                            content: '保存图片失败，重新再试试~',
                            showCancel: false,
                            confirmColor: "#34CE98",
                            confirmText: '知道了',
                            success: () => {
                                this.canSave = false;
                            }
                        })
                        uni.hideLoading()
                    }, {
                        check: true, // 设置为检测白屏  
                    });
                }, 2000)
            },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

4.uni-app 中使用 html2canvas 生成图片

在使用uni-app 开发的过程中有没有遇到 无法使用html2canvas生成图片的问题呢？那么通过这篇文章，我们来记录下如何在uniapp生成画布图片的。
首先需要在你的uni-app项目中安装 html2canvas 插件

npm install html2canvas -D
1

或者

yarn add html2canvas -D
1

在需要生成图片的页面中引入 html2canvas 插件
不过此时需要在 页面中新建一个 script 节点，将 lang 属性设置为renderjs，代码如下：

<script>
export default {
  data() {
    return {};
  }
};
</script>

// 在这里新增一个 script 节点 用于在页面中使用dom
<script lang="renderjs" module="canvasImage">
import html2canvas from 'html2canvas'
export default {
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15