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

web-view

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

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

H5

wx.miniProgram.postMessage({data: { url }
})

uniapp

<web-view src="http://localhost:8080" @message="getMessage"></web-view>getMessage(e) {console.log(e.detail.data[0].url)
}

实战

1.h5页面

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

 <template><div><button @click="saveImg">生成图片</button><el-table :data="tableData" style="width: 100%" id="container"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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将元素转换为canvashtml2canvas(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>

2.微信小程序（uniapp）

嵌套页面index.vue

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

图片展示页面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>

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