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>