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

web-view

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

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

H5

javascript 复制代码
wx.miniProgram.postMessage({
   data: { url }
})

uniapp

javascript 复制代码
<web-view src="http://localhost:8080" @message="getMessage"></web-view>

getMessage(e) {
	console.log(e.detail.data[0].url)
}

实战

1.h5页面

新建项目或现有项目(可访问,可联通的)新开页面html等

javascript 复制代码
 <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>

2.微信小程序(uniapp)

嵌套页面index.vue

javascript 复制代码
<web-view src="http://localhost:8080"></web-view>

图片展示页面pages_sub/img

javascript 复制代码
<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图片,即可

相关推荐
程序员小刘2 小时前
Uniapp如何适配HarmonyOS5?条件编译指南以及常见的错误有哪些?
uni-app
耶啵奶膘3 小时前
uniapp+vue2+h5图片下载保存,微信浏览器、非微信浏览器
uni-app·notepad++
iOS阿玮7 小时前
排雷,金融类型产品14天封号倒计时脱困。
uni-app·app·apple
Random_index7 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
ywyy67988 小时前
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
人工智能·小程序·短剧·推客系统·推客小程序·推客系统开发·推客小程序开发
华子w90892585911 小时前
基于“SpringBoot+uniapp的考研书库微信小程序设计与实现7000字论文
微信小程序·小程序·uni-app
浩宇软件开发11 小时前
基于微信小程序的校园二手交易平台
微信小程序·小程序·校园二手交易
weixin_1772972206911 小时前
淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
小程序
王——小喵11 小时前
启动已有小程序项目
小程序
说私域11 小时前
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
人工智能·小程序·开源·零售