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

web-view

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

示例（无法实时传递数据），页面销毁时才能拿到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"><image :src="`${imgUrl}?t=${Math.random()}`"></image></view>
</template>
<script>
export default {data() {return {imgUrl: ''}},onLoad: function (options) {const url = options ? options.url : ''this.imgUrl = url.slice(5, url.length}
}
</script>