收藏
回答

微信更新8.0.44之后的新版本,小程序部分页面白屏?

!!!!!!微信新版本升级之后,部分小程序页面显示白屏,代码如下 !!!!!!


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.438.0.44时,加载这个页面会白屏,真机调试发现请求接口 garage/purchase/pay/share/542428899498291200 在新版
本的微信中返回异常

而且加载小程序的页面资源一直处理卡死状态,导致小接口请求异常且小程序无法加载渲染报错

但是,在低版本的微信比如8.0.40或者8.0.39以下时,该页面打开加载都是正常没有问题的。请问这是微信新版本的BUG吗,又该怎么处理呢??


回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-Jahozheng
    社区技术运营专员-Jahozheng
    2023-12-07

    在正式版打开调试还有一种方法,就是先在开发版或体验版打开调试,再切到正式版就能看到vConsole


    2023-12-07
    有用
    回复 4
    • 小白龙
      小白龙
      2023-12-07
      微信号a625274986 2023-12-07 早上9点到11点30之间的日志,我们的小程序是在腾讯音视频多人视频之后(2人没问题),跳转的页面只要切出小程序再切回来等待4s左右就会白屏卡死,之前版本没问题,就最近一个多月用户开始频繁反馈该问题,请排查一下呢?
      2023-12-07
      回复
    • 爱吃番茄的橘子猫
      爱吃番茄的橘子猫
      2023-12-15回复小白龙
      我们最近也是  白屏  无语了  我们是12月8号开始几乎天天有 白屏
      2023-12-15
      回复
    • 爱吃番茄的橘子猫
      爱吃番茄的橘子猫
      2023-12-15
      我们是webview白屏
      2023-12-15
      回复
    • 一如既往
      一如既往
      01-11
      我们是扫码加载白屏
      01-11
      回复
  • 社区技术运营专员--阳光
    社区技术运营专员--阳光
    2023-12-07

    线上的复现方式提供下呢

    2023-12-07
    有用
    回复 6
    • 帆布╭(╯ε╰)╮鞋
      帆布╭(╯ε╰)╮鞋
      2023-12-07
      这是线上用户分享出来的页面,怎么提供给你们复现啊
      2023-12-07
      回复
    • 帆布╭(╯ε╰)╮鞋
      帆布╭(╯ε╰)╮鞋
      2023-12-07
      而且调试打开时,是直接没有任何输出的,没有任何报错或者异常
      2023-12-07
      回复
    • 小白龙
      小白龙
      2023-12-07
      微信号a625274986 2023-12-07 早上9点到11点30之间的日志,我们的小程序是在腾讯音视频多人视频之后(2人没问题),跳转的页面只要切出小程序再切回来等待4s左右就会白屏卡死,ios无法复现而且之前版本没问题,就最近一个多月用户开始频繁反馈该问题,请排查一下呢?
      2023-12-07
      回复
    • 帆布╭(╯ε╰)╮鞋
      帆布╭(╯ε╰)╮鞋
      发表于移动端
      2023-12-08
      这个问题有没有解决的啊?
      2023-12-08
      回复
    • 爱吃番茄的橘子猫
      爱吃番茄的橘子猫
      2023-12-15
      有木有解决这个白屏问题啊
      2023-12-15
      回复
    查看更多(1)
  • Jeremy
    Jeremy
    01-03

    一样的问题,发布正式就是白屏,真机调试、体验版都没问题

    01-03
    有用
    回复
登录 后发表内容