!!!!!!微信新版本升级之后,部分小程序页面显示白屏,代码如下 !!!!!!
import Taro from '@tarojs/taro'
import React, { Component } from "react"
import { View, Button, Canvas } from '@tarojs/components'
import apiClass from '@api/apiClass'
import classNames from 'classnames'
import CollectSite from '../components/payForAnother/collectSite/collectSite'
import PayParts from '../components/payForAnother/payParts/payParts'
import PartsTotal from '../components/payForAnother/partsTotal/partsTotal'
import Payment from '../components/payForAnother/payment/index'
import './payOrderDetail.scss'
import moment from 'moment'
export default class Index extends Component {
constructor(props) {
super(props)
this.state = {
purchaseData: {},
orderDataState: false,
authorizationState: true,
paymentOpenId: '',
paymentSessionKey: '',
garageName: '',
shareOrderId: '',
garageId: '',
userId: ''
}
}
componentDidMount () {
const routerOptions = Taro.getCurrentInstance() || ''
const params = routerOptions.router.params
const shareOrderId = params.shareOrderId || ''
const garageId = params.garageId || ''
const userId = params.userId
this.setState({ shareOrderId, garageId, userId })
this.getOrderPurchaseConfirmDetail(shareOrderId)
this.getWxUserInfo()
}
// 采购单 信息接口
getOrderPurchaseConfirmDetail (shareOrderId) {
apiClass.purchasePayShareDetail(shareOrderId).then(res => {
this.setState({
orderDataState: true,
purchaseData: data,
purchasePayShareId: shareOrderId
})
})
})
}
// 分享操作
async onShareAppMessage () {
this.setState({
dialogStatue: false
})
const shareOrderId = this.state.shareOrderId
const dealerName = this.state.garageName || ''
let imageUrl = await this.drawImage() || ''
if (imageUrl) {
return {
path: `pages/payAnother/payOrderDetail?shareOrderId=${shareOrderId}`,
title: dealerName + '有一笔订单需付款,请确认后尽快完成支付',
imageUrl
}
}
}
// 订单详情外层样式
get computedClass () {
if (this.state.garageName) {
return 'pay-order-bottom1'
} else {
return this.state.authorizationState ? 'pay-order-bottom1':'pay-order-bottom'
}
}
// 定义绘制图片的方法
drawImage () {
let { payEndTime, payAmount } = this.state.purchaseData
payEndTime = moment(payEndTime).format("MM月DD日HH:mm")
payAmount = Number(payAmount).toFixed(2)
// 创建canvas对象
let ctx = Taro.createCanvasContext('myCanvas')
// 获取设备信息
let wid = 0
let hei = 0
Taro.getSystemInfo({
success: res => {
wid = res.windowWidth
hei = wid * 4 / 5
}
})
// 填充背景色
let grd = ctx.createLinearGradient(0, 0, wid, hei)
grd.addColorStop(0, '#E74A56')
grd.addColorStop(1, '#F88471')
ctx.setFillStyle(grd)
ctx.fillRect(0, 0, wid, hei)
// 绘制文字
this.drawText(ctx, {
x: wid / 2,
y: 33,
color: '#fff',
size: 58,
baseline: 'top',
text: `¥${payAmount}`,
bold: true
})
this.drawText(ctx, {
x: wid / 2,
y: 100,
color: '#fff',
size: 32,
baseline: 'top',
text: `待修理厂付款`
})
this.drawButton(ctx, '#fff', 10, hei / 2 + 10, wid - 20, hei / 2 - 20, 6)
this.drawButton(ctx, '#F84F54', 64, hei * 0.8 - 26, wid - 128, hei / 5 - 4, hei / 10 - 2)
this.drawText(ctx, {
x: wid / 2,
y: hei / 2 + 26,
color: '#363636',
size: 26,
baseline: 'top',
text: `请在${payEndTime}前完成支付`
})
this.drawText(ctx, {
x: wid / 2,
y: hei * 0.9 - 28,
color: '#fff',
size: 36,
baseline: 'middle',
text: `去支付`,
bold: true
})
// 将以上绘画操作进行渲染
return new Promise((resolve, reject) => {
ctx.draw(false, () => {
setTimeout(() => {
Taro.canvasToTempFilePath({
canvasId: 'myCanvas',
success (res) {
resolve(res.tempFilePath)
},
fail (res) {
reject(res)
}
})
}, 500)
})
})
}
// 渲染文字
drawText (ctx, obj) {
const siz = (obj.x * 2 / 422 * obj.size).toFixed(0)
ctx.save()
ctx.setFillStyle(obj.color)
ctx.setFontSize(siz)
ctx.setTextAlign(obj.align || 'center')
ctx.setTextBaseline(obj.baseline)
if (obj.bold) {
ctx.fillText(obj.text, obj.x, obj.y - 0.5)
ctx.fillText(obj.text, obj.x - 0.5, obj.y)
}
ctx.fillText(obj.text, obj.x, obj.y)
if (obj.bold) {
ctx.fillText(obj.text, obj.x, obj.y - 0.5)
ctx.fillText(obj.text, obj.x - 0.5, obj.y)
}
ctx.restore()
}
// 绘制按钮:x/y:按钮起始点,width/height按钮宽高,radius弧度
drawButton (ctx, color, x, y, width, height, radius) {
//分为4条直线4个圆角绘制
ctx.beginPath()
ctx.fillStyle = color
ctx.moveTo(x + radius, y)
ctx.lineTo(x + width - radius, y)
ctx.arc(x + width - radius, y + radius, radius, Math.PI*3/2, Math.PI*2)
ctx.lineTo(x + width, y + height - radius)
ctx.arc(x + width - radius, y + height - radius, radius, Math.PI, Math.PI/2)
ctx.lineTo(x + radius, y + height)
ctx.arc(x + radius, y + height - radius, radius, Math.PI/2, Math.PI)
ctx.lineTo(x, y + radius)
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI*3/2)
ctx.fill()
ctx.closePath()
}
render () {
const purchaseBatchInfo = this.state.purchaseData.purchaseBatchInfo || ''
const reveiveInfo = purchaseBatchInfo.reveiveInfo || ''
const purchaseCarList = purchaseBatchInfo.purchaseCarList || []
return (
<View className={classNames('main-content', this.computedClass)}>
<Canvas
id="canvas"
className="canvas"
canvasId="myCanvas" >
</Canvas>
<CollectSite collectSiteData={reveiveInfo}></CollectSite>
{
this.state.orderDataState && <View>
<PayParts purchaseCarList={purchaseCarList}></PayParts>
<PartsTotal purchaseBatchInfo={purchaseBatchInfo}></PartsTotal>
</View>
}
{
!this.state.orderDataState &&<View className='empty-data'></View>
}
{
!this.state.garageName && <Payment
openId={this.state.paymentOpenId}
sessionKey={this.state.paymentSessionKey}
purchaseBatchInfo={purchaseBatchInfo}
authorizationState={this.state.authorizationState}
onAuthorization={this.onAuthorization.bind(this)}
onSubmitPayment={this.onSubmitPayment.bind(this)}
></Payment>
}
</View>
)
}
}
同一个微信号,微信版本再8.0.43和8.0.44时,加载这个页面会白屏,真机调试发现请求接口 garage/purchase/pay/share/542428899498291200 在新版
本的微信中返回异常
而且加载小程序的页面资源一直处理卡死状态,导致小接口请求异常且小程序无法加载渲染报错
但是,在低版本的微信比如8.0.40或者8.0.39以下时,该页面打开加载都是正常没有问题的。请问这是微信新版本的BUG吗,又该怎么处理呢??
在正式版打开调试还有一种方法,就是先在开发版或体验版打开调试,再切到正式版就能看到vConsole
线上的复现方式提供下呢
一样的问题,发布正式就是白屏,真机调试、体验版都没问题