uniapp+h5 ——微信小程序页面截屏保存在手机

web-view

需要用到 web-view ，类似于iframe， 将网页嵌套到微信小程序中，参数传递等；

示例（无法实时传递数据），页面销毁时才能拿到h5传递的数据，只能利用这点点击跳转到小程序另一个页面获取数据

H5

wx.miniProgram.postMessage({
   data: { url }
})
1
2
3

uniapp

<web-view src="http://localhost:8080" @message="getMessage"></web-view>

getMessage(e) {
	console.log(e.detail.data[0].url)
}
1
2
3
4
5

实战

1.h5页面

新建项目或现有项目（可访问，可联通的）新开页面html等

 <template>
 <div>
	 <button @click="saveImg">生成图片</button>
	 <el-table :data="tableData" style="width: 100%" id="container">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }]
        }
      },
      methods: {
      	saveImg() {
	      const container = document.querySelector('#container ') // 获取包含需要保存为图片的元素的容器
	      // 使用html2canvas将元素转换为canvas
	      html2canvas(container).then((canvas) => {
	        // 将canvas转换为Blob对象
	        canvas.toBlob((blob) => {
	          const url = URL.createObjectURL(blob) // 生成临时网络路径
	          wx.miniProgram.navigateTo({ // 跳转时销毁嵌套的h5页面，获取数据
	            url: `/pages_sub/img?url=${url}` // 直接跳转到另一页面预览生成的图片
	          })
	        }, 'image/png')
	      })
	    }
      }
    }
  </script>
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

2.微信小程序（uniapp）

嵌套页面index.vue

<web-view src="http://localhost:8080"></web-view>
1

图片展示页面pages_sub/img

<template>
  <view class="img_page">
  	<view class="text-right pr-2 height-2">
      <u-button @click="downloadImage" type="primary" size="mini">
        保存图片
      </u-button>
    </view>
    <image :src="`${imgUrl}?t=${Math.random()}`"></image>
  </view>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '',
      timer: null
    }
  },
  onLoad: function (options) {
    const url = options ? options.url : ''
    this.imgUrl = url.slice(5, url.length
  }，
  destroyed() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  methods: {
	downloadImage() {
      let that = this
      // 清除上一次的定时器
      if (this.timer) {
        clearTimeout(this.timer)
      }
      // 设置新的定时器
      this.timer = setTimeout(function () {
        // 显示加载提示
        wx.showToast({
          title: '下载中...',
          icon: 'loading'
        })
        let link = that.imgUrl // 获取图片URL
        // 下载文件
        wx.downloadFile({
          url: link,
          success(res) {
            if (res.statusCode === 200) {
              const filePath = res.tempFilePath // 获取图片临时文件路径
              // 检查权限
              wx.getSetting({
                success(res) {
                  if (!res.authSetting['scope.writePhotosAlbum']) {
                    // 请求授权
                    wx.authorize({
                      scope: 'scope.writePhotosAlbum',
                      success() {
                        that.saveImage(filePath) // 保存图片
                      },
                      fail() {
                        // 引导用户开启授权
                        wx.showModal({
                          title: '提示',
                          content:
                            '您已拒绝我们保存图片到相册，您可以在设置中开启',
                          success(res) {
                            if (res.confirm) {
                              wx.openSetting({
                                success(res) {
                                  console.log(res.authSetting)
                                }
                              })
                            }
                          }
                        })
                      }
                    })
                  } else {
                    that.saveImage(filePath) // 保存图片
                  }
                }
              })
            }
          },
          fail() {
            wx.showToast({
              // 添加失败提示框
              title: '下载失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      }, 1000) // 1000 毫秒的延迟
    },
    // 保存图片
    saveImage(filePath) {
      // 保存图片到系统相册
      wx.saveImageToPhotosAlbum({
        filePath: filePath,
        success(res) {
          wx.showToast({
            // 添加成功提示框
            title: '保存图片成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail() {
          wx.showToast({
            // 添加失败提示框
            title: '保存图片失败',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

3. 但此时的图片应该是展示不出来，小程序支持https路径的文件，可以在生成图片时调取接口存起来，在小程序跳转时再通过接口获取https图片，即可