进入页面白屏(下棋-人机对战页面),两个项目的代码已经放到附件
www_inav_site
- 发布：2023-08-15 16:57
- 更新：2024-11-06 10:26
- 阅读：629
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
手机系统： iOS
手机系统版本号： iOS 10.0
手机厂商： 苹果
手机机型： 苹果X
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
不白屏
不白屏
实际结果：
白屏
白屏
bug描述：
项目环境Vue3版本,出问题页面为nvue,用了webview组件,web-view引入的页面为用uniapp的vue3版本开发的项目发行->网站pc的代码,
现在两种情况,webview的src指向本地跑起来的代码没问题,比如http://192.168.0.179:1120#?u=/pages/playingChess/playPage&p=参数
但是src改成/hybrid/html/index.html#?u=/pages/playingChess/playPage&p=参数就会白屏,
安卓设备两种情况都没问题,这是什么原因呢?
www_inav_site (作者) - 时间就是金钱，而编程就是时间。
问题页面的代码
<template>
<view>
<web-view :style="{height:`${screenHeight}px`}" :webview-styles="webviewStyles" v-if="pageUrl" @onPostMessage="onPostMessage" @message="onPostMessage" :src="pageUrl" class="webView"></web-view>
</view>
</template>
<script setup>
import { onLoad, onUnload, onBackPress } from '@dcloudio/uni-app'
import { h5Url } from '@/config/baseURL'
import useStoreFun from '@/stores/index.js';
import { storeToRefs } from 'pinia'
const { useChessboard } = useStoreFun()
const { myBoard, myPieces, border, notation, tips, sound, regret, drawChess } = storeToRefs(useChessboard)
const p = encodeURIComponent(JSON.stringify({ // 将要传入到h5的参数
myBoard: myBoard.value,
myPieces: myPieces.value,
border: border.value,
notation: notation.value,
tips: tips.value,
sound: sound.value,
regret: regret.value,
drawChess: drawChess.value
}))
// #ifdef H5
onLoad(() => {
window.addEventListener("message", function(event) {
event.data.data && onPostMessage({detail:{data:[event.data.data.arg]}})
}, false);
})
onUnload(() => {
window.removeEventListener("message", function(e) {});
})
// #endif
// 监听安卓返回键并阻止返回,ios禁用侧滑返回即可
onBackPress(options => {
if (options.from === 'navigateBack') return false;
userBack();
return true;
})
function userBack() {
}
import { ref, reactive } from 'vue'
const pageUrl = `${h5Url}#?u=/pages/playingChess/playPage&p=${p}&t=${uni.getStorageSync('token')}`
const screenHeight = ref(uni.getSystemInfoSync().windowHeight)
const webviewStyles = reactive({ progress: false })
function onPostMessage(data) {
let obj = data.detail.data[0]
switch (obj.type) {
case 'setGame':
useChessboard.setSound(obj.data.sound)
useChessboard.setRegret(obj.data.regret)
useChessboard.setDrawChess(obj.data.drawChess)
break;
case 'audio':
sound.value && playAudio(obj.data)
break;
}
}
// 播放音频
function playAudio(data) {
const audioContext = uni.createInnerAudioContext();
audioContext.src = `../../static/audio/${data}.mp3`;
audioContext.play()
}
</script>
<style lang="scss" scoped>
</style> 
www_inav_site (作者) - 时间就是金钱，而编程就是时间。
<body>
测试进入
</body>我在html随便写一点内容,此时ios的webview组件的src换成/hybrid/html/index.html可以看到"测试进入",换成/hybrid/html/index.html#就没有这四个字了,/hybrid/html/index.html#?u=/pages/playingChess/playPage&p=${p}&t=${uni.getStorageSync('token')}更没有
