年前業務部門的同事提了一個需求，將公司PC端詢價系統的報價單導出功能移植到到小程序上。
最初接到這個任務時，有點小崩潰，主要問題有兩個：
- 小程序無法操作DOM元素，因此不能使用 html2Canvas 像PC端一樣直接將DOM元素生成圖片。
- 如果用Canvas自己畫，只能手寫大量代碼，可讀性差，拓展困難。
在對著uni-app文檔思考了一段時間之后，決定嘗試一下小程序與webview雙向通信這個解決方案。
解決思路
其實思路也不復雜，就是利用 uni-app 的 <webview> 組件嵌入一個部署在服務器上的 H5 頁面，借助小程序與 H5 之間的通信機制，將圖片生成的工作轉移到 H5 端完成，然后將生成的 base64 圖片文件返回給小程序并保存到本地相冊。
完整方案代碼
簡單說一下這個方案的優勢：
- 解決了小程序的DOM限制：H5的環境下可以操作DOM，使用 html2canvas 可以正常運行。
- 可讀性/拓展性強：頁面直接用傳統的三件套（HTML/CSS/JS）構建，容易理解。同時針對不同業務板塊可以拓展多個模板。
- 職責分離：小程序只負責傳遞數據，H5負責渲染頁面和截圖。
當然，在這個過程中我也需要和后端同事提前做好溝通，H5頁面的數據是需要通過接口傳參獲取的。
小程序端代碼：
<template>
<view class="container">
<web-view :src="url" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: '' ,
isShow: '',
imgUrl: '',
priceId: '',
priceType: '',
tokenId: '',
}
},
onLoad(options) {
this.priceId = options.feeId
this.priceType = options.Type
this.tokenId = uni.getStorageSync('loginInfo').F_WxToken
this.url = 'https://wxa.xxxx.com/index/index/lclindex?priceId=' + this.priceId + '&priceType=' + this.priceType + '&tokenId=' + this.tokenId
},
methods: {
savePoster() {
uni.getSetting({
success: (res) => {
if (res.authSetting['scope.writePhotosAlbum']) {
this.saveImageToMobilePhotos()
} else {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToMobilePhotos()
},
fail: () => {
uni.showToast({
title: this.$t('pub.author'),
icon: 'none',
duration: 2000
})
setTimeout(() => {
uni.openSetting({
success: (res2) => {
console.log(res2.authSetting)
}
})
}, 3000)
}
})
}
}
})
},
handleMessage(e) {
if(e.detail.data[0].url) {
this.imgUrl = e.detail.data[0].url
let base64 = this.imgUrl.replace(/^data:image\/\w+;base64,/, "")
let filePath = wx.env.USER_DATA_PATH + '/worldjaguar_lclprice.jpg'
uni.getFileSystemManager().writeFile({
filePath: filePath,
data: base64,
encoding: 'base64',
success: res => {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: res2 => {
uni.hideLoading()
uni.showToast({
title: this.$t('pub.saveimageauthor'),
icon: "none",
duration: 3000
})
},
fail: err => {
uni.hideLoading()
console.log(err)
}
})
},
fail: err => {
uni.hideLoading()
console.log(err)
}
})
}
}
}
}
</script>
H5頁面代碼
在H5頁面中兼容小程序并調用uni-app部分API需要分別引入 jweixin.js 和 uni.webview.js。
與小程序端完成信息通信則使用 uni.postMessage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="application/json; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, viewport-fit=cover">
<title>生成報價單</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
</head>
<body>
<div id="app">
<div class="pub-mask" v-show="showMask">
<div class="pub-mask-box">
<img src="./images/loading.gif" alt="">
<span>報價圖片生成中...</span>
</div>
</div>
<div class="savebox" id="savebox">
......布局代碼
</div>
<button type="button" @click="postMessage" id="postMessage" class="savebox-image">保存圖片</button>
</div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script type="text/javascript">
var App = new Vue({
el: '#app',
data: {
priceId: '',
priceType: '',
tokenId: '',
dataInfo: {},
userInfo: {},
freightArr: [],
polArr: [],
podArr: [],
showMask: true,
dateNumber: ''
},
mounted() {
console.log(document.title)
this.$nextTick(() => {
document.addEventListener('UniAppJSBridgeReady', function () {
uni.getEnv(function (res) {
console.log('當前環境：' + JSON.stringify(res));
})
})
})
},
created() {
this.priceId = this.getQuery('priceId')? this.getQuery('priceId') : ''
this.priceType = this.getQuery('priceType')? this.getQuery('priceType') : ''
this.tokenId = this.getQuery('tokenId')? this.getQuery('tokenId') : ''
document.title = this.priceType == 1? '生成海出拼箱報價單' : '生成海進拼箱報價單'
this.getSaveImageData()
},
methods: {
// 接收uni-app小程序傳遞的參數
getQuery(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
// 對參數值進行解碼
return decodeURIComponent(r[2]);
}
return null;
},
postMessage() {
html2canvas(document.querySelector('#savebox'), {
allowTaint: true,
scale: 2,
dpi: 300,
useCORS: true
}).then(canvas => {
let imgUrl = canvas.toDataURL('image/jpeg', 1.0)
// 注意：base64大圖可能導致通信超時，如果是海報或高清圖片需求建議上傳服務器后返回URL
uni.postMessage({
data: {
url: imgUrl
}
})
uni.navigateBack({
url: '/pages/saveimage/saveimage‘
})
})
},
getSaveImageData() {
axios({
method: 'post',
url: 'https://wxa.worldjaguar.com/apis/Lclquote/getLclImgInfo',
data: {
QuoteId: 'xxxxxxxx',
Type: 1,
ApiType: 2,
wxAuthorization: 'xxxxxxxx'
}
})
.then(res => {
if(res.data.code == 200) {
this.dataInfo = res.data.data
this.userInfo = res.data.data.Contact
this.freightArr = res.data.data.freightSurcharge
this.polArr = res.data.data.departurePortCharges
this.podArr = res.data.data.destinationPorts
this.createdPriceNumber()
setTimeout(() => {
this.showMask = false
}, 2600)
}else {
alert(res.data.info)
this.showMask = false
}
})
}
}
})
</script>
</body>
</html>
注意事項
<webview> 組件中的 @message 只會在組件銷毀、頁面回退和分享時進行觸發，不會立刻收到消息，由于我的系統業務邏輯相對簡單，所以采用了回退的方式。
比較推薦的做法是將生成的圖片上傳給服務器接口，然后將生成的URL傳遞給小程序，這樣既能保證同步性，也能解決如果圖片過大直接返回小程序造成卡頓的問題。
另外，由于每次生成圖片都需要加載一個H5頁面， 用戶等待時會出現白屏或中間態等影響體驗的問題，最好添加一個loading遮罩，優化用戶體驗。
最后，不要忘記在小程序后臺將訪問域名配置到白名單，域名確認為HTTPS，確保 <webview> H5頁面URL可以正常訪問。
后續思考
這個案例本身并不復雜，但在實際落地過程中，我們仍然經歷了近兩個小時的討論與權衡。從技術深度的角度來看，Canvas 方案無疑更能體現開發者的深層技術能力；但在真實的業務場景下，我們更傾向于選擇一個可讀性強、易于維護、迭代成本低的務實方案。
?轉自https://juejin.cn/post/7612596935200948251
該文章在 2026/3/9 15:20:05 編輯過
400 186 1886
