mounted () {
this.init()
},
methods: {
init () {
var initData = {
action: 'onIframeReady',
displayStyle: 'SHOW_CUSTOM_PAGE'
}
var initPostData = JSON.stringify(initData)
parent.postMessage(initPostData, 'https://payapp.weixin.qq.com')
const urlParams = new URLSearchParams(window.location.search)
for (const [key, value] of urlParams.entries()) {
if (key == 'out_trade_no') {
this.outTradeNo = value
}
if (key == 'channel') {
this.channel = value
}
console.log(`${key}: ${value}`)
}
getOrdernew({ outTradeNo: this.outTradeNo, channel: this.channel }).then(res => {
console.log(res)
this.orderId = res.data.orderId
this.payAmount = res.data ? res.data.payAmount / 100 : ''
})
},
handleTo () {
const url = window.location.origin + '/m-shop/checkResult?out_trade_no=wx_' + this.orderId
var mchData = {
action: 'jumpOut',
jumpOutUrl: url
}
var postData = JSON.stringify(mchData)
parent.postMessage(postData, 'https://payapp.weixin.qq.com')
}
}

微信商家小票页面无法动态获取屏幕宽高,若未手动设置
html
的font-size
,可能导致基于rem
的布局元素因默认font-size=0
而无法渲染,表现为白屏。解决方案:
在Vue组件的
mounted
生命周期中,强制设置html
的font-size
:document.querySelector('html').style.fontSize = "40px"; // 必须固定值,不可动态计算
页面是提示什么?无法获取订单信息?