微信商家小票页面无法动态获取屏幕宽高,若未手动设置[代码]html[代码]的[代码]font-size[代码],可能导致基于[代码]rem[代码]的布局元素因默认[代码]font-size=0[代码]而无法渲染,表现为白屏。 解决方案: 在Vue组件的[代码]mounted[代码]生命周期中,强制设置[代码]html[代码]的[代码]font-size[代码]: document.querySelector('html').style.fontSize = "40px"; // 必须固定值,不可动态计算
点金计划 商家小票页面首次加载显示空白页,刷新后可以显示出内容,什么原因导致的?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') } } [图片]
04-10